@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.
Files changed (23) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. 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
  4. package/dist/cjs/sd-button_12.cjs.entry.js +221 -44
  5. package/dist/collection/components/sd-table-backup/sd-table-backup.css +27 -7
  6. package/dist/collection/components/sd-table-backup/sd-table-backup.js +278 -53
  7. package/dist/collection/components/sd-table-backup/sd-table-backup.js.map +1 -1
  8. package/dist/components/sd-table-backup.js +230 -47
  9. package/dist/components/sd-table-backup.js.map +1 -1
  10. package/dist/design-system/design-system.esm.js +1 -1
  11. package/dist/design-system/{p-36f24993.entry.js → p-423025fa.entry.js} +2 -2
  12. package/dist/design-system/p-423025fa.entry.js.map +1 -0
  13. 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
  14. package/dist/esm/design-system.js +1 -1
  15. package/dist/esm/loader.js +1 -1
  16. 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
  17. package/dist/esm/sd-button_12.entry.js +221 -44
  18. package/dist/types/components/sd-table-backup/sd-table-backup.d.ts +21 -3
  19. package/dist/types/components.d.ts +18 -8
  20. package/hydrate/index.js +229 -47
  21. package/hydrate/index.mjs +229 -47
  22. package/package.json +2 -2
  23. package/dist/design-system/p-36f24993.entry.js.map +0 -1
package/dist/esm/sd-button_12.entry.js CHANGED
@@ -2796,7 +2796,7 @@ const SdSelectOption = class {
2796
2796
  };
2797
2797
  SdSelectOption.style = sdSelectOptionCss;
2798
2798
 
2799
- 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%;height:100%;min-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%)}";
2799
+ 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}}";
2800
2800
 
