@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
package/hydrate/index.js
CHANGED
|
@@ -8538,7 +8538,7 @@ let SdTable$1 = class SdTable {
|
|
|
8538
8538
|
}; }
|
|
8539
8539
|
};
|
|
8540
8540
|
|
|
8541
|
-
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
|
|
8541
|
+
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}}";
|
|
8542
8542
|
|
|
8543
8543
|
class SdTable {
|
|
8544
8544
|
constructor(hostRef) {
|
|
@@ -8561,6 +8561,7 @@ class SdTable {
|
|
|
8561
8561
|
noDataLabel = '데이터가 없습니다.';
|
|
8562
8562
|
isLoading = false;
|
|
8563
8563
|
pagination;
|
|
8564
|
+
headerCellRenderer;
|
|
8564
8565
|
bodyCellRenderer;
|
|
8565
8566
|
useInternalPagination = false;
|
|
8566
8567
|
useRowsPerPageSelect = false;
|
|
@@ -8570,9 +8571,15 @@ class SdTable {
|
|
|
8570
8571
|
{ label: '50개씩 보기', value: 50 },
|
|
8571
8572
|
{ label: '100개씩 보기', value: 100 },
|
|
8572
8573
|
];
|
|
8573
|
-
useVirtualScroll =
|
|
8574
|
-
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
|
|
8575
|
-
|
|
8574
|
+
useVirtualScroll = {}; // 가상 스크롤 사용 여부
|
|
8575
|
+
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
|
|
8576
|
+
// 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
|
|
8577
|
+
// 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
|
|
8578
|
+
virtualColumnWidth = 120;
|
|
8579
|
+
virtualBufferSize = {
|
|
8580
|
+
vertical: 5,
|
|
8581
|
+
horizontal: 5,
|
|
8582
|
+
}; // 가상 스크롤 위아래 버퍼 크기
|
|
8576
8583
|
sdSelectChange;
|
|
8577
8584
|
sdPageChange;
|
|
8578
8585
|
sdRowsPerPageChange;
|
|
@@ -8582,17 +8589,34 @@ class SdTable {
|
|
|
8582
8589
|
columnWidths = [];
|
|
8583
8590
|
scrolledLeft = false;
|
|
8584
8591
|
scrolledRight = false;
|
|
8585
|
-
|
|
8586
|
-
|
|
8592
|
+
// 세로 가상 스크롤 상태값
|
|
8593
|
+
virtualStartIndex = 0;
|
|
8594
|
+
virtualEndIndex = 0;
|
|
8587
8595
|
scrollTopPosition = 0;
|
|
8596
|
+
// 가로 가상 스크롤 상태값
|
|
8597
|
+
virtualStartColIdx = 0;
|
|
8598
|
+
virtualEndColIdx = 0;
|
|
8599
|
+
scrollLeftPosition = 0;
|
|
8588
8600
|
scrollRequestAnimationFrame = null;
|
|
8589
8601
|
scrollContainer = null;
|
|
8590
8602
|
handleColumnsChange(newCols) {
|
|
8591
8603
|
this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
|
|
8604
|
+
if (this.useVirtualScroll.horizontal) {
|
|
8605
|
+
requestAnimationFrame(() => {
|
|
8606
|
+
this.calculateVisibleColumnRange();
|
|
8607
|
+
});
|
|
8608
|
+
}
|
|
8609
|
+
}
|
|
8610
|
+
handleColumnWidthsChange() {
|
|
8611
|
+
if (this.useVirtualScroll.horizontal) {
|
|
8612
|
+
requestAnimationFrame(() => {
|
|
8613
|
+
this.calculateVisibleColumnRange();
|
|
8614
|
+
});
|
|
8615
|
+
}
|
|
8592
8616
|
}
|
|
8593
8617
|
handleRowsChange(newRows) {
|
|
8594
8618
|
this.innerRows = [...newRows];
|
|
8595
|
-
if (this.useVirtualScroll) {
|
|
8619
|
+
if (this.useVirtualScroll.vertical) {
|
|
8596
8620
|
requestAnimationFrame(() => {
|
|
8597
8621
|
this.calculateVisibleRange();
|
|
8598
8622
|
});
|
|
@@ -8604,7 +8628,7 @@ class SdTable {
|
|
|
8604
8628
|
handlePaginationChange(newVal) {
|
|
8605
8629
|
if (newVal?.page && newVal.page !== this.currentPage) {
|
|
8606
8630
|
this.currentPage = newVal.page;
|
|
8607
|
-
if (this.useVirtualScroll && this.scrollContainer) {
|
|
8631
|
+
if (this.useVirtualScroll.vertical && this.scrollContainer) {
|
|
8608
8632
|
this.scrollContainer.scrollTop = 0;
|
|
8609
8633
|
this.scrollTopPosition = 0;
|
|
8610
8634
|
this.calculateVisibleRange();
|
|
@@ -8631,13 +8655,21 @@ class SdTable {
|
|
|
8631
8655
|
const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
|
|
8632
8656
|
this.scrolledLeft = scrollLeft > 0;
|
|
8633
8657
|
this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
|
|
8634
|
-
if (this.useVirtualScroll) {
|
|
8658
|
+
if (this.useVirtualScroll.vertical || this.useVirtualScroll.horizontal) {
|
|
8635
8659
|
if (this.scrollRequestAnimationFrame !== null) {
|
|
8636
8660
|
cancelAnimationFrame(this.scrollRequestAnimationFrame);
|
|
8637
8661
|
}
|
|
8638
8662
|
this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
|
|
8639
|
-
|
|
8640
|
-
this.
|
|
8663
|
+
// 세로 가상 스크롤 계산
|
|
8664
|
+
if (this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop) {
|
|
8665
|
+
this.scrollTopPosition = scrollTop;
|
|
8666
|
+
this.calculateVisibleRange();
|
|
8667
|
+
}
|
|
8668
|
+
// 가로 가상 스크롤 계산
|
|
8669
|
+
if (this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft) {
|
|
8670
|
+
this.scrollLeftPosition = scrollLeft;
|
|
8671
|
+
this.calculateVisibleColumnRange();
|
|
8672
|
+
}
|
|
8641
8673
|
this.scrollRequestAnimationFrame = null;
|
|
8642
8674
|
});
|
|
8643
8675
|
}
|
|
@@ -8662,7 +8694,7 @@ class SdTable {
|
|
|
8662
8694
|
return result;
|
|
8663
8695
|
}
|
|
8664
8696
|
get virtualRows() {
|
|
8665
|
-
if (!this.useVirtualScroll) {
|
|
8697
|
+
if (!this.useVirtualScroll.vertical) {
|
|
8666
8698
|
return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
|
|
8667
8699
|
}
|
|
8668
8700
|
return this.paginatedRows
|
|
@@ -8673,18 +8705,40 @@ class SdTable {
|
|
|
8673
8705
|
}));
|
|
8674
8706
|
}
|
|
8675
8707
|
get topSpacerHeight() {
|
|
8676
|
-
if (!this.useVirtualScroll || this.virtualStartIndex === 0)
|
|
8708
|
+
if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
|
|
8677
8709
|
return 0;
|
|
8678
8710
|
return this.virtualStartIndex * this.virtualRowHeight;
|
|
8679
8711
|
}
|
|
8680
8712
|
get bottomSpacerHeight() {
|
|
8681
|
-
if (!this.useVirtualScroll)
|
|
8713
|
+
if (!this.useVirtualScroll.vertical)
|
|
8682
8714
|
return 0;
|
|
8683
8715
|
const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
|
|
8684
8716
|
return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
|
|
8685
8717
|
}
|
|
8718
|
+
getHorizontalSpacerWidth(position) {
|
|
8719
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
8720
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
8721
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8722
|
+
const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
|
|
8723
|
+
if (position === 'right' && remainingCols <= 0)
|
|
8724
|
+
return 0;
|
|
8725
|
+
const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
|
|
8726
|
+
return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
|
|
8727
|
+
}
|
|
8728
|
+
get leftSpacerWidth() {
|
|
8729
|
+
if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
|
|
8730
|
+
return 0;
|
|
8731
|
+
}
|
|
8732
|
+
return this.getHorizontalSpacerWidth('left');
|
|
8733
|
+
}
|
|
8734
|
+
get rightSpacerWidth() {
|
|
8735
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
8736
|
+
return 0;
|
|
8737
|
+
}
|
|
8738
|
+
return this.getHorizontalSpacerWidth('right');
|
|
8739
|
+
}
|
|
8686
8740
|
get totalVirtualHeight() {
|
|
8687
|
-
if (!this.useVirtualScroll)
|
|
8741
|
+
if (!this.useVirtualScroll.vertical)
|
|
8688
8742
|
return 0;
|
|
8689
8743
|
return this.paginatedRows.length * this.virtualRowHeight;
|
|
8690
8744
|
}
|
|
@@ -8743,8 +8797,9 @@ class SdTable {
|
|
|
8743
8797
|
return true; // 전부 선택됨
|
|
8744
8798
|
return null; // 일부만 선택됨
|
|
8745
8799
|
}
|
|
8800
|
+
// 세로 가상 스크롤 렌더링 계산
|
|
8746
8801
|
calculateVisibleRange() {
|
|
8747
|
-
if (!this.useVirtualScroll) {
|
|
8802
|
+
if (!this.useVirtualScroll.vertical) {
|
|
8748
8803
|
this.virtualStartIndex = 0;
|
|
8749
8804
|
this.virtualEndIndex = this.paginatedRows.length - 1;
|
|
8750
8805
|
return;
|
|
@@ -8754,8 +8809,60 @@ class SdTable {
|
|
|
8754
8809
|
const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
|
|
8755
8810
|
const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
|
|
8756
8811
|
const endIndex = startIndex + visibleCount;
|
|
8757
|
-
|
|
8758
|
-
this.
|
|
8812
|
+
const bufferSize = this.virtualBufferSize.vertical || 5;
|
|
8813
|
+
this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
|
|
8814
|
+
this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
|
|
8815
|
+
}
|
|
8816
|
+
// 가로 가상 스크롤 렌더링 계산
|
|
8817
|
+
calculateVisibleColumnRange() {
|
|
8818
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
8819
|
+
this.virtualStartColIdx = 0;
|
|
8820
|
+
this.virtualEndColIdx = this.visibleColumns.length - 1;
|
|
8821
|
+
return;
|
|
8822
|
+
}
|
|
8823
|
+
const scrollLeft = this.scrollLeftPosition;
|
|
8824
|
+
const containerWidth = this.scrollContainer?.clientWidth || 0;
|
|
8825
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
8826
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
8827
|
+
// 가상 스크롤 컬럼 - sticky column 제외
|
|
8828
|
+
const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8829
|
+
if (virtualColumns.length === 0) {
|
|
8830
|
+
this.virtualStartColIdx = 0;
|
|
8831
|
+
this.virtualEndColIdx = 0;
|
|
8832
|
+
return;
|
|
8833
|
+
}
|
|
8834
|
+
const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
|
|
8835
|
+
(this.selectable ? 52 : 0);
|
|
8836
|
+
const stickyRightWidth = this.columnWidths
|
|
8837
|
+
.slice(this.visibleColumns.length - stickyRightCount)
|
|
8838
|
+
.reduce((sum, width) => sum + width, 0);
|
|
8839
|
+
// 가상 스크롤 영역의 너비 계산
|
|
8840
|
+
const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
|
|
8841
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8842
|
+
const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
|
|
8843
|
+
const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
|
|
8844
|
+
acc.push((acc[idx - 1] || 0) + width);
|
|
8845
|
+
return acc;
|
|
8846
|
+
}, []);
|
|
8847
|
+
let startIdx = 0; // 가상 스크롤 시작 인덱스
|
|
8848
|
+
let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
|
|
8849
|
+
// sticky left 영역 제외한 스크롤 위치
|
|
8850
|
+
for (let i = 0; i < reducedVirtualWidth.length; i++) {
|
|
8851
|
+
if (reducedVirtualWidth[i] > virtualScrollLeft) {
|
|
8852
|
+
startIdx = Math.max(0, i);
|
|
8853
|
+
break;
|
|
8854
|
+
}
|
|
8855
|
+
}
|
|
8856
|
+
const scrollRight = virtualScrollLeft + virtualScrollableWidth;
|
|
8857
|
+
for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
|
|
8858
|
+
if (reducedVirtualWidth[i] >= scrollRight) {
|
|
8859
|
+
endIdx = Math.min(virtualColumns.length - 1, i);
|
|
8860
|
+
break;
|
|
8861
|
+
}
|
|
8862
|
+
}
|
|
8863
|
+
const bufferSize = this.virtualBufferSize.horizontal || 5;
|
|
8864
|
+
this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
|
|
8865
|
+
this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
|
|
8759
8866
|
}
|
|
8760
8867
|
// ----- Helpers -----
|
|
8761
8868
|
getStickyStyle(colIdx) {
|
|
@@ -8798,34 +8905,71 @@ class SdTable {
|
|
|
8798
8905
|
const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
8799
8906
|
return format ? format(value, row) : value;
|
|
8800
8907
|
}
|
|
8908
|
+
getColumnRenderedInOrder() {
|
|
8909
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
8910
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
8911
|
+
// Sticky left 컬럼들
|
|
8912
|
+
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
8913
|
+
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
8914
|
+
const middleCols = this.useVirtualScroll.horizontal
|
|
8915
|
+
? this.visibleColumns
|
|
8916
|
+
.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
|
|
8917
|
+
.slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
|
|
8918
|
+
: this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8919
|
+
return {
|
|
8920
|
+
stickyLeftCount,
|
|
8921
|
+
stickyRightCount,
|
|
8922
|
+
stickyLeftCols,
|
|
8923
|
+
middleCols,
|
|
8924
|
+
stickyRightCols,
|
|
8925
|
+
};
|
|
8926
|
+
}
|
|
8801
8927
|
// ----- Render -----
|
|
8802
|
-
|
|
8928
|
+
renderHead() {
|
|
8929
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
8803
8930
|
return (hAsync("thead", null, hAsync("tr", null, this.selectable && (hAsync("th", { class: {
|
|
8804
8931
|
'sd-th': true,
|
|
8805
8932
|
'sd-th--selected': true,
|
|
8806
8933
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
8807
8934
|
}, style: {
|
|
8808
8935
|
'--sticky-left-offset': '0px',
|
|
8809
|
-
} }, hAsync("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))),
|
|
8810
|
-
|
|
8811
|
-
|
|
8812
|
-
|
|
8813
|
-
|
|
8814
|
-
|
|
8815
|
-
|
|
8816
|
-
|
|
8817
|
-
|
|
8936
|
+
} }, hAsync("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
|
|
8937
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
8938
|
+
return (hAsync("th", { key: col.name, class: {
|
|
8939
|
+
'sd-th': true,
|
|
8940
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
8941
|
+
'sticky-left': true,
|
|
8942
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
8943
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
|
|
8944
|
+
}), this.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
|
|
8945
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
8946
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
8947
|
+
return (hAsync("th", { key: col.name, class: {
|
|
8948
|
+
'sd-th': true,
|
|
8949
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
8950
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
8951
|
+
}), this.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
|
|
8952
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
8953
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
8954
|
+
return (hAsync("th", { key: col.name, class: {
|
|
8955
|
+
'sd-th': true,
|
|
8956
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
8957
|
+
'sticky-right': true,
|
|
8958
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
8959
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
8960
|
+
}))));
|
|
8818
8961
|
}
|
|
8819
8962
|
renderBody() {
|
|
8820
|
-
return (hAsync("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 && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), this.useVirtualScroll && this.topSpacerHeight > 0 && (hAsync("tr", { key: "virtual-top-spacer", style: {
|
|
8963
|
+
return (hAsync("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 && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && (hAsync("tr", { key: "virtual-top-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
8821
8964
|
height: `${this.topSpacerHeight}px`,
|
|
8822
|
-
}, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
|
|
8823
|
-
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "virtual-bottom-spacer", style: {
|
|
8965
|
+
}, "aria-hidden": "true" }, hAsync("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, hAsync("div", { class: "sd-table__skeleton" })))), this.paginatedRows.length > 0 &&
|
|
8966
|
+
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical && this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "virtual-bottom-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
8824
8967
|
height: `${this.bottomSpacerHeight}px`,
|
|
8825
|
-
}, "aria-hidden": "true" }))));
|
|
8968
|
+
}, "aria-hidden": "true" }, hAsync("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, hAsync("div", { class: "sd-table__skeleton" }))))));
|
|
8826
8969
|
}
|
|
8827
8970
|
renderRow(row, rowIdx) {
|
|
8828
|
-
|
|
8971
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
8972
|
+
return (hAsync("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
|
|
8829
8973
|
? {
|
|
8830
8974
|
height: `${this.virtualRowHeight}px`,
|
|
8831
8975
|
}
|
|
@@ -8835,29 +8979,61 @@ class SdTable {
|
|
|
8835
8979
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
8836
8980
|
}, style: {
|
|
8837
8981
|
'--sticky-left-offset': '0px',
|
|
8838
|
-
} }, hAsync("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))),
|
|
8982
|
+
} }, hAsync("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
|
|
8839
8983
|
const rendered = this.bodyCellRenderer?.(column, row);
|
|
8840
8984
|
return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
8841
8985
|
'sd-td': true,
|
|
8842
8986
|
[`sd-td--${column.align || 'left'}`]: true,
|
|
8843
|
-
'sticky-left':
|
|
8844
|
-
'sticky-
|
|
8845
|
-
'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
|
|
8846
|
-
'sticky-right-edge': Boolean(this.stickyColumn.right &&
|
|
8847
|
-
colIdx === this.visibleColumns.length - this.stickyColumn.right),
|
|
8987
|
+
'sticky-left': true,
|
|
8988
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
8848
8989
|
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
8849
|
-
}, style: this.getStickyStyle(
|
|
8990
|
+
}, style: this.getStickyStyle(idx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
8991
|
+
}), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
|
|
8992
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
8993
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
8994
|
+
return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
8995
|
+
'sd-td': true,
|
|
8996
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
8997
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
8998
|
+
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
8999
|
+
}), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
|
|
9000
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
9001
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
9002
|
+
return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
9003
|
+
'sd-td': true,
|
|
9004
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
9005
|
+
'sticky-right': true,
|
|
9006
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
9007
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
9008
|
+
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
8850
9009
|
})));
|
|
8851
9010
|
}
|
|
9011
|
+
renderSpacerTd(position, rowIdx) {
|
|
9012
|
+
const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
|
|
9013
|
+
const showSpacer = position === 'left'
|
|
9014
|
+
? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
|
|
9015
|
+
: this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
|
|
9016
|
+
if (!showSpacer)
|
|
9017
|
+
return null;
|
|
9018
|
+
return (hAsync("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
|
|
9019
|
+
width: `${spacerWidth}px`,
|
|
9020
|
+
minWidth: `${spacerWidth}px`,
|
|
9021
|
+
maxWidth: `${spacerWidth}px`,
|
|
9022
|
+
padding: '0',
|
|
9023
|
+
border: 'none',
|
|
9024
|
+
}, "aria-hidden": "true" }, hAsync("div", { class: "sd-table__skeleton" })));
|
|
9025
|
+
}
|
|
8852
9026
|
render() {
|
|
8853
|
-
return (hAsync(Host, { key: '
|
|
9027
|
+
return (hAsync(Host, { key: '06caa893329f7de501804922dea824c01fc393bb' }, hAsync("div", { key: '7b806f1fa25c60e11dd22cf67177c4856a576e76', class: "sd-table__wrapper", style: {
|
|
8854
9028
|
'--table-width': this.width,
|
|
8855
9029
|
'--table-height': this.height,
|
|
8856
|
-
} }, hAsync("div", { key: '
|
|
9030
|
+
} }, hAsync("div", { key: '6d24df1310c746fe7742dbeee3750d62bd286c25', class: "sd-table__container", style: {
|
|
9031
|
+
'--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
|
|
9032
|
+
} }, hAsync("div", { key: 'de042c2e56baa207d1602b6d9cdcbe7d2c2780dd', class: {
|
|
8857
9033
|
'sd-table__middle': true,
|
|
8858
9034
|
'sd-table__middle--scrollable': this.paginatedRows.length > 0,
|
|
8859
9035
|
'sd-table__middle--loading': this.isLoading,
|
|
8860
|
-
} }, hAsync("table", { key: '
|
|
9036
|
+
} }, hAsync("table", { key: 'f392dbedf10677e704e0dd6fc1233dc931e2e017', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), hAsync("div", { key: '99fa9cff08bd0599a63a34caba645e9893ea963d', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: '3e135dd33d5188abbe753b03c9a0c6c6f38210dc', class: "sd-table__no-data" }, hAsync("slot", { key: '144d91b72af6ca2b966e7d3de783eb09f6880b20', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '0ce235dc30c09823f3bc37b47dfd4d1941d3dbd8', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'e68be3464a8e8c6e99290e6ec3308d22c4238738', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
|
|
8861
9037
|
if (!this.useInternalPagination) {
|
|
8862
9038
|
this.sdPageChange.emit(e.detail);
|
|
8863
9039
|
}
|
|
@@ -8865,7 +9041,7 @@ class SdTable {
|
|
|
8865
9041
|
this.currentPage = e.detail;
|
|
8866
9042
|
this.sdPageChange.emit(this.currentPage);
|
|
8867
9043
|
}
|
|
8868
|
-
} }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '
|
|
9044
|
+
} }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'ba48f26b761cd65c5f52f4b4734be6c2a55120f1', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
|
|
8869
9045
|
const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
|
|
8870
9046
|
if (!this.useInternalPagination) {
|
|
8871
9047
|
this.sdRowsPerPageChange.emit(changedRowsPerPage);
|
|
@@ -8889,6 +9065,7 @@ class SdTable {
|
|
|
8889
9065
|
}
|
|
8890
9066
|
static get watchers() { return {
|
|
8891
9067
|
"columns": ["handleColumnsChange"],
|
|
9068
|
+
"columnWidths": ["handleColumnWidthsChange"],
|
|
8892
9069
|
"rows": ["handleRowsChange"],
|
|
8893
9070
|
"selected": ["handleSelectedChange"],
|
|
8894
9071
|
"pagination": ["handlePaginationChange"]
|
|
@@ -8911,13 +9088,15 @@ class SdTable {
|
|
|
8911
9088
|
"noDataLabel": [1, "no-data-label"],
|
|
8912
9089
|
"isLoading": [4, "is-loading"],
|
|
8913
9090
|
"pagination": [16],
|
|
9091
|
+
"headerCellRenderer": [16],
|
|
8914
9092
|
"bodyCellRenderer": [16],
|
|
8915
9093
|
"useInternalPagination": [4, "use-internal-pagination"],
|
|
8916
9094
|
"useRowsPerPageSelect": [4, "use-rows-per-page-select"],
|
|
8917
9095
|
"rowsPerPageOption": [16],
|
|
8918
|
-
"useVirtualScroll": [
|
|
9096
|
+
"useVirtualScroll": [16],
|
|
8919
9097
|
"virtualRowHeight": [2, "virtual-row-height"],
|
|
8920
|
-
"
|
|
9098
|
+
"virtualColumnWidth": [2, "virtual-column-width"],
|
|
9099
|
+
"virtualBufferSize": [16],
|
|
8921
9100
|
"currentPage": [32],
|
|
8922
9101
|
"innerRows": [32],
|
|
8923
9102
|
"innerSelected": [32],
|
|
@@ -8926,7 +9105,10 @@ class SdTable {
|
|
|
8926
9105
|
"scrolledRight": [32],
|
|
8927
9106
|
"virtualStartIndex": [32],
|
|
8928
9107
|
"virtualEndIndex": [32],
|
|
8929
|
-
"scrollTopPosition": [32]
|
|
9108
|
+
"scrollTopPosition": [32],
|
|
9109
|
+
"virtualStartColIdx": [32],
|
|
9110
|
+
"virtualEndColIdx": [32],
|
|
9111
|
+
"scrollLeftPosition": [32]
|
|
8930
9112
|
},
|
|
8931
9113
|
"$listeners$": undefined,
|
|
8932
9114
|
"$lazyBundleId$": "-",
|