@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
|
@@ -11,7 +11,7 @@ import { d as defineCustomElement$4 } from './p-B8oxPRZn.js';
|
|
|
11
11
|
import { d as defineCustomElement$3 } from './p-D6gAAImx.js';
|
|
12
12
|
import { d as defineCustomElement$2 } from './p-CAOUURqh.js';
|
|
13
13
|
|
|
14
|
-
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
|
|
14
|
+
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}}";
|
|
15
15
|
|
|
16
16
|
const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
17
17
|
constructor(registerHost) {
|
|
@@ -37,6 +37,7 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
37
37
|
noDataLabel = '데이터가 없습니다.';
|
|
38
38
|
isLoading = false;
|
|
39
39
|
pagination;
|
|
40
|
+
headerCellRenderer;
|
|
40
41
|
bodyCellRenderer;
|
|
41
42
|
useInternalPagination = false;
|
|
42
43
|
useRowsPerPageSelect = false;
|
|
@@ -46,9 +47,15 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
46
47
|
{ label: '50개씩 보기', value: 50 },
|
|
47
48
|
{ label: '100개씩 보기', value: 100 },
|
|
48
49
|
];
|
|
49
|
-
useVirtualScroll =
|
|
50
|
-
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
|
|
51
|
-
|
|
50
|
+
useVirtualScroll = {}; // 가상 스크롤 사용 여부
|
|
51
|
+
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
|
|
52
|
+
// 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
|
|
53
|
+
// 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
|
|
54
|
+
virtualColumnWidth = 120;
|
|
55
|
+
virtualBufferSize = {
|
|
56
|
+
vertical: 5,
|
|
57
|
+
horizontal: 5,
|
|
58
|
+
}; // 가상 스크롤 위아래 버퍼 크기
|
|
52
59
|
sdSelectChange;
|
|
53
60
|
sdPageChange;
|
|
54
61
|
sdRowsPerPageChange;
|
|
@@ -58,17 +65,34 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
58
65
|
columnWidths = [];
|
|
59
66
|
scrolledLeft = false;
|
|
60
67
|
scrolledRight = false;
|
|
61
|
-
|
|
62
|
-
|
|
68
|
+
// 세로 가상 스크롤 상태값
|
|
69
|
+
virtualStartIndex = 0;
|
|
70
|
+
virtualEndIndex = 0;
|
|
63
71
|
scrollTopPosition = 0;
|
|
72
|
+
// 가로 가상 스크롤 상태값
|
|
73
|
+
virtualStartColIdx = 0;
|
|
74
|
+
virtualEndColIdx = 0;
|
|
75
|
+
scrollLeftPosition = 0;
|
|
64
76
|
scrollRequestAnimationFrame = null;
|
|
65
77
|
scrollContainer = null;
|
|
66
78
|
handleColumnsChange(newCols) {
|
|
67
79
|
this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
|
|
80
|
+
if (this.useVirtualScroll.horizontal) {
|
|
81
|
+
requestAnimationFrame(() => {
|
|
82
|
+
this.calculateVisibleColumnRange();
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
handleColumnWidthsChange() {
|
|
87
|
+
if (this.useVirtualScroll.horizontal) {
|
|
88
|
+
requestAnimationFrame(() => {
|
|
89
|
+
this.calculateVisibleColumnRange();
|
|
90
|
+
});
|
|
91
|
+
}
|
|
68
92
|
}
|
|
69
93
|
handleRowsChange(newRows) {
|
|
70
94
|
this.innerRows = [...newRows];
|
|
71
|
-
if (this.useVirtualScroll) {
|
|
95
|
+
if (this.useVirtualScroll.vertical) {
|
|
72
96
|
requestAnimationFrame(() => {
|
|
73
97
|
this.calculateVisibleRange();
|
|
74
98
|
});
|
|
@@ -80,7 +104,7 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
80
104
|
handlePaginationChange(newVal) {
|
|
81
105
|
if (newVal?.page && newVal.page !== this.currentPage) {
|
|
82
106
|
this.currentPage = newVal.page;
|
|
83
|
-
if (this.useVirtualScroll && this.scrollContainer) {
|
|
107
|
+
if (this.useVirtualScroll.vertical && this.scrollContainer) {
|
|
84
108
|
this.scrollContainer.scrollTop = 0;
|
|
85
109
|
this.scrollTopPosition = 0;
|
|
86
110
|
this.calculateVisibleRange();
|
|
@@ -107,13 +131,21 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
107
131
|
const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
|
|
108
132
|
this.scrolledLeft = scrollLeft > 0;
|
|
109
133
|
this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
|
|
110
|
-
if (this.useVirtualScroll) {
|
|
134
|
+
if (this.useVirtualScroll.vertical || this.useVirtualScroll.horizontal) {
|
|
111
135
|
if (this.scrollRequestAnimationFrame !== null) {
|
|
112
136
|
cancelAnimationFrame(this.scrollRequestAnimationFrame);
|
|
113
137
|
}
|
|
114
138
|
this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
|
|
115
|
-
|
|
116
|
-
this.
|
|
139
|
+
// 세로 가상 스크롤 계산
|
|
140
|
+
if (this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop) {
|
|
141
|
+
this.scrollTopPosition = scrollTop;
|
|
142
|
+
this.calculateVisibleRange();
|
|
143
|
+
}
|
|
144
|
+
// 가로 가상 스크롤 계산
|
|
145
|
+
if (this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft) {
|
|
146
|
+
this.scrollLeftPosition = scrollLeft;
|
|
147
|
+
this.calculateVisibleColumnRange();
|
|
148
|
+
}
|
|
117
149
|
this.scrollRequestAnimationFrame = null;
|
|
118
150
|
});
|
|
119
151
|
}
|
|
@@ -138,7 +170,7 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
138
170
|
return result;
|
|
139
171
|
}
|
|
140
172
|
get virtualRows() {
|
|
141
|
-
if (!this.useVirtualScroll) {
|
|
173
|
+
if (!this.useVirtualScroll.vertical) {
|
|
142
174
|
return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
|
|
143
175
|
}
|
|
144
176
|
return this.paginatedRows
|
|
@@ -149,18 +181,40 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
149
181
|
}));
|
|
150
182
|
}
|
|
151
183
|
get topSpacerHeight() {
|
|
152
|
-
if (!this.useVirtualScroll || this.virtualStartIndex === 0)
|
|
184
|
+
if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
|
|
153
185
|
return 0;
|
|
154
186
|
return this.virtualStartIndex * this.virtualRowHeight;
|
|
155
187
|
}
|
|
156
188
|
get bottomSpacerHeight() {
|
|
157
|
-
if (!this.useVirtualScroll)
|
|
189
|
+
if (!this.useVirtualScroll.vertical)
|
|
158
190
|
return 0;
|
|
159
191
|
const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
|
|
160
192
|
return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
|
|
161
193
|
}
|
|
194
|
+
getHorizontalSpacerWidth(position) {
|
|
195
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
196
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
197
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
198
|
+
const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
|
|
199
|
+
if (position === 'right' && remainingCols <= 0)
|
|
200
|
+
return 0;
|
|
201
|
+
const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
|
|
202
|
+
return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
|
|
203
|
+
}
|
|
204
|
+
get leftSpacerWidth() {
|
|
205
|
+
if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
|
|
206
|
+
return 0;
|
|
207
|
+
}
|
|
208
|
+
return this.getHorizontalSpacerWidth('left');
|
|
209
|
+
}
|
|
210
|
+
get rightSpacerWidth() {
|
|
211
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
212
|
+
return 0;
|
|
213
|
+
}
|
|
214
|
+
return this.getHorizontalSpacerWidth('right');
|
|
215
|
+
}
|
|
162
216
|
get totalVirtualHeight() {
|
|
163
|
-
if (!this.useVirtualScroll)
|
|
217
|
+
if (!this.useVirtualScroll.vertical)
|
|
164
218
|
return 0;
|
|
165
219
|
return this.paginatedRows.length * this.virtualRowHeight;
|
|
166
220
|
}
|
|
@@ -219,8 +273,9 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
219
273
|
return true; // 전부 선택됨
|
|
220
274
|
return null; // 일부만 선택됨
|
|
221
275
|
}
|
|
276
|
+
// 세로 가상 스크롤 렌더링 계산
|
|
222
277
|
calculateVisibleRange() {
|
|
223
|
-
if (!this.useVirtualScroll) {
|
|
278
|
+
if (!this.useVirtualScroll.vertical) {
|
|
224
279
|
this.virtualStartIndex = 0;
|
|
225
280
|
this.virtualEndIndex = this.paginatedRows.length - 1;
|
|
226
281
|
return;
|
|
@@ -230,8 +285,60 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
230
285
|
const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
|
|
231
286
|
const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
|
|
232
287
|
const endIndex = startIndex + visibleCount;
|
|
233
|
-
|
|
234
|
-
this.
|
|
288
|
+
const bufferSize = this.virtualBufferSize.vertical || 5;
|
|
289
|
+
this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
|
|
290
|
+
this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
|
|
291
|
+
}
|
|
292
|
+
// 가로 가상 스크롤 렌더링 계산
|
|
293
|
+
calculateVisibleColumnRange() {
|
|
294
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
295
|
+
this.virtualStartColIdx = 0;
|
|
296
|
+
this.virtualEndColIdx = this.visibleColumns.length - 1;
|
|
297
|
+
return;
|
|
298
|
+
}
|
|
299
|
+
const scrollLeft = this.scrollLeftPosition;
|
|
300
|
+
const containerWidth = this.scrollContainer?.clientWidth || 0;
|
|
301
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
302
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
303
|
+
// 가상 스크롤 컬럼 - sticky column 제외
|
|
304
|
+
const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
305
|
+
if (virtualColumns.length === 0) {
|
|
306
|
+
this.virtualStartColIdx = 0;
|
|
307
|
+
this.virtualEndColIdx = 0;
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
|
|
311
|
+
(this.selectable ? 52 : 0);
|
|
312
|
+
const stickyRightWidth = this.columnWidths
|
|
313
|
+
.slice(this.visibleColumns.length - stickyRightCount)
|
|
314
|
+
.reduce((sum, width) => sum + width, 0);
|
|
315
|
+
// 가상 스크롤 영역의 너비 계산
|
|
316
|
+
const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
|
|
317
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
318
|
+
const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
|
|
319
|
+
const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
|
|
320
|
+
acc.push((acc[idx - 1] || 0) + width);
|
|
321
|
+
return acc;
|
|
322
|
+
}, []);
|
|
323
|
+
let startIdx = 0; // 가상 스크롤 시작 인덱스
|
|
324
|
+
let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
|
|
325
|
+
// sticky left 영역 제외한 스크롤 위치
|
|
326
|
+
for (let i = 0; i < reducedVirtualWidth.length; i++) {
|
|
327
|
+
if (reducedVirtualWidth[i] > virtualScrollLeft) {
|
|
328
|
+
startIdx = Math.max(0, i);
|
|
329
|
+
break;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
const scrollRight = virtualScrollLeft + virtualScrollableWidth;
|
|
333
|
+
for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
|
|
334
|
+
if (reducedVirtualWidth[i] >= scrollRight) {
|
|
335
|
+
endIdx = Math.min(virtualColumns.length - 1, i);
|
|
336
|
+
break;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
const bufferSize = this.virtualBufferSize.horizontal || 5;
|
|
340
|
+
this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
|
|
341
|
+
this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
|
|
235
342
|
}
|
|
236
343
|
// ----- Helpers -----
|
|
237
344
|
getStickyStyle(colIdx) {
|
|
@@ -274,34 +381,71 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
274
381
|
const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
275
382
|
return format ? format(value, row) : value;
|
|
276
383
|
}
|
|
384
|
+
getColumnRenderedInOrder() {
|
|
385
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
386
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
387
|
+
// Sticky left 컬럼들
|
|
388
|
+
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
389
|
+
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
390
|
+
const middleCols = this.useVirtualScroll.horizontal
|
|
391
|
+
? this.visibleColumns
|
|
392
|
+
.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
|
|
393
|
+
.slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
|
|
394
|
+
: this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
395
|
+
return {
|
|
396
|
+
stickyLeftCount,
|
|
397
|
+
stickyRightCount,
|
|
398
|
+
stickyLeftCols,
|
|
399
|
+
middleCols,
|
|
400
|
+
stickyRightCols,
|
|
401
|
+
};
|
|
402
|
+
}
|
|
277
403
|
// ----- Render -----
|
|
278
|
-
|
|
404
|
+
renderHead() {
|
|
405
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
279
406
|
return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
|
|
280
407
|
'sd-th': true,
|
|
281
408
|
'sd-th--selected': true,
|
|
282
409
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
283
410
|
}, style: {
|
|
284
411
|
'--sticky-left-offset': '0px',
|
|
285
|
-
} }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))),
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
412
|
+
} }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
|
|
413
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
414
|
+
return (h("th", { key: col.name, class: {
|
|
415
|
+
'sd-th': true,
|
|
416
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
417
|
+
'sticky-left': true,
|
|
418
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
419
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
|
|
420
|
+
}), this.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
|
|
421
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
422
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
423
|
+
return (h("th", { key: col.name, class: {
|
|
424
|
+
'sd-th': true,
|
|
425
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
426
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
427
|
+
}), this.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
|
|
428
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
429
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
430
|
+
return (h("th", { key: col.name, class: {
|
|
431
|
+
'sd-th': true,
|
|
432
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
433
|
+
'sticky-right': true,
|
|
434
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
435
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
436
|
+
}))));
|
|
294
437
|
}
|
|
295
438
|
renderBody() {
|
|
296
|
-
return (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 && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.useVirtualScroll && this.topSpacerHeight > 0 && (h("tr", { key: "virtual-top-spacer", style: {
|
|
439
|
+
return (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 && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && (h("tr", { key: "virtual-top-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
297
440
|
height: `${this.topSpacerHeight}px`,
|
|
298
|
-
}, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
|
|
299
|
-
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (h("tr", { key: "virtual-bottom-spacer", style: {
|
|
441
|
+
}, "aria-hidden": "true" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton" })))), this.paginatedRows.length > 0 &&
|
|
442
|
+
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical && this.bottomSpacerHeight > 0 && (h("tr", { key: "virtual-bottom-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
300
443
|
height: `${this.bottomSpacerHeight}px`,
|
|
301
|
-
}, "aria-hidden": "true" }))));
|
|
444
|
+
}, "aria-hidden": "true" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton" }))))));
|
|
302
445
|
}
|
|
303
446
|
renderRow(row, rowIdx) {
|
|
304
|
-
|
|
447
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
448
|
+
return (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
|
|
305
449
|
? {
|
|
306
450
|
height: `${this.virtualRowHeight}px`,
|
|
307
451
|
}
|
|
@@ -311,29 +455,61 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
311
455
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
312
456
|
}, style: {
|
|
313
457
|
'--sticky-left-offset': '0px',
|
|
314
|
-
} }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))),
|
|
458
|
+
} }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
|
|
459
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
460
|
+
return (h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
461
|
+
'sd-td': true,
|
|
462
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
463
|
+
'sticky-left': true,
|
|
464
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
465
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
466
|
+
}, style: this.getStickyStyle(idx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
467
|
+
}), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
|
|
468
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
469
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
470
|
+
return (h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
471
|
+
'sd-td': true,
|
|
472
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
473
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
474
|
+
}, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
475
|
+
}), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
|
|
476
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
315
477
|
const rendered = this.bodyCellRenderer?.(column, row);
|
|
316
478
|
return (h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
317
479
|
'sd-td': true,
|
|
318
480
|
[`sd-td--${column.align || 'left'}`]: true,
|
|
319
|
-
'sticky-
|
|
320
|
-
'sticky-right':
|
|
321
|
-
'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
|
|
322
|
-
'sticky-right-edge': Boolean(this.stickyColumn.right &&
|
|
323
|
-
colIdx === this.visibleColumns.length - this.stickyColumn.right),
|
|
481
|
+
'sticky-right': true,
|
|
482
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
324
483
|
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
325
|
-
}, style: this.getStickyStyle(
|
|
484
|
+
}, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
326
485
|
})));
|
|
327
486
|
}
|
|
487
|
+
renderSpacerTd(position, rowIdx) {
|
|
488
|
+
const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
|
|
489
|
+
const showSpacer = position === 'left'
|
|
490
|
+
? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
|
|
491
|
+
: this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
|
|
492
|
+
if (!showSpacer)
|
|
493
|
+
return null;
|
|
494
|
+
return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
|
|
495
|
+
width: `${spacerWidth}px`,
|
|
496
|
+
minWidth: `${spacerWidth}px`,
|
|
497
|
+
maxWidth: `${spacerWidth}px`,
|
|
498
|
+
padding: '0',
|
|
499
|
+
border: 'none',
|
|
500
|
+
}, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton" })));
|
|
501
|
+
}
|
|
328
502
|
render() {
|
|
329
|
-
return (h(Host, { key: '
|
|
503
|
+
return (h(Host, { key: '06caa893329f7de501804922dea824c01fc393bb' }, h("div", { key: '7b806f1fa25c60e11dd22cf67177c4856a576e76', class: "sd-table__wrapper", style: {
|
|
330
504
|
'--table-width': this.width,
|
|
331
505
|
'--table-height': this.height,
|
|
332
|
-
} }, h("div", { key: '
|
|
506
|
+
} }, h("div", { key: '6d24df1310c746fe7742dbeee3750d62bd286c25', class: "sd-table__container", style: {
|
|
507
|
+
'--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
|
|
508
|
+
} }, h("div", { key: 'de042c2e56baa207d1602b6d9cdcbe7d2c2780dd', class: {
|
|
333
509
|
'sd-table__middle': true,
|
|
334
510
|
'sd-table__middle--scrollable': this.paginatedRows.length > 0,
|
|
335
511
|
'sd-table__middle--loading': this.isLoading,
|
|
336
|
-
} }, h("table", { key: '
|
|
512
|
+
} }, h("table", { key: 'f392dbedf10677e704e0dd6fc1233dc931e2e017', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: '99fa9cff08bd0599a63a34caba645e9893ea963d', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '3e135dd33d5188abbe753b03c9a0c6c6f38210dc', class: "sd-table__no-data" }, h("slot", { key: '144d91b72af6ca2b966e7d3de783eb09f6880b20', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '0ce235dc30c09823f3bc37b47dfd4d1941d3dbd8', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e68be3464a8e8c6e99290e6ec3308d22c4238738', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
|
|
337
513
|
if (!this.useInternalPagination) {
|
|
338
514
|
this.sdPageChange.emit(e.detail);
|
|
339
515
|
}
|
|
@@ -341,7 +517,7 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
341
517
|
this.currentPage = e.detail;
|
|
342
518
|
this.sdPageChange.emit(this.currentPage);
|
|
343
519
|
}
|
|
344
|
-
} }), this.useRowsPerPageSelect && (h("sd-select", { key: '
|
|
520
|
+
} }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ba48f26b761cd65c5f52f4b4734be6c2a55120f1', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
|
|
345
521
|
const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
|
|
346
522
|
if (!this.useInternalPagination) {
|
|
347
523
|
this.sdRowsPerPageChange.emit(changedRowsPerPage);
|
|
@@ -365,6 +541,7 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
365
541
|
}
|
|
366
542
|
static get watchers() { return {
|
|
367
543
|
"columns": ["handleColumnsChange"],
|
|
544
|
+
"columnWidths": ["handleColumnWidthsChange"],
|
|
368
545
|
"rows": ["handleRowsChange"],
|
|
369
546
|
"selected": ["handleSelectedChange"],
|
|
370
547
|
"pagination": ["handlePaginationChange"]
|
|
@@ -384,13 +561,15 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
384
561
|
"noDataLabel": [1, "no-data-label"],
|
|
385
562
|
"isLoading": [4, "is-loading"],
|
|
386
563
|
"pagination": [16],
|
|
564
|
+
"headerCellRenderer": [16],
|
|
387
565
|
"bodyCellRenderer": [16],
|
|
388
566
|
"useInternalPagination": [4, "use-internal-pagination"],
|
|
389
567
|
"useRowsPerPageSelect": [4, "use-rows-per-page-select"],
|
|
390
568
|
"rowsPerPageOption": [16],
|
|
391
|
-
"useVirtualScroll": [
|
|
569
|
+
"useVirtualScroll": [16],
|
|
392
570
|
"virtualRowHeight": [2, "virtual-row-height"],
|
|
393
|
-
"
|
|
571
|
+
"virtualColumnWidth": [2, "virtual-column-width"],
|
|
572
|
+
"virtualBufferSize": [16],
|
|
394
573
|
"currentPage": [32],
|
|
395
574
|
"innerRows": [32],
|
|
396
575
|
"innerSelected": [32],
|
|
@@ -399,9 +578,13 @@ const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
|
|
|
399
578
|
"scrolledRight": [32],
|
|
400
579
|
"virtualStartIndex": [32],
|
|
401
580
|
"virtualEndIndex": [32],
|
|
402
|
-
"scrollTopPosition": [32]
|
|
581
|
+
"scrollTopPosition": [32],
|
|
582
|
+
"virtualStartColIdx": [32],
|
|
583
|
+
"virtualEndColIdx": [32],
|
|
584
|
+
"scrollLeftPosition": [32]
|
|
403
585
|
}, undefined, {
|
|
404
586
|
"columns": ["handleColumnsChange"],
|
|
587
|
+
"columnWidths": ["handleColumnWidthsChange"],
|
|
405
588
|
"rows": ["handleRowsChange"],
|
|
406
589
|
"selected": ["handleSelectedChange"],
|
|
407
590
|
"pagination": ["handlePaginationChange"]
|