2801
2801
  const SdTable = class {
2802
2802
  constructor(hostRef) {
@@ -2819,6 +2819,7 @@ const SdTable = class {
2819
2819
  noDataLabel = '데이터가 없습니다.';
2820
2820
  isLoading = false;
2821
2821
  pagination;
2822
+ headerCellRenderer;
2822
2823
  bodyCellRenderer;
2823
2824
  useInternalPagination = false;
2824
2825
  useRowsPerPageSelect = false;
@@ -2828,9 +2829,15 @@ const SdTable = class {
2828
2829
  { label: '50개씩 보기', value: 50 },
2829
2830
  { label: '100개씩 보기', value: 100 },
2830
2831
  ];
2831
- useVirtualScroll = false; // 가상 스크롤 사용 여부
2832
- virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
2833
- virtualBufferSize = 5; // 가상 스크롤 위아래 버퍼 크기
2832
+ useVirtualScroll = {}; // 가상 스크롤 사용 여부
2833
+ virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
2834
+ // 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
2835
+ // 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
2836
+ virtualColumnWidth = 120;
2837
+ virtualBufferSize = {
2838
+ vertical: 5,
2839
+ horizontal: 5,
2840
+ }; // 가상 스크롤 위아래 버퍼 크기
2834
2841
  sdSelectChange;
2835
2842
  sdPageChange;
2836
2843
  sdRowsPerPageChange;
@@ -2840,17 +2847,34 @@ const SdTable = class {
2840
2847
  columnWidths = [];
2841
2848
  scrolledLeft = false;
2842
2849
  scrolledRight = false;
2843
- virtualStartIndex = 0; // 렌더링 시작 인덱스
2844
- virtualEndIndex = 0; // 렌더링 종료 인덱스
2850
+ // 세로 가상 스크롤 상태값
2851
+ virtualStartIndex = 0;
2852
+ virtualEndIndex = 0;
2845
2853
  scrollTopPosition = 0;
2854
+ // 가로 가상 스크롤 상태값
2855
+ virtualStartColIdx = 0;
2856
+ virtualEndColIdx = 0;
2857
+ scrollLeftPosition = 0;
2846
2858
  scrollRequestAnimationFrame = null;
2847
2859
  scrollContainer = null;
2848
2860
  handleColumnsChange(newCols) {
2849
2861
  this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
2862
+ if (this.useVirtualScroll.horizontal) {
2863
+ requestAnimationFrame(() => {
2864
+ this.calculateVisibleColumnRange();
2865
+ });
2866
+ }
2867
+ }
2868
+ handleColumnWidthsChange() {
2869
+ if (this.useVirtualScroll.horizontal) {
2870
+ requestAnimationFrame(() => {
2871
+ this.calculateVisibleColumnRange();
2872
+ });
2873
+ }
2850
2874
  }
2851
2875
  handleRowsChange(newRows) {
2852
2876
  this.innerRows = [...newRows];
2853
- if (this.useVirtualScroll) {
2877
+ if (this.useVirtualScroll.vertical) {
2854
2878
  requestAnimationFrame(() => {
2855
2879
  this.calculateVisibleRange();
2856
2880
  });
@@ -2862,7 +2886,7 @@ const SdTable = class {
2862
2886
  handlePaginationChange(newVal) {
2863
2887
  if (newVal?.page && newVal.page !== this.currentPage) {
2864
2888
  this.currentPage = newVal.page;
2865
- if (this.useVirtualScroll && this.scrollContainer) {
2889
+ if (this.useVirtualScroll.vertical && this.scrollContainer) {
2866
2890
  this.scrollContainer.scrollTop = 0;
2867
2891
  this.scrollTopPosition = 0;
2868
2892
  this.calculateVisibleRange();
@@ -2889,13 +2913,21 @@ const SdTable = class {
2889
2913
  const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
2890
2914
  this.scrolledLeft = scrollLeft > 0;
2891
2915
  this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
2892
- if (this.useVirtualScroll) {
2916
+ if (this.useVirtualScroll.vertical || this.useVirtualScroll.horizontal) {
2893
2917
  if (this.scrollRequestAnimationFrame !== null) {
2894
2918
  cancelAnimationFrame(this.scrollRequestAnimationFrame);
2895
2919
  }
2896
2920
  this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
2897
- this.scrollTopPosition = scrollTop;
2898
- this.calculateVisibleRange();
2921
+ // 세로 가상 스크롤 계산
2922
+ if (this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop) {
2923
+ this.scrollTopPosition = scrollTop;
2924
+ this.calculateVisibleRange();
2925
+ }
2926
+ // 가로 가상 스크롤 계산
2927
+ if (this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft) {
2928
+ this.scrollLeftPosition = scrollLeft;
2929
+ this.calculateVisibleColumnRange();
2930
+ }
2899
2931
  this.scrollRequestAnimationFrame = null;
2900
2932
  });
2901
2933
  }
@@ -2920,7 +2952,7 @@ const SdTable = class {
2920
2952
  return result;
2921
2953
  }
2922
2954
  get virtualRows() {
2923
- if (!this.useVirtualScroll) {
2955
+ if (!this.useVirtualScroll.vertical) {
2924
2956
  return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
2925
2957
  }
2926
2958
  return this.paginatedRows
@@ -2931,18 +2963,40 @@ const SdTable = class {
2931
2963
  }));
2932
2964
  }
2933
2965
  get topSpacerHeight() {
2934
- if (!this.useVirtualScroll || this.virtualStartIndex === 0)
2966
+ if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
2935
2967
  return 0;
2936
2968
  return this.virtualStartIndex * this.virtualRowHeight;
2937
2969
  }
2938
2970
  get bottomSpacerHeight() {
2939
- if (!this.useVirtualScroll)
2971
+ if (!this.useVirtualScroll.vertical)
2940
2972
  return 0;
2941
2973
  const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
2942
2974
  return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
2943
2975
  }
2976
+ getHorizontalSpacerWidth(position) {
2977
+ const stickyLeftCount = this.stickyColumn.left || 0;
2978
+ const stickyRightCount = this.stickyColumn.right || 0;
2979
+ const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
2980
+ const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
2981
+ if (position === 'right' && remainingCols <= 0)
2982
+ return 0;
2983
+ const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
2984
+ return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
2985
+ }
2986
+ get leftSpacerWidth() {
2987
+ if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
2988
+ return 0;
2989
+ }
2990
+ return this.getHorizontalSpacerWidth('left');
2991
+ }
2992
+ get rightSpacerWidth() {
2993
+ if (!this.useVirtualScroll.horizontal) {
2994
+ return 0;
2995
+ }
2996
+ return this.getHorizontalSpacerWidth('right');
2997
+ }
2944
2998
  get totalVirtualHeight() {
2945
- if (!this.useVirtualScroll)
2999
+ if (!this.useVirtualScroll.vertical)
2946
3000
  return 0;
2947
3001
  return this.paginatedRows.length * this.virtualRowHeight;
2948
3002
  }
@@ -3001,8 +3055,9 @@ const SdTable = class {
3001
3055
  return true; // 전부 선택됨
3002
3056
  return null; // 일부만 선택됨
3003
3057
  }
3058
+ // 세로 가상 스크롤 렌더링 계산
3004
3059
  calculateVisibleRange() {
3005
- if (!this.useVirtualScroll) {
3060
+ if (!this.useVirtualScroll.vertical) {
3006
3061
  this.virtualStartIndex = 0;
3007
3062
  this.virtualEndIndex = this.paginatedRows.length - 1;
3008
3063
  return;
@@ -3012,8 +3067,60 @@ const SdTable = class {
3012
3067
  const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
3013
3068
  const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
3014
3069
  const endIndex = startIndex + visibleCount;
3015
- this.virtualStartIndex = Math.max(0, startIndex - this.virtualBufferSize);
3016
- this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + this.virtualBufferSize);
3070
+ const bufferSize = this.virtualBufferSize.vertical || 5;
3071
+ this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
3072
+ this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
3073
+ }
3074
+ // 가로 가상 스크롤 렌더링 계산
3075
+ calculateVisibleColumnRange() {
3076
+ if (!this.useVirtualScroll.horizontal) {
3077
+ this.virtualStartColIdx = 0;
3078
+ this.virtualEndColIdx = this.visibleColumns.length - 1;
3079
+ return;
3080
+ }
3081
+ const scrollLeft = this.scrollLeftPosition;
3082
+ const containerWidth = this.scrollContainer?.clientWidth || 0;
3083
+ const stickyLeftCount = this.stickyColumn.left || 0;
3084
+ const stickyRightCount = this.stickyColumn.right || 0;
3085
+ // 가상 스크롤 컬럼 - sticky column 제외
3086
+ const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
3087
+ if (virtualColumns.length === 0) {
3088
+ this.virtualStartColIdx = 0;
3089
+ this.virtualEndColIdx = 0;
3090
+ return;
3091
+ }
3092
+ const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
3093
+ (this.selectable ? 52 : 0);
3094
+ const stickyRightWidth = this.columnWidths
3095
+ .slice(this.visibleColumns.length - stickyRightCount)
3096
+ .reduce((sum, width) => sum + width, 0);
3097
+ // 가상 스크롤 영역의 너비 계산
3098
+ const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
3099
+ const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
3100
+ const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
3101
+ const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
3102
+ acc.push((acc[idx - 1] || 0) + width);
3103
+ return acc;
3104
+ }, []);
3105
+ let startIdx = 0; // 가상 스크롤 시작 인덱스
3106
+ let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
3107
+ // sticky left 영역 제외한 스크롤 위치
3108
+ for (let i = 0; i < reducedVirtualWidth.length; i++) {
3109
+ if (reducedVirtualWidth[i] > virtualScrollLeft) {
3110
+ startIdx = Math.max(0, i);
3111
+ break;
3112
+ }
3113
+ }
3114
+ const scrollRight = virtualScrollLeft + virtualScrollableWidth;
3115
+ for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
3116
+ if (reducedVirtualWidth[i] >= scrollRight) {
3117
+ endIdx = Math.min(virtualColumns.length - 1, i);
3118
+ break;
3119
+ }
3120
+ }
3121
+ const bufferSize = this.virtualBufferSize.horizontal || 5;
3122
+ this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
3123
+ this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
3017
3124
  }
3018
3125
  // ----- Helpers -----
3019
3126
  getStickyStyle(colIdx) {
@@ -3056,34 +3163,71 @@ const SdTable = class {
3056
3163
  const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
3057
3164
  return format ? format(value, row) : value;
3058
3165
  }
3166
+ getColumnRenderedInOrder() {
3167
+ const stickyLeftCount = this.stickyColumn.left || 0;
3168
+ const stickyRightCount = this.stickyColumn.right || 0;
3169
+ // Sticky left 컬럼들
3170
+ const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
3171
+ const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
3172
+ const middleCols = this.useVirtualScroll.horizontal
3173
+ ? this.visibleColumns
3174
+ .slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
3175
+ .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
3176
+ : this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
3177
+ return {
3178
+ stickyLeftCount,
3179
+ stickyRightCount,
3180
+ stickyLeftCols,
3181
+ middleCols,
3182
+ stickyRightCols,
3183
+ };
3184
+ }
3059
3185
  // ----- Render -----
3060
- renderHeader() {
3186
+ renderHead() {
3187
+ const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
3061
3188
  return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
3062
3189
  'sd-th': true,
3063
3190
  'sd-th--selected': true,
3064
3191
  'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
3065
3192
  }, style: {
3066
3193
  '--sticky-left-offset': '0px',
3067
- } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("th", { key: col.name, class: {
3068
- 'sd-th': true,
3069
- [`${col.thClass}`]: Boolean(col.thClass),
3070
- 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
3071
- 'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
3072
- 'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
3073
- 'sticky-right-edge': Boolean(this.stickyColumn.right &&
3074
- colIdx === this.visibleColumns.length - this.stickyColumn.right),
3075
- }, style: { ...col.thStyle, ...this.getStickyStyle(colIdx) } }, 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" }, 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(colIdx, evt) }))))))));
3194
+ } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
3195
+ const rendered = this.headerCellRenderer?.(col);
3196
+ return (h("th", { key: col.name, class: {
3197
+ 'sd-th': true,
3198
+ [`${col.thClass}`]: Boolean(col.thClass),
3199
+ 'sticky-left': true,
3200
+ 'sticky-left-edge': idx === stickyLeftCount - 1,
3201
+ }, 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) }))));
3202
+ }), this.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
3203
+ const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
3204
+ const rendered = this.headerCellRenderer?.(col);
3205
+ return (h("th", { key: col.name, class: {
3206
+ 'sd-th': true,
3207
+ [`${col.thClass}`]: Boolean(col.thClass),
3208
+ }, 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) }))));
3209
+ }), this.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
3210
+ const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
3211
+ const rendered = this.headerCellRenderer?.(col);
3212
+ return (h("th", { key: col.name, class: {
3213
+ 'sd-th': true,
3214
+ [`${col.thClass}`]: Boolean(col.thClass),
3215
+ 'sticky-right': true,
3216
+ 'sticky-right-edge': relativeIdx === 0,
3217
+ }, 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) }))));
3218
+ }))));
3076
3219
  }
3077
3220
  renderBody() {
3078
- 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: {
3221
+ 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: {
3079
3222
  height: `${this.topSpacerHeight}px`,
3080
- }, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
3081
- this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (h("tr", { key: "virtual-bottom-spacer", style: {
3223
+ }, "aria-hidden": "true" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton" })))), this.paginatedRows.length > 0 &&
3224
+ 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: {
3082
3225
  height: `${this.bottomSpacerHeight}px`,
3083
- }, "aria-hidden": "true" }))));
3226
+ }, "aria-hidden": "true" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton" }))))));
3084
3227
  }
3085
3228
  renderRow(row, rowIdx) {
3086
- return (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll
3229
+ const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
3230
+ return (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
3087
3231
  ? {
3088
3232
  height: `${this.virtualRowHeight}px`,
3089
3233
  }
@@ -3093,29 +3237,61 @@ const SdTable = class {
3093
3237
  'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
3094
3238
  }, style: {
3095
3239
  '--sticky-left-offset': '0px',
3096
- } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
3240
+ } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
3097
3241
  const rendered = this.bodyCellRenderer?.(column, row);
3098
3242
  return (h("td", { key: column.name, part: `td-${column.name}`, class: {
3099
3243
  'sd-td': true,
3100
3244
  [`sd-td--${column.align || 'left'}`]: true,
3101
- 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
3102
- 'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
3103
- 'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
3104
- 'sticky-right-edge': Boolean(this.stickyColumn.right &&
3105
- colIdx === this.visibleColumns.length - this.stickyColumn.right),
3245
+ 'sticky-left': true,
3246
+ 'sticky-left-edge': idx === stickyLeftCount - 1,
3106
3247
  [`${column.tdClass}`]: Boolean(column.tdClass),
3107
- }, style: this.getStickyStyle(colIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
3248
+ }, 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)))));
3249
+ }), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
3250
+ const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
3251
+ const rendered = this.bodyCellRenderer?.(column, row);
3252
+ return (h("td", { key: column.name, part: `td-${column.name}`, class: {
3253
+ 'sd-td': true,
3254
+ [`sd-td--${column.align || 'left'}`]: true,
3255
+ [`${column.tdClass}`]: Boolean(column.tdClass),
3256
+ }, 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)))));
3257
+ }), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
3258
+ const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
3259
+ const rendered = this.bodyCellRenderer?.(column, row);
3260
+ return (h("td", { key: column.name, part: `td-${column.name}`, class: {
3261
+ 'sd-td': true,
3262
+ [`sd-td--${column.align || 'left'}`]: true,
3263
+ 'sticky-right': true,
3264
+ 'sticky-right-edge': relativeIdx === 0,
3265
+ [`${column.tdClass}`]: Boolean(column.tdClass),
3266
+ }, 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)))));
3108
3267
  })));
3109
3268
  }
3269
+ renderSpacerTd(position, rowIdx) {
3270
+ const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
3271
+ const showSpacer = position === 'left'
3272
+ ? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
3273
+ : this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
3274
+ if (!showSpacer)
3275
+ return null;
3276
+ return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
3277
+ width: `${spacerWidth}px`,
3278
+ minWidth: `${spacerWidth}px`,
3279
+ maxWidth: `${spacerWidth}px`,
3280
+ padding: '0',
3281
+ border: 'none',
3282
+ }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton" })));
3283
+ }
3110
3284
  render() {
3111
- return (h(Host, { key: 'd197993fd67107e7a7d310cdc2f3c58a1edf988f' }, h("div", { key: '8176782d6413f05b8b088a35942c31c37584ea0d', class: "sd-table__wrapper", style: {
3285
+ return (h(Host, { key: '06caa893329f7de501804922dea824c01fc393bb' }, h("div", { key: '7b806f1fa25c60e11dd22cf67177c4856a576e76', class: "sd-table__wrapper", style: {
3112
3286
  '--table-width': this.width,
3113
3287
  '--table-height': this.height,
3114
- } }, h("div", { key: '9b158db9adedb593ecc1b6f024d237575a30be83', class: "sd-table__container" }, h("div", { key: '2152375a11adfde7ab0f5209bf86fde80b245ca7', class: {
3288
+ } }, h("div", { key: '6d24df1310c746fe7742dbeee3750d62bd286c25', class: "sd-table__container", style: {
3289
+ '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
3290
+ } }, h("div", { key: 'de042c2e56baa207d1602b6d9cdcbe7d2c2780dd', class: {
3115
3291
  'sd-table__middle': true,
3116
3292
  'sd-table__middle--scrollable': this.paginatedRows.length > 0,
3117
3293
  'sd-table__middle--loading': this.isLoading,
3118
- } }, h("table", { key: '024cffa35522fd73f53a873aef9679bcd53705ba', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '05c66542866f68d96af6dd530f051e5054d5b6a0', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '09ed3481961c68427b85e5e973b1a94c30188af6', class: "sd-table__no-data" }, h("slot", { key: 'e754ed759750cfc3ac61c3b59ccc897cb263ea1b', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '390141abc35cd0bbc4c261943084e9f5ccd27c78', class: "sd-table__pagination" }, h("sd-pagination", { key: 'fa55c8ed7fc1cc811231fa4266e0021f8b03fc51', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
3294
+ } }, 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) => {
3119
3295
  if (!this.useInternalPagination) {
3120
3296
  this.sdPageChange.emit(e.detail);
3121
3297
  }
@@ -3123,7 +3299,7 @@ const SdTable = class {
3123
3299
  this.currentPage = e.detail;
3124
3300
  this.sdPageChange.emit(this.currentPage);
3125
3301
  }
3126
- } }), this.useRowsPerPageSelect && (h("sd-select", { key: 'c2463db21492100f4f78b87cac9fe62bcfaca9a2', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
3302
+ } }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ba48f26b761cd65c5f52f4b4734be6c2a55120f1', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
3127
3303
  const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
3128
3304
  if (!this.useInternalPagination) {
3129
3305
  this.sdRowsPerPageChange.emit(changedRowsPerPage);
@@ -3147,6 +3323,7 @@ const SdTable = class {
3147
3323
  }
3148
3324
  static get watchers() { return {
3149
3325
  "columns": ["handleColumnsChange"],
3326
+ "columnWidths": ["handleColumnWidthsChange"],
3150
3327
  "rows": ["handleRowsChange"],
3151
3328
  "selected": ["handleSelectedChange"],
3152
3329
  "pagination": ["handlePaginationChange"]
package/dist/types/components/sd-table-backup/sd-table-backup.d.ts CHANGED
@@ -43,13 +43,21 @@ export declare class SdTable {
43
43
  rowsPerPage: number;
44
44
  lastPage?: number;
45
45
  };
46
+ headerCellRenderer?: (column: SdTableColumn) => HTMLElement | string | null | undefined;
46
47
  bodyCellRenderer?: (column: SdTableColumn, row: Row) => HTMLElement | string | null | undefined;
47
48
  useInternalPagination: boolean;
48
49
  useRowsPerPageSelect: boolean;
49
50
  rowsPerPageOption: SelectOption[];
50
- useVirtualScroll: boolean;
51
+ useVirtualScroll: {
52
+ vertical?: boolean;
53
+ horizontal?: boolean;
54
+ };
51
55
  virtualRowHeight: number;
52
- virtualBufferSize: number;
56
+ virtualColumnWidth: number;
57
+ virtualBufferSize: {
58
+ vertical?: number;
59
+ horizontal?: number;
60
+ };
53
61
  sdSelectChange: EventEmitter<Row[]>;
54
62
  sdPageChange: EventEmitter<number>;
55
63
  sdRowsPerPageChange: EventEmitter<number>;
@@ -62,9 +70,13 @@ export declare class SdTable {
62
70
  virtualStartIndex: number;
63
71
  virtualEndIndex: number;
64
72
  scrollTopPosition: number;
73
+ virtualStartColIdx: number;
74
+ virtualEndColIdx: number;
75
+ scrollLeftPosition: number;
65
76
  private scrollRequestAnimationFrame;
66
77
  private scrollContainer;
67
78
  handleColumnsChange(newCols: SdTableColumn[]): void;
79
+ handleColumnWidthsChange(): void;
68
80
  handleRowsChange(newRows: Row[]): void;
69
81
  handleSelectedChange(newSelected: Set<Row>): void;
70
82
  handlePaginationChange(newVal?: {
@@ -80,6 +92,9 @@ export declare class SdTable {
80
92
  private get virtualRows();
81
93
  private get topSpacerHeight();
82
94
  private get bottomSpacerHeight();
95
+ private getHorizontalSpacerWidth;
96
+ private get leftSpacerWidth();
97
+ private get rightSpacerWidth();
83
98
  private get totalVirtualHeight();
84
99
  private get lastPageNumber();
85
100
  private get sdTableClasses();
@@ -88,11 +103,14 @@ export declare class SdTable {
88
103
  private toggleSelectAll;
89
104
  private get isAllChecked();
90
105
  private calculateVisibleRange;
106
+ private calculateVisibleColumnRange;
91
107
  private getStickyStyle;
92
108
  private handleResize;
93
109
  private getCellValue;
94
- private renderHeader;
110
+ private getColumnRenderedInOrder;
111
+ private renderHead;
95
112
  private renderBody;
96
113
  private renderRow;
114
+ private renderSpacerTd;
97
115
  render(): any;
98
116
  }
package/dist/types/components.d.ts CHANGED
@@ -704,6 +704,7 @@ export namespace Components {
704
704
  row: Row1,
705
705
  ) => HTMLElement | string | null | undefined;
706
706
  "columns": SdTableColumn1[];
707
+ "headerCellRenderer"?: (column: SdTableColumn1) => HTMLElement | string | null | undefined;
707
708
  "height"?: string;
708
709
  /**
709
710
  * @default false
@@ -756,13 +757,17 @@ export namespace Components {
756
757
  */
757
758
  "useRowsPerPageSelect": boolean;
758
759
  /**
759
- * @default false
760
+ * @default {}
761
+ */
762
+ "useVirtualScroll": { vertical?: boolean; horizontal?: boolean };
763
+ /**
764
+ * @default { vertical: 5, horizontal: 5, }
760
765
  */
761
- "useVirtualScroll": boolean;
766
+ "virtualBufferSize": { vertical?: number; horizontal?: number };
762
767
  /**
763
- * @default 5
768
+ * @default 120
764
769
  */
765
- "virtualBufferSize": number;
770
+ "virtualColumnWidth": number;
766
771
  /**
767
772
  * @default 44
768
773
  */
@@ -2079,6 +2084,7 @@ declare namespace LocalJSX {
2079
2084
  row: Row1,
2080
2085
  ) => HTMLElement | string | null | undefined;
2081
2086
  "columns": SdTableColumn1[];
2087
+ "headerCellRenderer"?: (column: SdTableColumn1) => HTMLElement | string | null | undefined;
2082
2088
  "height"?: string;
2083
2089
  /**
2084
2090
  * @default false
@@ -2134,13 +2140,17 @@ declare namespace LocalJSX {
2134
2140
  */
2135
2141
  "useRowsPerPageSelect"?: boolean;
2136
2142
  /**
2137
- * @default false
2143
+ * @default {}
2144
+ */
2145
+ "useVirtualScroll"?: { vertical?: boolean; horizontal?: boolean };
2146
+ /**
2147
+ * @default { vertical: 5, horizontal: 5, }
2138
2148
  */
2139
- "useVirtualScroll"?: boolean;
2149
+ "virtualBufferSize"?: { vertical?: number; horizontal?: number };
2140
2150
  /**
2141
- * @default 5
2151
+ * @default 120
2142
2152
  */
2143
- "virtualBufferSize"?: number;
2153
+ "virtualColumnWidth"?: number;
2144
2154
  /**
2145
2155
  * @default 44
2146
2156
  */