@shoplflow/templates 0.2.46 → 0.2.47

package/dist/index.cjs

@@ -1,19 +1,22 @@
 'use strict';
 
 var base = require('@shoplflow/base');
-var React2 = require('react');
-var styled2 = require('@emotion/styled');
+var React3 = require('react');
+var styled3 = require('@emotion/styled');
 var shoplAssets = require('@shoplflow/shopl-assets');
 var jsxRuntime = require('react/jsx-runtime');
 var reactTable = require('@tanstack/react-table');
 var lodashEs = require('lodash-es');
-var reactVirtual = require('@tanstack/react-virtual');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
 var utils = require('@shoplflow/utils');
+var utilities = require('@dnd-kit/utilities');
+var reactVirtual = require('@tanstack/react-virtual');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
-var styled2__default = /*#__PURE__*/_interopDefault(styled2);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+var styled3__default = /*#__PURE__*/_interopDefault(styled3);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -46,6 +49,26 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 var getTypographyAndColor = (depth) => {
   switch (depth) {
     case 1:
@@ -57,16 +80,16 @@ var getTypographyAndColor = (depth) => {
       return { typography: "body1_700", color: "neutral500" };
   }
 };
-var StyledRequired = styled2__default.default.div`
+var StyledRequired = styled3__default.default.div`
   color: ${base.colorTokens.red300};
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
   padding-top: 1px;
 `;
-var TitleGroupContext = React2.createContext(null);
+var TitleGroupContext = React3.createContext(null);
 var useTitleGroupContext = () => {
-  const context = React2.useContext(TitleGroupContext);
+  const context = React3.useContext(TitleGroupContext);
   return context != null ? context : { depth: 1 };
 };
 var TitleGroupHelpIcon = ({
@@ -126,16 +149,47 @@ TitleGroup.Header = Header;
 TitleGroup.Actions = Actions;
 TitleGroup.Description = Description;
 exports.TitleGroup = TitleGroup;
-var TableContext = React2.createContext(void 0);
+var TableBtn = styled3__default.default.button`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  border: 1px solid ${base.colorTokens.neutral200};
+  border-radius: 4px;
+  padding: 4px;
+  background: ${base.colorTokens.neutral150};
+  color: ${base.colorTokens.neutral700};
+  cursor: ${({ onClick }) => onClick ? "pointer" : "default"};
+
+  &:hover {
+    background: ${({ disabled }) => disabled ? base.colorTokens.neutral150 : base.colorTokens.neutral200};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+exports.TableButton = (_a) => {
+  var _b = _a, { children, leftSource, rightSource } = _b, buttonProps = __objRest(_b, ["children", "leftSource", "rightSource"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(TableBtn, __spreadProps(__spreadValues({}, buttonProps), { children: [
+    leftSource && leftSource,
+    /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_500", lineClamp: 2, children }),
+    rightSource && rightSource
+  ] }));
+};
+exports.TableBadge = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer, { radius: "borderRadius04", background: "neutral150", padding: "2px 4px", children: /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", children }) });
+};
+var TableContext = React3.createContext(void 0);
 var useTable = () => {
-  const context = React2.useContext(TableContext);
+  const context = React3.useContext(TableContext);
   if (!context) {
     throw new Error("useTable must be used within a TableProvider");
   }
   return context;
 };
 var TableProvider = TableContext.Provider;
-var TableContainer = styled2__default.default.div`
+var TableContainer = styled3__default.default.div`
   border: ${({ hasToolbar }) => !hasToolbar && `1px solid ${base.colorTokens.neutral200}`};
   border-radius: 8px;
   background-color: ${base.colorTokens.neutral0};
@@ -169,134 +223,169 @@ var TableContainer = styled2__default.default.div`
     }
   }
 `;
-var TableHeader = styled2__default.default.thead`
-  color: ${base.colorTokens.neutral400};
+var TableHeader = styled3__default.default.thead`
   background-color: ${base.colorTokens.neutral100};
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
 
   tr {
     border-radius: 8px 8px 0 0;
   }
 
-  th {
-    position: relative;
-    padding: 8px;
-    height: 48px;
-    min-height: 48px;
+  th:last-of-type::after {
+    display: none;
+  }
+`;
+var TableRow = styled3__default.default.tr`
+  &.clickable[data-has-pinned='true']:hover td {
     background-color: ${base.colorTokens.neutral100};
-    vertical-align: middle;
-    // 일반 컬럼의 border를 가상 요소로 처리
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 100%;
-      width: 1px;
-      background-color: ${base.colorTokens.neutral200};
-      pointer-events: none;
-    }
+  }
 
-    // Fixed border for multi-column headers (colspan)
-    &[colspan] {
-      position: relative;
+  &.clickable:hover td {
+    background-color: ${base.colorTokens.neutral400_5};
+    cursor: pointer;
 
-      // Ensure the right border is visible for colspan cells
+    /* neutral400_5 컬럼의 경우 호버 시 neutral150 컬러 적용 */
+    &[data-has-custom-style='true'] {
+      position: relative;
       &::after {
         content: '';
         position: absolute;
         top: 0;
         right: 0;
-        height: 100%;
-        width: 1px;
-        background-color: ${base.colorTokens.neutral200};
-        pointer-events: none;
-        display: block;
-      }
-
-      // Add bottom border for spanning headers to make them visually distinct
-      &::before {
-        content: '';
-        position: absolute;
-        bottom: 0;
         left: 0;
+        bottom: 0;
+        height: 100%;
         width: 100%;
-        height: 1px;
-        background-color: ${base.colorTokens.neutral200};
+        background-color: ${base.colorTokens.neutral400_5};
         pointer-events: none;
       }
     }
+  }
+
+  &.clickable[data-has-pinned='true']:hover td[data-no-hover='true'] {
+    background-color: ${base.colorTokens.neutral100};
+  }
+
+  &:hover td[data-no-hover='true'] {
+    background-color: ${base.colorTokens.neutral400_5};
+  }
+`;
+var TableHead = styled3__default.default.th`
+  padding: ${({ sortable, filterable }) => sortable || filterable ? "4px" : "8px"};
+  height: 48px;
+  font-weight: ${base.fontWeightTokens.fontWeightRegular};
+  line-height: 16px;
+  font-size: 13px;
+  border-bottom: 1px solid ${base.colorTokens.neutral200};
+  border-right: 1px solid ${base.colorTokens.neutral200};
 
-    // fixed 컬럼의 border를 별도의 가상 요소로 처리
-    /* &[data-pinned='left']::before,
-    &[data-pinned='right']::before {
+  position: relative;
+  background-color: ${base.colorTokens.neutral100};
+  vertical-align: middle;
+  // 고정 컬럼의 border를 가상 요소로 처리하여 스크롤 시 고정되도록 함
+  // borderRight: 'none'이 설정된 경우 ::after를 표시하지 않음
+  &[data-pinned='left']:not([data-last-left-pinned='true']):not([data-no-border-right='true']) {
+    border-right: none;
+    &::after {
       content: '';
       position: absolute;
       top: 0;
+      right: 0;
       height: 100%;
       width: 1px;
       background-color: ${base.colorTokens.neutral200};
       pointer-events: none;
-      z-index: 5;
-    } */
+    }
+  }
+
+  // Fixed border for multi-column headers (colspan)
+  &[colspan] {
+    position: relative;
 
-    &[data-pinned='left']::before {
+    // Ensure the right border is visible for colspan cells
+    // *주석 처리한 이유: 가상 요소로 border를 처리하여 바디 셀에 있는 borderRight과 너비가 다름 (borderRight 스타일 새로 추가 및 last-left-pinned 스타일에는 borderRight 스타일 적용 X) 이슈티켓 SH-16534
+    /* &::after {
+      content: '';
+      position: absolute;
+      top: 0;
       right: 0;
-    }
+      height: 100%;
+      width: 1px;
+      background-color: ${base.colorTokens.neutral200};
+      pointer-events: none;
+      display: block;
+    } */
 
-    &[data-pinned='right']::before {
+    // Add bottom border for spanning headers to make them visually distinct
+    /* &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
       left: 0;
-    }
-    &:last-child {
-      border-right: none;
-    }
+      width: 100%;
+      height: 1px;
+      background-color: ${base.colorTokens.neutral200};
+      pointer-events: none;
+    } */
+  }
 
-    &[data-last-left-pinned='true'] {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: -4px; // border 바깥으로 이동
-        height: 100%;
-        width: 4px;
-        pointer-events: none;
-        z-index: 11;
-        background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
-      }
-    }
+  // fixed 컬럼의 border를 별도의 가상 요소로 처리
+  /* &[data-pinned='left']::before,
+  &[data-pinned='right']::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    background-color: ${base.colorTokens.neutral200};
+    pointer-events: none;
+    z-index: 5;
+  } */
 
-    &[data-first-right-pinned='true'] {
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -5px; // border 바깥으로 이동
-        height: 100%;
-        width: 4px;
-        pointer-events: none;
-        z-index: 11;
-        background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
-      }
-    }
+  &[data-pinned='left']::before {
+    right: 0;
   }
 
-  th:last-of-type::after {
-    display: none;
+  &[data-pinned='right']::before {
+    left: 0;
   }
-`;
-var TableRow = styled2__default.default.tr`
-  &.clickable:hover td {
-    background-color: ${base.colorTokens.neutral400_5};
-    cursor: pointer;
+  &:last-child {
+    border-right: none;
+
+    /* &[data-first-right-pinned='true'] {
+      border-bottom: 1px solid ${base.colorTokens.neutral200};
+    } */
   }
 
-  &:hover td[data-no-hover='true'] {
-    background-color: ${base.colorTokens.neutral400_5};
+  &[data-last-left-pinned='true'] {
+    /* //!고정 컬럼은 borderRight 스타일 적용 X */
+    border-right: none;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: -4px; // border 바깥으로 이동
+      height: 100%;
+      width: 4px;
+      pointer-events: none;
+      z-index: 11;
+      background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
+    }
   }
-`;
-var TableHead = styled2__default.default.th`
+
+  &[data-first-right-pinned='true'] {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -5px; // border 바깥으로 이동
+      height: 100%;
+      width: 4px;
+      pointer-events: none;
+      z-index: 11;
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
+    }
+  }
+
   .table-head[data-filter-open='true'] {
     background-color: black;
   }
@@ -304,7 +393,7 @@ var TableHead = styled2__default.default.th`
     color: ${base.colorTokens.neutral400};
   }
 `;
-var TableRootContainer = styled2__default.default.div`
+var TableRootContainer = styled3__default.default.div`
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
   border: ${({ hasFilterBar, hasToolbar }) => hasFilterBar && !hasToolbar && `1px solid ${base.colorTokens.neutral200}`};
@@ -314,9 +403,9 @@ var TableRootContainer = styled2__default.default.div`
     display: none; /* Chrome, Safari, Opera*/
   }
 `;
-var HeaderTableContainer = styled2__default.default.div`
+var HeaderTableContainer = styled3__default.default.div`
   width: 100%;
-  z-index: 15;
+  z-index: 12;
   position: ${({ isSticky }) => isSticky ? "sticky" : ""};
   top: ${({ stickyHeaderMarginTop }) => stickyHeaderMarginTop}px;
   overflow-x: hidden;
@@ -329,12 +418,12 @@ var HeaderTableContainer = styled2__default.default.div`
     display: none; /* Chrome, Safari, Opera*/
   }
 `;
-var BodyTableContainer = styled2__default.default.div`
+var BodyTableContainer = styled3__default.default.div`
   width: 100%;
   overflow-x: scroll;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
-  border-radius: ${({ hasPagination }) => hasPagination ? "0 0 8px 8px" : "0"};
+  border-radius: ${({ hasPagination, hasFooter }) => hasPagination || hasFooter ? "0" : "0 0 8px 8px"};
 
   opacity: ${({ isFetching }) => isFetching && 0.7};
   pointer-events: ${({ isFetching }) => isFetching && "none"};
@@ -342,7 +431,91 @@ var BodyTableContainer = styled2__default.default.div`
     display: none; /* Chrome, Safari, Opera*/
   }
 `;
-var TableCell = styled2__default.default.td`
+var FooterTableContainer = styled3__default.default.div`
+  width: 100%;
+  z-index: 11;
+  position: ${({ isSticky }) => isSticky ? "sticky" : ""};
+  bottom: 0;
+  overflow-x: hidden;
+  border-radius: ${({ hasPagination, hasHeader }) => {
+  if (hasPagination)
+    return "0";
+  if (hasHeader)
+    return "0 0 8px 8px";
+  return "0 0 8px 8px";
+}};
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera*/
+  }
+`;
+var TableFooter = styled3__default.default.tfoot`
+  color: ${base.colorTokens.neutral400};
+  ${base.typographyTokens.body2_400};
+  border-top: ${`1px solid ${base.colorTokens.neutral200}`};
+
+  tr {
+    border-radius: 0 0 8px 8px;
+  }
+
+  td:last-of-type::after {
+    display: none;
+  }
+`;
+var TableFoot = styled3__default.default.td`
+  padding: ${({ sortable, filterable }) => sortable || filterable ? "4px" : "8px"};
+  height: 48px;
+  min-height: 48px;
+  font-weight: ${base.fontWeightTokens.fontWeightRegular};
+  line-height: 16px;
+  font-size: 13px;
+
+  position: relative;
+  vertical-align: middle;
+
+  &[data-pinned='left']::before {
+    right: 0;
+  }
+
+  &[data-pinned='right']::before {
+    left: 0;
+  }
+  &:last-child {
+    border-right: none;
+  }
+
+  &[data-last-left-pinned='true'] {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: -4px; // border 바깥으로 이동
+      height: 100%;
+      width: 4px;
+      pointer-events: none;
+      z-index: 11;
+      background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
+    }
+  }
+
+  &[data-first-right-pinned='true'] {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -5px; // border 바깥으로 이동
+      height: 100%;
+      width: 4px;
+      pointer-events: none;
+      z-index: 11;
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
+    }
+  }
+`;
+var TableCell = styled3__default.default.td`
   position: relative;
   padding: 8px;
   vertical-align: middle;
@@ -380,7 +553,7 @@ var TableCell = styled2__default.default.td`
     }
   }
 `;
-var TableBody = styled2__default.default.tbody`
+var TableBody = styled3__default.default.tbody`
   color: ${base.colorTokens.neutral700};
   font-size: 14px;
   position: relative;
@@ -393,10 +566,6 @@ var TableBody = styled2__default.default.tbody`
       border-bottom: ${({ innerBorder }) => innerBorder != null ? innerBorder : "1px solid #eaeaea"};
     }
 
-    &:hover {
-      background-color: ${base.colorTokens.neutral100};
-    }
-
     // 데이터가 minRows 이하여서 빈칸을 채워준 경우 호버 액션, 커서 액션 모두 OFF
     &[data-empty='true'] {
       border: none; /* 테두리 제거 */
@@ -422,33 +591,36 @@ var TableBody = styled2__default.default.tbody`
     }
   }
 `;
-var PaginationWrapper = styled2__default.default.div`
+var PaginationWrapper = styled3__default.default.div`
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 56px;
+  height: ${({ sizeVar }) => sizeVar === "XS" ? "40px" : "56px"};
+  background-color: ${base.colorTokens.neutral0};
   border-top: ${`1px solid ${base.colorTokens.neutral200}`};
-
+  border-radius: ${({ isEndOfPage }) => isEndOfPage && "0 0 12px 12px"};
   .table-pagination {
     border-top: none;
   }
 `;
-var BottomContainer = styled2__default.default.div`
-  position: sticky;
+var BottomContainer = styled3__default.default.div`
+  position: ${({ disableStickyFooter }) => disableStickyFooter ? "relative" : "sticky"};
   width: 100%;
-  bottom: 0;
+  bottom: ${({ disableStickyFooter }) => disableStickyFooter ? "auto" : "0"};
   background-color: ${base.colorTokens.neutral0};
-  z-index: 11;
+  z-index: ${({ disableStickyFooter }) => disableStickyFooter ? 1 : 20};
+  ${({ disableStickyFooter }) => !disableStickyFooter ? "isolation: isolate;" : ""}
   border-radius: ${({ isEndOfPage }) => isEndOfPage && "0 0 12px 12px"};
-  border: ${({ hasFilterBar, hasToolbar }) => hasFilterBar && !hasToolbar && `1px solid ${base.colorTokens.neutral200}`};
+  border: ${({ hasFilterBar, hasToolbar, hideBorder }) => !hideBorder && hasFilterBar && !hasToolbar && `1px solid ${base.colorTokens.neutral200}`};
   border-top: none;
 `;
-var ScrollContainer = styled2__default.default.div`
+var ScrollContainer = styled3__default.default.div`
   height: 6px;
   position: absolute;
-  bottom: 50px;
+  //* JIRA SH-18674: 테이블 스크롤바 테이블 바디 내에 위치할 수 있도록 푸터 위로 올림. 없을 때는 푸터에 2px 여유
+  bottom: ${({ isPagination }) => isPagination ? "56px" : "2px"};
   width: 100%;
   z-index: 12;
   overflow-x: scroll;
@@ -463,45 +635,235 @@ var ScrollContainer = styled2__default.default.div`
     border-radius: 100px;
   }
 `;
-var TableResizer = styled2__default.default.div``;
-var EmptySource = styled2__default.default.div`
+var TableResizer = styled3__default.default.div``;
+styled3__default.default.div`
   width: 60px;
 `;
-var PaginationLeftSlot = styled2__default.default.div`
+var PaginationLeftSlot = styled3__default.default.div`
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
 `;
-var SmallIconButton = styled2__default.default(base.IconButton)`
-  svg {
-    width: 12px !important;
-    height: 12px !important;
+var PaginationSizeSelectorSlot = styled3__default.default.div`
+  [data-shoplflow='Dropdown-Content-Area'],
+  [data-shoplflow='Text'],
+  [data-shoplflow='Menu'] {
+    white-space: nowrap;
   }
 `;
-var TableToolbar = ({
-  children,
-  filterAccessor,
-  height = "56px",
-  padding = "12px 20px",
-  totalCount
-}) => {
-  const { table, filterValue, setFilterValue } = useTable();
-  const _totalCount = totalCount || table.getPrePaginationRowModel().rows.length;
-  const onSearch = (value) => {
-    var _a;
-    if (!filterAccessor) {
-      return null;
-    }
-    setFilterValue(value);
-    (_a = table.getColumn(filterAccessor)) == null ? void 0 : _a.setFilterValue(value);
+var TableFilterBar = React3.memo(
+  React3.forwardRef(({ onReset, onRemoveFilter }, ref) => {
+    const { table, setFilterValue, hasToolbar, outsideFilters } = useTable();
+    const filters = table.getState().columnFilters;
+    const prevFiltersRef = React3.useRef();
+    const allFilters = [
+      ...outsideFilters || [],
+      ...filters.filter((filter) => {
+        return !(outsideFilters == null ? void 0 : outsideFilters.some((outsideFilter) => outsideFilter.id === filter.id));
+      })
+    ];
+    const onSearch = (value) => {
+      setFilterValue(value);
+      table.resetColumnFilters();
+    };
+    const resetFilters = () => {
+      table.setColumnFilters([]);
+      onReset == null ? void 0 : onReset();
+      const resetColumnFilters = (columns) => {
+        columns.forEach((column) => {
+          var _a, _b;
+          if ((_b = (_a = column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.onFilterChange) {
+            column.columnDef.meta.onFilterChange("");
+          }
+          if (column.columns && column.columns.length > 0) {
+            resetColumnFilters(column.columns);
+          }
+        });
+      };
+      resetColumnFilters(table.getAllColumns());
+    };
+    React3.useImperativeHandle(ref, () => ({
+      resetFilters
+    }));
+    const handleRemoveFilter = (columnId, filterValue) => {
+      var _a, _b, _c;
+      const isOutsideFilter = outsideFilters == null ? void 0 : outsideFilters.some((f) => f.id === columnId && f.value === filterValue);
+      if (isOutsideFilter && onRemoveFilter) {
+        onRemoveFilter(columnId);
+      }
+      const column = table.getColumn(columnId);
+      const newFilters = table.getState().columnFilters.filter((filter) => filter.id !== columnId);
+      table.setColumnFilters(newFilters);
+      column == null ? void 0 : column.setFilterValue(void 0);
+      (_c = (_b = (_a = column == null ? void 0 : column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.onFilterChange) == null ? void 0 : _c.call(_b, "");
+    };
+    const getFilterLabel = (columnId, value) => {
+      var _a;
+      const outsideFilter = outsideFilters == null ? void 0 : outsideFilters.find((f) => f.id === columnId && f.value === value);
+      if (outsideFilter == null ? void 0 : outsideFilter.label) {
+        return outsideFilter.label;
+      }
+      const column = table.getColumn(columnId);
+      if (column && ((_a = column.columnDef.meta) == null ? void 0 : _a.filterOptions)) {
+        const filterOption = column.columnDef.meta.filterOptions.find((option) => option.value === value);
+        if (filterOption) {
+          return filterOption.label;
+        }
+      }
+      return value;
+    };
+    React3.useEffect(() => {
+      var _a;
+      const outsideFilterIds = [...new Set((_a = outsideFilters == null ? void 0 : outsideFilters.map((f) => f.id)) != null ? _a : [])];
+      const tableFilters = table.getState().columnFilters;
+      const validTableFilters = tableFilters.filter((f) => !outsideFilterIds.includes(f.id));
+      if (!lodashEs.isEqual(prevFiltersRef.current, validTableFilters)) {
+        prevFiltersRef.current = validTableFilters;
+        table.setColumnFilters(validTableFilters);
+      }
+      outsideFilterIds.forEach((columnId) => {
+        const column = table.getColumn(columnId);
+        if (column && column.getFilterValue() != null && column.getFilterValue() !== "") {
+          column.setFilterValue(void 0);
+        }
+      });
+    }, [outsideFilters, table]);
+    const _allFilters = allFilters.filter((filter) => filter.value !== "ALL");
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: _allFilters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      base.StackContainer.Horizontal,
+      {
+        width: "100%",
+        align: "center",
+        padding: hasToolbar ? "0px 16px 8px" : "0px 0px 8px 0px",
+        spacing: "spacing08",
+        "data-component": "table-filter-bar",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            base.IconButton,
+            {
+              sizeVar: "XS",
+              styleVar: "GHOST",
+              onClick: () => {
+                resetFilters();
+                if (filters) {
+                  onSearch("");
+                }
+              },
+              "data-component": "reset-button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.RefreshIcon, color: "neutral700" })
+            }
+          ),
+          allFilters.map((filter) => {
+            const filterValueString = filter.value;
+            const filterLabel = getFilterLabel(filter.id, filterValueString);
+            const truncatedLabel = filterLabel.length > 50 ? `${filterLabel.slice(0, 50)}...` : filterLabel;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              base.Tag,
+              {
+                sizeVar: "XS",
+                styleVar: "TINT",
+                color: "neutral600",
+                background: "neutral150",
+                radius: true,
+                rightSource: /* @__PURE__ */ jsxRuntime.jsx(
+                  base.Icon,
+                  {
+                    iconSource: shoplAssets.CloseSmallIcon,
+                    sizeVar: "XS",
+                    color: "neutral350",
+                    onClick: () => handleRemoveFilter(filter.id, filterValueString),
+                    style: { cursor: "pointer" },
+                    "data-component": "filter-tag-delete-button",
+                    role: "button"
+                  }
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "caption_400", color: "neutral600", lineClamp: 1, children: truncatedLabel })
+              },
+              `${filter.id}-${filterValueString}`
+            );
+          })
+        ]
+      }
+    ) });
+  })
+);
+var TableEmpty = ({ children, minHeight }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer, { width: "100%", minHeight, height: "max-content", align: "center", justify: "center", children });
+};
+
+// src/components/Table/utils/getColumnActiveHoverDataAttribute.ts
+function getColumnActiveHoverDataAttribute(activeHover, rowOriginal) {
+  if (activeHover === void 0)
+    return void 0;
+  const enabled = typeof activeHover === "function" ? activeHover(rowOriginal) : activeHover;
+  return enabled ? "true" : void 0;
+}
+
+// src/components/Table/utils/getTableHeadSortModel.ts
+function getTableHeadSortModel(header) {
+  var _a, _b;
+  const meta = header.column.columnDef.meta;
+  const hasChildColumns = ((_b = (_a = header.column.columns) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
+  if ((meta == null ? void 0 : meta.delegateSortToSingleLeaf) === true && hasChildColumns) {
+    const leafColumns = header.column.getLeafColumns();
+    if (leafColumns.length === 1) {
+      return {
+        showSortMenu: true,
+        sortColumn: leafColumns[0]
+      };
+    }
+  }
+  return {
+    showSortMenu: header.column.getCanSort(),
+    sortColumn: header.column
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, { width: "100%", height, align: "center", padding, justify: "space-between", children: children({
-    totalCount: _totalCount,
-    filterAccessor: filterAccessor != null ? filterAccessor : "",
-    onSearch,
-    filterValue
-  }) });
+}
+
+// src/components/Table/utils/resolveBodyRowStyle.ts
+var DEFAULT_TABLE_BODY_ROW_HEIGHT_PX = 60;
+var parseCssSizeToPx = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value !== "string") {
+    return void 0;
+  }
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed)) {
+    return void 0;
+  }
+  return parsed;
+};
+var resolveBodyRowCss = (bodyRowStyle, rowIndex, row) => {
+  if (typeof bodyRowStyle === "function") {
+    if (rowIndex === void 0) {
+      return void 0;
+    }
+    return bodyRowStyle(rowIndex, row);
+  }
+  return bodyRowStyle;
+};
+var resolveHeightPx = (style) => {
+  const fromHeight = parseCssSizeToPx(style.height);
+  if (fromHeight !== void 0) {
+    return fromHeight;
+  }
+  const fromMinHeight = parseCssSizeToPx(style.minHeight);
+  if (fromMinHeight !== void 0) {
+    return fromMinHeight;
+  }
+  return DEFAULT_TABLE_BODY_ROW_HEIGHT_PX;
+};
+var resolveBodyRowStyle = (bodyRowStyle, rowIndex, row) => {
+  if (!bodyRowStyle) {
+    return { heightPx: DEFAULT_TABLE_BODY_ROW_HEIGHT_PX };
+  }
+  const style = resolveBodyRowCss(bodyRowStyle, rowIndex, row);
+  if (!style) {
+    return { heightPx: DEFAULT_TABLE_BODY_ROW_HEIGHT_PX };
+  }
+  return { style, heightPx: resolveHeightPx(style) };
 };
 
 // src/components/Table/utils/index.ts
@@ -522,597 +884,439 @@ var PAGE_SIZE = [
   { key: "50", label: "50" },
   { key: "100", label: "100" }
 ];
-var useIntersectionObserver = (target, callback, options) => {
-  React2.useEffect(() => {
-    if (!target.current) {
-      return;
-    }
-    const observer = new IntersectionObserver(callback, options);
-    observer.observe(target.current);
-    return () => observer.disconnect();
-  }, [callback]);
-};
-var TablePagination = ({
-  total,
-  defaultPageSize,
-  children,
-  pageSizeList = PAGE_SIZE,
-  setCurrentPage,
-  notSizeOption = false,
-  currentPage,
-  sizeVar = "S"
-}) => {
-  const { table, headerRef, bodyRef, tableScrollRef, footerRef, hasFilterBar, hasToolbar } = useTable();
-  const { pageSize, pageIndex } = table.getState().pagination;
-  const [isEndOfPage, setIsEndOfPage] = React2.useState(false);
-  const handleScroll = React2.useCallback(() => {
-    if (!headerRef.current || !bodyRef.current || !tableScrollRef.current) {
-      return;
+var FilterMenu = ({ header, onFilterChange, triggerWidth }) => {
+  var _a;
+  const { outsideFilters } = useTable();
+  const columnFilterValue = header.column.getFilterValue();
+  const meta = (_a = header.column.columnDef.meta) != null ? _a : {};
+  const { filterOptions, filterMenuWidth = "trigger" } = meta;
+  const [maxLabelWidth, setMaxLabelWidth] = React3.useState(0);
+  const measureRefs = React3.useRef([]);
+  const outsideFilterValues = outsideFilters == null ? void 0 : outsideFilters.filter((filter) => filter.id === header.column.id).map((filter) => filter.value);
+  const activeFilterValues = outsideFilterValues && outsideFilterValues.length > 0 ? outsideFilterValues : columnFilterValue != null && columnFilterValue !== "" ? [String(columnFilterValue)] : [];
+  React3.useEffect(() => {
+    var _a2;
+    const count = (_a2 = filterOptions == null ? void 0 : filterOptions.length) != null ? _a2 : 0;
+    const widths = measureRefs.current.slice(0, count).map((ref) => {
+      var _a3;
+      return (_a3 = ref == null ? void 0 : ref.offsetWidth) != null ? _a3 : 0;
+    });
+    setMaxLabelWidth(widths.length ? Math.max(...widths, 0) : 0);
+  }, [filterOptions]);
+  const handleFilterChange = (value) => {
+    const isCurrentlySelected = activeFilterValues.includes(value);
+    if (isCurrentlySelected) {
+      header.column.setFilterValue("");
+      if (onFilterChange) {
+        onFilterChange("");
+      }
+    } else {
+      header.column.setFilterValue(value);
+      if (onFilterChange) {
+        onFilterChange(value);
+      }
     }
-    const scrollLeft = tableScrollRef.current.scrollLeft;
-    headerRef.current.scrollLeft = scrollLeft;
-    bodyRef.current.scrollLeft = scrollLeft;
-  }, []);
-  const onIntersect = React2.useCallback(
-    (entries) => {
-      const entry = entries[0];
-      entry.isIntersecting ? setIsEndOfPage(true) : setIsEndOfPage(false);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isEndOfPage]
-  );
-  useIntersectionObserver(footerRef, onIntersect, {
-    threshold: 1,
-    rootMargin: "0px 0px -1px"
-  });
-  const handlePageChange = React2.useCallback(
-    (updater) => {
-      const newPage = typeof updater === "function" ? updater(pageIndex) : updater;
-      table.setPageIndex(newPage);
-      setCurrentPage == null ? void 0 : setCurrentPage({ pageIndex: newPage, pageSize });
-    },
-    [pageIndex, pageSize, table, setCurrentPage]
-  );
-  const handlePageSizeChange = React2.useCallback(
-    (value) => {
-      const newSize = Number(value);
-      table.setPageSize(newSize);
-      table.setPageIndex(0);
-      setCurrentPage == null ? void 0 : setCurrentPage({ pageIndex: 0, pageSize: newSize });
-    },
-    [table, setCurrentPage]
-  );
-  const TableColumns = () => /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: table.getAllColumns().map((column) => {
-    const size = column.columnDef.size;
-    const minSize = column.columnDef.minSize;
-    const maxSize = column.columnDef.maxSize;
-    const style = size === 0 ? { width: "100%" } : {
-      width: `${size}px`,
-      minWidth: `${minSize}px`,
-      maxWidth: `${maxSize}px`
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("col", { style }, column.id);
-  }) });
-  React2.useEffect(() => {
-    table.setPageSize(defaultPageSize);
-  }, [defaultPageSize, table]);
-  React2.useEffect(() => {
-    table.setPageIndex(currentPage != null ? currentPage : 0);
-  }, [table, currentPage]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(BottomContainer, { ref: footerRef, isEndOfPage, hasFilterBar, hasToolbar, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer, { ref: tableScrollRef, onScroll: handleScroll, children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: table.getTotalSize() || "100%", height: "6px", tableLayout: "fixed" }, children: /* @__PURE__ */ jsxRuntime.jsx(TableColumns, {}) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PaginationLeftSlot, { children }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        base.Pagination,
-        {
-          pageSize: `${pageSize}`,
-          currentPage: pageIndex,
-          itemsTotalCount: total,
-          totalCount: Math.ceil(total / Number(pageSize)),
-          previousPage: () => handlePageChange(pageIndex - 1),
-          nextPage: () => handlePageChange(pageIndex + 1),
-          sizeVar,
-          style: { paddingInline: "16px" },
-          gotoPage: handlePageChange,
-          rightSource: notSizeOption ? /* @__PURE__ */ jsxRuntime.jsx(EmptySource, {}) : /* @__PURE__ */ jsxRuntime.jsx(
-            base.Pagination.SizeSelector,
-            {
-              data: pageSizeList.map((item) => ({ label: item.label, value: item.key })),
-              pageSize: `${pageSize}`,
-              setPageSize: handlePageSizeChange
-            }
-          )
+  };
+  if (!header.column.getCanFilter()) {
+    return null;
+  }
+  const menuWidth = filterMenuWidth === "auto" && maxLabelWidth > triggerWidth ? "100%" : `${triggerWidth}px`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: "-9999px",
+          top: 0,
+          visibility: "hidden",
+          pointerEvents: "none",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start"
         },
-        Math.ceil(total / Number(pageSize))
-      )
-    ] })
+        children: filterOptions == null ? void 0 : filterOptions.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          base.Text,
+          {
+            typography: "body1_400",
+            ref: (el) => measureRefs.current[idx] = el,
+            style: { whiteSpace: "nowrap" },
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      base.StackContainer.Vertical,
+      {
+        padding: "4px",
+        radius: "borderRadius04",
+        background: "neutral0",
+        width: menuWidth,
+        style: { boxShadow: "0px 8px 16px 0px rgba(0, 0, 0, 0.12)" },
+        onWheel: (e) => e.stopPropagation(),
+        onScroll: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(base.ScrollArea, { autoHeight: true, autoHeightMax: 240, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: filterOptions == null ? void 0 : filterOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          base.Menu,
+          {
+            isSelected: activeFilterValues.includes(option.value),
+            onClick: () => handleFilterChange(option.value),
+            leftSource: option.icon,
+            children: /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body1_400", lineClamp: 2, children: option.label })
+          },
+          option.value
+        )) }) })
+      }
+    )
   ] });
 };
-var TableFilterBar = React2.memo(({ outsideFilters }) => {
-  const { table, setFilterValue, hasToolbar } = useTable();
-  const filters = table.getState().columnFilters;
-  const prevFiltersRef = React2.useRef();
-  const onSearch = (value) => {
-    setFilterValue(value);
-    table.resetColumnFilters();
-  };
-  const resetFilters = () => {
-    table.setColumnFilters([]);
-    const resetColumnFilters = (columns) => {
-      columns.forEach((column) => {
-        var _a, _b;
-        if ((_b = (_a = column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.onFilterChange) {
-          column.columnDef.meta.onFilterChange("");
-        }
-        if (column.columns && column.columns.length > 0) {
-          resetColumnFilters(column.columns);
-        }
-      });
-    };
-    resetColumnFilters(table.getAllColumns());
-  };
-  const handleRemoveFilter = (columnId, filterValue) => {
-    var _a, _b, _c, _d;
-    const newFilters = table.getState().columnFilters.filter((filter) => !(filter.id === columnId && filter.value === filterValue));
-    table.setColumnFilters(newFilters);
-    (_d = (_c = (_b = (_a = table.getColumn(columnId)) == null ? void 0 : _a.columnDef) == null ? void 0 : _b.meta) == null ? void 0 : _c.onFilterChange) == null ? void 0 : _d.call(_c, "");
-  };
-  const getFilterLabel = (columnId, value) => {
-    var _a;
-    const column = table.getColumn(columnId);
-    if (!column || !((_a = column.columnDef.meta) == null ? void 0 : _a.filterOptions)) {
-      return value;
+var SortMenu = ({ onSortChange, header, sortColumn, triggerWidth }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const column = sortColumn != null ? sortColumn : header.column;
+  const sortLabels = (_d = (_c = (_a = header.column.columnDef.meta) == null ? void 0 : _a.sortLabels) != null ? _c : (_b = column.columnDef.meta) == null ? void 0 : _b.sortLabels) != null ? _d : ["\uC815\uB82C \uD574\uC81C", "\uC624\uB984\uCC28\uC21C", "\uB0B4\uB9BC\uCC28\uC21C"];
+  const currentSort = column.getIsSorted();
+  const handleSortChange = (value) => {
+    if (value === void 0) {
+      column.clearSorting();
+    } else {
+      column.toggleSorting(value === "desc", false);
+    }
+    if (onSortChange) {
+      onSortChange(value);
     }
-    const filterOption = column.columnDef.meta.filterOptions.find((option) => option.value === value);
-    return filterOption ? filterOption.label : value;
   };
-  React2.useEffect(() => {
-    const validFilters = outsideFilters == null ? void 0 : outsideFilters.filter((item) => item.value !== void 0 && item.value !== "").map((item) => ({ id: item.id, value: item.value }));
-    if (!lodashEs.isEqual(prevFiltersRef.current, validFilters)) {
-      prevFiltersRef.current = validFilters;
-      if (validFilters && validFilters.length > 0) {
-        table.setColumnFilters(validFilters);
-      } else {
-        table.setColumnFilters([]);
-      }
+  const delegatedSingleLeaf = ((_e = header.column.columnDef.meta) == null ? void 0 : _e.delegateSortToSingleLeaf) === true && ((_g = (_f = header.column.columns) == null ? void 0 : _f.length) != null ? _g : 0) > 0 && header.column.getLeafColumns().length === 1;
+  if (!delegatedSingleLeaf && !column.getCanSort()) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    base.StackContainer.Vertical,
+    {
+      padding: "4px",
+      radius: "borderRadius04",
+      background: "neutral0",
+      width: `${triggerWidth}px`,
+      style: { boxShadow: "0px 8px 16px 0px rgba(0, 0, 0, 0.12)" },
+      as: "ul",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          base.Menu,
+          {
+            leftSource: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.MoreIcon, sizeVar: "S" }),
+            isSelected: !currentSort,
+            onClick: () => handleSortChange(void 0),
+            children: sortLabels[0]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          base.Menu,
+          {
+            leftSource: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.AscIcon, sizeVar: "S" }),
+            isSelected: currentSort === "asc",
+            onClick: () => handleSortChange("asc"),
+            children: sortLabels[1]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          base.Menu,
+          {
+            leftSource: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.DescIcon, sizeVar: "S" }),
+            isSelected: currentSort === "desc",
+            onClick: () => handleSortChange("desc"),
+            children: sortLabels[2]
+          }
+        )
+      ]
     }
-  }, [outsideFilters, table]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+  );
+};
+var SmallIconButton = styled3__default.default(base.IconButton)`
+  svg {
+    width: 12px !important;
+    height: 12px !important;
+  }
+`;
+var TableHeadTrigger = ({
+  header,
+  uniqueClass,
+  tableHeadRef,
+  isOpen,
+  onTriggerClick
+}) => {
+  var _a, _b;
+  const showFilterMenu = header.column.getCanFilter();
+  const { showSortMenu, sortColumn } = getTableHeadSortModel(header);
+  const headerStyle = (_b = (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerProps) == null ? void 0 : _b.style;
+  const currentSort = sortColumn.getIsSorted();
+  let triggerIcon;
+  if (currentSort === "asc") {
+    triggerIcon = shoplAssets.AscIcon;
+  } else if (currentSort === "desc") {
+    triggerIcon = shoplAssets.DescIcon;
+  } else {
+    triggerIcon = shoplAssets.MoreIcon;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     base.StackContainer.Horizontal,
     {
       width: "100%",
+      height: "100%",
       align: "center",
-      padding: hasToolbar ? "0px 16px 8px" : "0px 0px 8px 0px",
-      spacing: "spacing08",
+      style: __spreadValues(__spreadValues({
+        alignItems: "center",
+        boxSizing: "border-box"
+      }, showSortMenu || showFilterMenu ? { justifyContent: "space-between" } : {}), headerStyle),
+      className: uniqueClass,
+      ref: tableHeadRef,
+      onClick: (e) => {
+        e.stopPropagation();
+        onTriggerClick();
+      },
+      role: "button",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          base.IconButton,
+          base.Text,
           {
-            sizeVar: "XS",
-            styleVar: "GHOST",
-            onClick: () => {
-              resetFilters();
-              if (filters) {
-                onSearch("");
-              }
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.RefreshIcon, color: "neutral700" })
+            typography: "body2_400",
+            color: "neutral400",
+            lineClamp: 2,
+            style: showSortMenu || showFilterMenu ? { flex: 1, minWidth: 0 } : void 0,
+            children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
           }
         ),
-        filters.map((filter) => {
-          const filterValueString = filter.value;
-          const filterLabel = getFilterLabel(filter.id, filterValueString);
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            base.Tag,
-            {
-              sizeVar: "XS",
-              styleVar: "TINT",
-              color: "neutral600",
-              background: "neutral150",
-              radius: true,
-              rightSource: /* @__PURE__ */ jsxRuntime.jsx(
-                base.Icon,
-                {
-                  iconSource: shoplAssets.CloseSmallIcon,
-                  sizeVar: "XS",
-                  color: "neutral350",
-                  onClick: () => handleRemoveFilter(filter.id, filterValueString),
-                  style: { cursor: "pointer" }
-                }
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "caption_400", color: "neutral600", children: filterLabel })
-            },
-            `${filter.id}-${filterValueString}`
-          );
-        })
-      ]
-    }
-  ) });
-});
-var Table = ({
-  data,
-  columns,
-  columnResizing = false,
-  children,
-  manualPagination = false,
-  manualFiltering = false,
-  manualSorting = true,
-  selectedRows = [],
-  onSelectedRowsChange,
-  onClickRow
-}) => {
-  const [sorting, setSorting] = React2.useState([]);
-  const [columnFilters, setColumnFilters] = React2.useState([]);
-  const [globalFilter, setGlobalFilter] = React2.useState([]);
-  const [columnVisibility, setColumnVisibility] = React2.useState({});
-  const [columnPinning, setColumnPinning] = React2.useState({});
-  const [rowSelection, setRowSelection] = React2.useState({});
-  const [filterValue, setFilterValue] = React2.useState("");
-  const visibleColumns = React2.useMemo(() => columns.filter((column) => {
-    var _a;
-    return !((_a = column.meta) == null ? void 0 : _a.hiddenColumn);
-  }), [columns]);
-  const table = reactTable.useReactTable({
-    data,
-    columns: visibleColumns,
-    columnResizeMode: "onChange",
-    initialState: {
-      pagination: {
-        pageSize: 100
-      }
-    },
-    state: {
-      sorting,
-      columnFilters,
-      globalFilter,
-      columnVisibility,
-      columnPinning,
-      rowSelection
-    },
-    defaultColumn: {
-      size: 0,
-      // TODO: 필터링 기능 추가 시 props로 옵션 처리
-      enableColumnFilter: false,
-      enableSorting: false,
-      enableResizing: true
-    },
-    onSortingChange: (updater) => {
-      var _a, _b;
-      const newSorting = typeof updater === "function" ? updater(table.getState().sorting) : updater;
-      setSorting(newSorting);
-      if (newSorting.length > 0) {
-        const { id, desc } = newSorting[0];
-        const column = table.getAllLeafColumns().find((col) => col.id === id);
-        (_b = (_a = column == null ? void 0 : column.columnDef.meta) == null ? void 0 : _a.onSortChange) == null ? void 0 : _b.call(_a, desc ? "desc" : "asc");
-      } else {
-        table.getAllLeafColumns().forEach((column) => {
-          var _a2, _b2;
-          (_b2 = (_a2 = column.columnDef.meta) == null ? void 0 : _a2.onSortChange) == null ? void 0 : _b2.call(_a2, void 0);
-        });
-      }
-    },
-    onColumnFiltersChange: (updater) => {
-      const newFilters = typeof updater === "function" ? updater(table.getState().columnFilters) : updater;
-      setColumnFilters(newFilters);
-      newFilters.forEach((filter) => {
-        var _a, _b;
-        const column = table.getColumn(filter.id);
-        if ((_b = (_a = column == null ? void 0 : column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.onFilterChange) {
-          column.columnDef.meta.onFilterChange(filter.value || "");
-        }
-      });
-    },
-    onGlobalFilterChange: (updater) => {
-      var _a;
-      const newGlobalFilter = typeof updater === "function" ? updater(globalFilter) : updater;
-      setGlobalFilter(newGlobalFilter);
-      if ((_a = table.options.meta) == null ? void 0 : _a.onGlobalFilterChange) {
-        table.options.meta.onGlobalFilterChange(newGlobalFilter || "");
-      }
-      if (newGlobalFilter) {
-        table.getAllLeafColumns().forEach((column) => {
-          var _a2;
-          if (column.getCanFilter() && ((_a2 = column.columnDef.meta) == null ? void 0 : _a2.onFilterChange)) {
-            column.columnDef.meta.onFilterChange(newGlobalFilter);
-          }
-        });
-      }
-    },
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnPinningChange: setColumnPinning,
-    onRowSelectionChange: (updater) => {
-      const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
-      setRowSelection(newSelection);
-      const newSelectedRows = table.getRowModel().rows.filter((row) => newSelection[row.id]).map((row) => row.original);
-      onSelectedRowsChange == null ? void 0 : onSelectedRowsChange(newSelectedRows);
-    },
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getFilteredRowModel: reactTable.getFilteredRowModel(),
-    getPaginationRowModel: reactTable.getPaginationRowModel(),
-    getSortedRowModel: reactTable.getSortedRowModel(),
-    enableColumnResizing: columnResizing,
-    manualPagination,
-    manualFiltering,
-    manualSorting
-  });
-  const headerRef = React2.useRef(null);
-  const bodyRef = React2.useRef(null);
-  const footerRef = React2.useRef(null);
-  const tableScrollRef = React2.useRef(null);
-  const hasToolbar = React2.Children.toArray(children).some((child) => React2.isValidElement(child) && child.type === TableToolbar);
-  const hasPagination = React2.Children.toArray(children).some(
-    (child) => React2.isValidElement(child) && child.type === TablePagination
-  );
-  const hasFilterBar = React2.Children.toArray(children).some(
-    (child) => React2.isValidElement(child) && child.type === TableFilterBar
-  );
-  const contextValue = {
-    table,
-    headerRef,
-    bodyRef,
-    footerRef,
-    tableScrollRef,
-    selectedRows,
-    onClickRow,
-    hasToolbar,
-    hasFilterBar,
-    hasPagination,
-    columnResizing,
-    filterValue,
-    setFilterValue
-  };
-  React2.useEffect(() => {
-    if (selectedRows.length === 0) {
-      table.resetRowSelection();
-    }
-  }, [onSelectedRowsChange, selectedRows.length, table]);
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContainer, { hasToolbar: hasToolbar || hasFilterBar, children: /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { value: contextValue, children }) });
-};
-var TableEmpty = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-};
-var FilterMenu = ({ header, onFilterChange, triggerWidth }) => {
-  var _a;
-  const columnFilterValue = header.column.getFilterValue();
-  const { filterOptions } = (_a = header.column.columnDef.meta) != null ? _a : {};
-  const [maxLabelWidth, setMaxLabelWidth] = React2.useState(0);
-  const labelRefs = React2.useRef([]);
-  React2.useEffect(() => {
-    const widths = labelRefs.current.map((ref) => (ref == null ? void 0 : ref.offsetWidth) || 0);
-    setMaxLabelWidth(Math.max(...widths, 0));
-  }, [filterOptions]);
-  const handleFilterChange = (value) => {
-    header.column.setFilterValue(value);
-    if (onFilterChange) {
-      onFilterChange(value);
-    }
-  };
-  if (!header.column.getCanFilter()) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    base.StackContainer.Vertical,
-    {
-      padding: "4px",
-      radius: "borderRadius04",
-      background: "neutral0",
-      width: maxLabelWidth > triggerWidth ? "100%" : `${triggerWidth}px`,
-      style: { boxShadow: "0px 8px 16px 0px rgba(0, 0, 0, 0.12)" },
-      children: /* @__PURE__ */ jsxRuntime.jsx(base.ScrollArea, { autoHeight: true, autoHeightMax: 240, children: filterOptions == null ? void 0 : filterOptions.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-        base.Menu,
-        {
-          isSelected: columnFilterValue === option.value,
-          onClick: () => handleFilterChange(option.value),
-          leftSource: option.icon,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            base.Text,
-            {
-              typography: "body1_400",
-              whiteSpace: "nowrap",
-              ref: (el) => labelRefs.current[idx] = el,
-              children: option.label
-            }
-          )
-        },
-        option.value
-      )) })
-    }
-  );
-};
-var SortMenu = ({ onSortChange, header, triggerWidth }) => {
-  var _a, _b;
-  const sortLabels = (_b = (_a = header.column.columnDef.meta) == null ? void 0 : _a.sortLabels) != null ? _b : ["\uC624\uB984\uCC28\uC21C", "\uB0B4\uB9BC\uCC28\uC21C", "\uC815\uB82C \uD574\uC81C"];
-  const currentSort = header.column.getIsSorted();
-  const handleSortChange = (value) => {
-    if (value === void 0) {
-      header.column.clearSorting();
-    } else {
-      header.column.toggleSorting(value === "asc", false);
-    }
-    if (onSortChange) {
-      onSortChange(value);
-    }
-  };
-  if (!header.column.getCanSort()) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    base.StackContainer.Vertical,
-    {
-      padding: "4px",
-      radius: "borderRadius04",
-      background: "neutral0",
-      width: `${triggerWidth}px`,
-      style: { boxShadow: "0px 8px 16px 0px rgba(0, 0, 0, 0.12)" },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          base.Menu,
-          {
-            leftSource: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.DescIcon, sizeVar: "S" }),
-            isSelected: currentSort === "desc",
-            onClick: () => handleSortChange("asc"),
-            children: sortLabels[0]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          base.Menu,
-          {
-            leftSource: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.AscIcon, sizeVar: "S" }),
-            isSelected: currentSort === "asc",
-            onClick: () => handleSortChange("desc"),
-            children: sortLabels[1]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          base.Menu,
+        showSortMenu && /* @__PURE__ */ jsxRuntime.jsx(base.IconButton, { sizeVar: "XS", styleVar: "GHOST", "data-component": "sort-button", children: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: triggerIcon, sizeVar: "S", color: "neutral400", className: uniqueClass }) }),
+        showFilterMenu && /* @__PURE__ */ jsxRuntime.jsx(SmallIconButton, { sizeVar: "XS", styleVar: "GHOST", className: uniqueClass, "data-component": "filter-button", children: /* @__PURE__ */ jsxRuntime.jsx(
+          base.Icon,
           {
-            leftSource: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.MoreIcon, sizeVar: "S" }),
-            isSelected: !currentSort,
-            onClick: () => handleSortChange(void 0),
-            children: sortLabels[2]
+            iconSource: isOpen ? shoplAssets.UpArrowSolidXsmallIcon : shoplAssets.DownArrowSolidXsmallIcon,
+            className: uniqueClass,
+            sizeVar: "XS",
+            color: "neutral400"
           }
-        )
+        ) })
       ]
     }
   );
 };
-var TableHeadTrigger = ({
-  header,
-  uniqueClass,
-  tableHeadRef,
-  isOpen,
-  onTriggerClick
-}) => {
-  var _a, _b;
+var TableHeadCell = ({ header, onFilterChange, onSortChange }) => {
+  const tableHeadRef = React3.useRef(null);
+  const [triggerWidth, setTriggerWidth] = React3.useState(0);
+  const uniqueClass = React3.useMemo(() => {
+    return `filter-menu-${crypto.randomUUID()}`;
+  }, []);
+  const { isOpen: isPopoverOpen, onClickTrigger: onClickPopoverTrigger } = utils.usePopover({
+    popoverSelector: `.${uniqueClass}`
+  });
+  const sortModel = getTableHeadSortModel(header);
   const showFilterMenu = header.column.getCanFilter();
-  const showSortMenu = header.column.getCanSort();
-  const currentSort = header.column.getIsSorted();
-  let triggerIcon;
-  if (currentSort === "asc") {
-    triggerIcon = shoplAssets.AscIcon;
-  } else if (currentSort === "desc") {
-    triggerIcon = shoplAssets.DescIcon;
-  } else {
-    triggerIcon = shoplAssets.MoreIcon;
-  }
+  const showSortMenu = sortModel.showSortMenu;
+  const hasInteraction = showFilterMenu || showSortMenu;
+  const cursorStyle = hasInteraction ? "pointer" : "default";
+  React3.useEffect(() => {
+    if (tableHeadRef.current) {
+      setTriggerWidth(tableHeadRef.current.clientWidth);
+    }
+  }, [isPopoverOpen, tableHeadRef]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    base.StackContainer.Horizontal,
+    base.Popper,
     {
-      width: "100%",
-      align: "center",
-      style: (_b = (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerProps) == null ? void 0 : _b.style,
-      className: uniqueClass,
-      ref: tableHeadRef,
+      offset: { mainAxis: 4, crossAxis: -4 },
+      autoPlacement: { allowedPlacements: ["bottom-start", "bottom-end"] },
+      placement: "bottom-start",
+      strategy: "absolute",
+      middlewares: [base.shift({ padding: 6 })],
       children: [
-        reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-        showSortMenu && /* @__PURE__ */ jsxRuntime.jsx(
-          base.IconButton,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          base.Popper.Trigger,
           {
-            sizeVar: "XS",
-            styleVar: "GHOST",
-            onClick: (e) => {
-              e.stopPropagation();
-              onTriggerClick();
+            isOpen: isPopoverOpen,
+            "data-expanded": isPopoverOpen,
+            onClick: () => {
+              onClickPopoverTrigger();
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: triggerIcon, sizeVar: "S", color: "neutral400", className: uniqueClass })
-          }
-        ),
-        showFilterMenu && /* @__PURE__ */ jsxRuntime.jsx(
-          SmallIconButton,
-          {
-            sizeVar: "XS",
-            styleVar: "GHOST",
-            onClick: (e) => {
-              e.stopPropagation();
-              onTriggerClick();
+            style: {
+              cursor: cursorStyle,
+              background: `${(showFilterMenu || showSortMenu) && isPopoverOpen ? base.colorTokens.neutral400_5 : "transparent"}`,
+              padding: `${(showFilterMenu || showSortMenu) && "4px"}`,
+              borderRadius: `${isPopoverOpen ? "6px" : "0px"}`,
+              display: "flex",
+              alignItems: "center",
+              boxSizing: "border-box",
+              width: "100%",
+              height: "100%",
+              minHeight: "100%"
             },
+            width: "100%",
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              base.Icon,
+              TableHeadTrigger,
               {
-                iconSource: isOpen ? shoplAssets.UpArrowSolidXsmallIcon : shoplAssets.DownArrowSolidXsmallIcon,
-                sizeVar: "XS",
-                color: "neutral400"
+                isOpen: isPopoverOpen,
+                header,
+                uniqueClass,
+                tableHeadRef,
+                onTriggerClick: () => {
+                  onClickPopoverTrigger();
+                }
               }
             )
           }
-        )
+        ),
+        isPopoverOpen && /* @__PURE__ */ jsxRuntime.jsxs(base.Popper.Portal, { children: [
+          showFilterMenu && /* @__PURE__ */ jsxRuntime.jsx(
+            FilterMenu,
+            {
+              header,
+              onFilterChange: (value) => {
+                onFilterChange == null ? void 0 : onFilterChange(value);
+              },
+              triggerWidth: triggerWidth + 16
+            }
+          ),
+          showSortMenu && /* @__PURE__ */ jsxRuntime.jsx(
+            SortMenu,
+            {
+              header,
+              sortColumn: sortModel.sortColumn,
+              onSortChange: (value) => {
+                onSortChange == null ? void 0 : onSortChange(value);
+              },
+              triggerWidth: triggerWidth + 16
+            }
+          )
+        ] })
       ]
     }
   );
 };
-var TableHeadCell = ({ header, onFilterChange, onSortChange }) => {
-  const tableHeadRef = React2.useRef(null);
-  const [triggerWidth, setTriggerWidth] = React2.useState(0);
-  const uniqueClass = `filter-menu-${header.column.id}`;
-  const [isOpen, setIsOpen] = utils.useOutsideClick({
-    selector: `.${uniqueClass}`
+var TableHeadCell_default = TableHeadCell;
+var DragHandle = ({ listeners, attributes }) => /* @__PURE__ */ jsxRuntime.jsx(
+  base.StackContainer.Horizontal,
+  __spreadProps(__spreadValues(__spreadValues({
+    align: "center",
+    justify: "center",
+    padding: "4px"
+  }, listeners), attributes), {
+    style: {
+      cursor: "grab",
+      touchAction: "none"
+    },
+    background: "neutral0",
+    children: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.ListMoveIcon, sizeVar: "S", color: "neutral700" })
+  })
+);
+var SortableRow = ({
+  row,
+  index,
+  cells,
+  hasPinned,
+  onClickRow,
+  getFixedCellStyle,
+  showDragHandle,
+  shouldFixDragHandle = false,
+  dragColWidth = 40,
+  bodyRowStyle
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging: isSortableDragging
+  } = sortable.useSortable({
+    id: row.id || `row-${index}`
   });
-  const showFilterMenu = header.column.getCanFilter();
-  const showSortMenu = header.column.getCanSort();
-  const hasInteraction = showFilterMenu || showSortMenu;
-  const cursorStyle = hasInteraction ? "pointer" : "default";
-  React2.useEffect(() => {
-    if (tableHeadRef.current) {
-      setTriggerWidth(tableHeadRef.current.clientWidth);
-    }
-  }, [isOpen, tableHeadRef]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(base.Popper, { offset: 4, placement: "bottom-start", strategy: "absolute", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      base.Popper.Trigger,
-      {
-        isOpen,
-        onClick: () => {
-          setIsOpen((prev) => !prev);
-        },
-        style: {
-          cursor: cursorStyle,
-          background: `${(showFilterMenu || showSortMenu) && isOpen ? base.colorTokens.neutral400_5 : base.colorTokens.neutral100}`,
-          padding: `${(showFilterMenu || showSortMenu) && "8px"}`,
-          borderRadius: `${isOpen ? "6px" : "0px"}`
-        },
-        width: "100%",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          TableHeadTrigger,
+  const baseRowStyle = typeof bodyRowStyle === "function" ? bodyRowStyle(index, row.original) : bodyRowStyle;
+  const style = __spreadProps(__spreadValues({}, baseRowStyle), {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isSortableDragging ? 0.5 : 1,
+    backgroundColor: isSortableDragging ? "#f5f5f5" : void 0
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TableRow,
+    {
+      ref: setNodeRef,
+      style,
+      "data-index": index,
+      "data-has-pinned": hasPinned,
+      onClick: () => {
+        var _a;
+        if (typeof row.getVisibleCells === "function") {
+          onClickRow == null ? void 0 : onClickRow(row.original);
+        } else if (Array.isArray(row) && row.length > 0 && ((_a = row[0].row) == null ? void 0 : _a.original)) {
+          onClickRow == null ? void 0 : onClickRow(row[0].row.original);
+        }
+      },
+      className: onClickRow !== void 0 ? "clickable" : `row-${index}`,
+      children: [
+        showDragHandle && /* @__PURE__ */ jsxRuntime.jsx(
+          TableCell,
           {
-            isOpen,
-            header,
-            uniqueClass,
-            tableHeadRef,
-            onTriggerClick: () => setIsOpen((prev) => !prev)
+            style: shouldFixDragHandle ? {
+              position: "sticky",
+              left: 0,
+              zIndex: 11,
+              width: `${dragColWidth}px`,
+              minWidth: `${dragColWidth}px`,
+              maxWidth: `${dragColWidth}px`,
+              backgroundColor: "neutral0"
+            } : void 0,
+            "data-last-left-pinned": shouldFixDragHandle ? false : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(DragHandle, { listeners, attributes })
           }
-        )
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(base.Popper.Portal, { children: [
-      showFilterMenu && /* @__PURE__ */ jsxRuntime.jsx(
-        FilterMenu,
-        {
-          header,
-          onFilterChange: (value) => {
-            onFilterChange == null ? void 0 : onFilterChange(value);
-          },
-          triggerWidth: triggerWidth + 16
-        }
-      ),
-      showSortMenu && /* @__PURE__ */ jsxRuntime.jsx(
-        SortMenu,
-        {
-          header,
-          onSortChange: (value) => {
-            onSortChange == null ? void 0 : onSortChange(value);
-          },
-          triggerWidth: triggerWidth + 16
-        }
-      )
-    ] })
-  ] });
+        ),
+        cells.map((cell) => {
+          var _a;
+          const isPinned = cell.column.getIsPinned();
+          const isLastLeftPinned = isPinned === "left" && cell.column.getIsLastColumn("left");
+          const isFirstRightPinned = isPinned === "right" && cell.column.getIsFirstColumn("right");
+          const cellContext = cell.getContext();
+          const overriddenContext = __spreadProps(__spreadValues({}, cellContext), {
+            row: __spreadProps(__spreadValues({}, cellContext.row), {
+              index
+            })
+          });
+          return /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            TableCell,
+            {
+              "data-last-left-pinned": isLastLeftPinned,
+              "data-first-right-pinned": isFirstRightPinned,
+              "data-no-hover": getColumnActiveHoverDataAttribute(
+                (_a = cell.column.columnDef.meta) == null ? void 0 : _a.activeHover,
+                cell.row.original
+              ),
+              style: getFixedCellStyle(cell.column),
+              children: reactTable.flexRender(cell.column.columnDef.cell, overriddenContext)
+            }
+          ) }, cell.id);
+        })
+      ]
+    }
+  );
 };
-var TableHeadCell_default = TableHeadCell;
+var CellSkeleton = () => /* @__PURE__ */ jsxRuntime.jsx(base.Skeleton, { styleVar: "rectangle", width: "80%", height: "20px" });
+var SkeletonRows = ({ rowCount, columns, enableDragDrop }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+  enableDragDrop && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { style: { width: 40, minWidth: 40, height: "60px" }, children: /* @__PURE__ */ jsxRuntime.jsx(CellSkeleton, {}) }),
+  columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { style: { height: "60px" }, children: /* @__PURE__ */ jsxRuntime.jsx(CellSkeleton, {}) }, column.id))
+] }, `skeleton-row-${rowIndex}`)) });
 var FixedTable = ({ tableState }) => {
-  const { table, headerRef, bodyRef, tableScrollRef, hasToolbar, hasPagination, onClickRow } = useTable();
   const {
-    displayedRows,
+    table,
+    headerRef,
+    bodyRef,
+    tableScrollRef,
+    footerRef,
+    hasToolbar,
+    hasPagination,
+    onClickRow,
+    hasFooter,
+    hasFilterBar,
+    isLoading
+  } = useTable();
+  const {
+    displayedRows: initialDisplayedRows,
     paddingTop,
     paddingBottom,
     isEmpty,
@@ -1121,43 +1325,122 @@ var FixedTable = ({ tableState }) => {
     isSticky,
     stickyHeaderTopPosition,
     maxHeight = "100%",
-    emptyRowCount = 8
+    emptyRowCount = 8,
+    enableDragDrop = false,
+    dragColWidth = 40,
+    onRowReorder,
+    shouldFixDragHandle = false,
+    footerRowProps,
+    headerRowStyle,
+    bodyRowStyle
   } = tableState;
-  const handleScroll = React2.useCallback(() => {
-    if (!bodyRef.current) {
+  const [displayedRows, setDisplayedRows] = React3.useState(initialDisplayedRows);
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const handleScroll = React3.useCallback(() => {
+    if (!bodyRef.current)
       return;
-    }
     const bodyScrollLeft = bodyRef.current.scrollLeft;
     if (headerRef.current) {
       headerRef.current.scrollLeft = bodyScrollLeft;
     }
+    if (footerRef.current) {
+      footerRef.current.scrollLeft = bodyScrollLeft;
+    }
     if (tableScrollRef.current) {
       tableScrollRef.current.scrollLeft = bodyScrollLeft;
     }
-  }, [bodyRef, headerRef, tableScrollRef]);
-  const TableColumns = () => /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: table.getVisibleFlatColumns().map((column) => {
-    const size = column.columnDef.size;
-    const minSize = column.columnDef.minSize;
-    const maxSize = column.columnDef.maxSize;
-    const style = size === 0 ? { width: "100%" } : {
-      width: `${size}px`,
-      minWidth: `${minSize}px`,
-      maxWidth: `${maxSize}px`
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("col", { style }, column.id);
-  }) });
-  const getFixedCellStyle = (column, isHeader = false) => {
-    var _a, _b, _c, _d;
-    const baseStyle = __spreadValues(__spreadValues({}, getCommonPinningStyles(column)), isHeader ? (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerProps) == null ? void 0 : _b.style : (_d = (_c = column.columnDef.meta) == null ? void 0 : _c.cellProps) == null ? void 0 : _d.style);
+  }, [bodyRef, headerRef, footerRef, tableScrollRef]);
+  const handleScrollBarScroll = React3.useCallback(() => {
+    if (!tableScrollRef.current || !bodyRef.current)
+      return;
+    bodyRef.current.scrollLeft = tableScrollRef.current.scrollLeft;
+  }, [bodyRef, tableScrollRef]);
+  const dragColWidthPx = `${dragColWidth}px`;
+  const TableColumns = ({ showDragHandle = false }) => {
+    const leafColumns = table.getVisibleLeafColumns();
+    return /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+      showDragHandle && /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: dragColWidthPx, minWidth: dragColWidthPx, maxWidth: dragColWidthPx } }),
+      leafColumns.map((column) => {
+        var _a, _b;
+        const size = column.columnDef.size;
+        const minSize = (_a = column.columnDef.minSize) != null ? _a : size;
+        const maxSize = (_b = column.columnDef.maxSize) != null ? _b : size;
+        const style = size === 0 ? { width: "100%" } : {
+          width: `${size}px`,
+          minWidth: `${minSize}px`,
+          maxWidth: `${maxSize}px`
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx("col", { style }, column.id);
+      })
+    ] });
+  };
+  const getFixedCellStyle = (column, isHeader = false, isFooter = false) => {
+    var _a, _b, _c, _d, _e, _f;
+    const baseStyle = __spreadValues(__spreadValues({}, getCommonPinningStyles(column)), isHeader ? (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerProps) == null ? void 0 : _b.style : isFooter ? (_d = (_c = column.columnDef.meta) == null ? void 0 : _c.footerProps) == null ? void 0 : _d.style : (_f = (_e = column.columnDef.meta) == null ? void 0 : _e.cellProps) == null ? void 0 : _f.style);
     const size = column.columnDef.size;
     const minSize = column.columnDef.minSize;
     const maxSize = column.columnDef.maxSize;
-    return __spreadValues(__spreadValues({}, baseStyle), size === 0 ? { width: "100%" } : {
+    const isPinned = column.getIsPinned();
+    const adjustedLeft = shouldFixDragHandle && isPinned === "left" && baseStyle.left ? `${parseFloat(baseStyle.left.toString()) + dragColWidth}px` : baseStyle.left;
+    return __spreadValues(__spreadProps(__spreadValues({}, baseStyle), {
+      left: adjustedLeft
+    }), size === 0 ? { width: "100%" } : {
       width: `${size}px`,
       minWidth: `${minSize}px`,
       maxWidth: `${maxSize}px`
     });
   };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setDisplayedRows((rows) => {
+        const oldIndex = rows.findIndex((r) => {
+          const row = r.row;
+          const id = typeof row.id !== "undefined" ? row.id : rows.indexOf(r);
+          return id === active.id;
+        });
+        const newIndex = rows.findIndex((r) => {
+          const row = r.row;
+          const id = typeof row.id !== "undefined" ? row.id : rows.indexOf(r);
+          return id === over.id;
+        });
+        const newOrder = sortable.arrayMove(rows, oldIndex, newIndex);
+        if (onRowReorder) {
+          const reorderedData = newOrder.map((r) => {
+            var _a;
+            const row = r.row;
+            if (typeof row.getVisibleCells === "function") {
+              return row.original;
+            } else if (Array.isArray(row) && row.length > 0 && ((_a = row[0].row) == null ? void 0 : _a.original)) {
+              return row[0].row.original;
+            }
+            return null;
+          }).filter(Boolean);
+          onRowReorder(reorderedData);
+        }
+        return newOrder;
+      });
+    }
+  };
+  const rowIds = React3__default.default.useMemo(
+    () => displayedRows.map((r) => {
+      var _a, _b, _c;
+      return r.row.id || `row-${((_a = r.row.original) == null ? void 0 : _a.id) || ((_c = (_b = r.row.original) == null ? void 0 : _b.userName) == null ? void 0 : _c.name) || "fallback"}`;
+    }),
+    [displayedRows]
+  );
+  React3.useEffect(() => {
+    setDisplayedRows(initialDisplayedRows);
+  }, [initialDisplayedRows]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       HeaderTableContainer,
@@ -1175,40 +1458,108 @@ var FixedTable = ({ tableState }) => {
               tableLayout: "fixed"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TableColumns, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
-                const isPinned = header.column.getIsPinned();
-                const isLastLeftPinned = isPinned === "left" && header.column.getIsLastColumn("left");
-                const isFirstRightPinned = isPinned === "right" && header.column.getIsFirstColumn("right");
-                const columnRelativeDepth = header.depth - header.column.depth;
-                if (!header.isPlaceholder && columnRelativeDepth > 1 && header.id === header.column.id) {
-                  return null;
-                }
-                let rowSpan = 1;
-                if (header.isPlaceholder) {
-                  const leafs = header.getLeafHeaders();
-                  rowSpan = leafs[leafs.length - 1].depth - header.depth;
-                }
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  TableHead,
-                  {
-                    "data-last-left-pinned": isLastLeftPinned,
-                    "data-first-right-pinned": isFirstRightPinned,
-                    "data-pinned": isPinned,
-                    style: getFixedCellStyle(header.column, true),
-                    colSpan: header.colSpan,
-                    rowSpan,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header })
-                  },
-                  header.id
-                );
-              }) }, headerGroup.id)) })
+              /* @__PURE__ */ jsxRuntime.jsx(TableColumns, { showDragHandle: enableDragDrop }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup, i) => {
+                const rowStyle = typeof headerRowStyle === "function" ? headerRowStyle(i, headerGroup) : headerRowStyle;
+                return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { style: rowStyle, children: [
+                  enableDragDrop && /* @__PURE__ */ jsxRuntime.jsx(
+                    TableHead,
+                    {
+                      colSpan: 1,
+                      style: shouldFixDragHandle ? {
+                        position: "sticky",
+                        left: 0,
+                        zIndex: 11,
+                        width: dragColWidthPx,
+                        minWidth: dragColWidthPx,
+                        maxWidth: dragColWidthPx,
+                        backgroundColor: (rowStyle == null ? void 0 : rowStyle.backgroundColor) || "neutral400"
+                      } : rowStyle ? {
+                        backgroundColor: (rowStyle == null ? void 0 : rowStyle.backgroundColor) || "neutral400",
+                        height: rowStyle == null ? void 0 : rowStyle.height,
+                        maxHeight: rowStyle == null ? void 0 : rowStyle.maxHeight,
+                        minHeight: rowStyle == null ? void 0 : rowStyle.minHeight
+                      } : void 0,
+                      "data-pinned": shouldFixDragHandle ? "left" : void 0,
+                      "data-last-left-pinned": shouldFixDragHandle ? false : void 0
+                    }
+                  ),
+                  headerGroup.headers.map((header) => {
+                    var _a, _b, _c, _d, _e;
+                    const isPinned = header.column.getIsPinned();
+                    const leafHeaders = header.getLeafHeaders();
+                    const hasLastLeftPinnedLeaf = leafHeaders.some(
+                      (leaf) => leaf.column.getIsPinned() === "left" && leaf.column.getIsLastColumn("left")
+                    );
+                    const hasFirstRightPinnedLeaf = leafHeaders.some(
+                      (leaf) => leaf.column.getIsPinned() === "right" && leaf.column.getIsFirstColumn("right")
+                    );
+                    const isLastLeftPinned = isPinned === "left" && header.column.getIsLastColumn("left") || hasLastLeftPinnedLeaf;
+                    const isFirstRightPinned = isPinned === "right" && header.column.getIsFirstColumn("right") || hasFirstRightPinnedLeaf;
+                    const columnRelativeDepth = header.depth - header.column.depth;
+                    if (!header.isPlaceholder && columnRelativeDepth > 1 && header.id === header.column.id) {
+                      return null;
+                    }
+                    let rowSpan = 1;
+                    if (header.isPlaceholder) {
+                      const leafs = header.getLeafHeaders();
+                      rowSpan = leafs[leafs.length - 1].depth - header.depth;
+                    }
+                    let headerStyle = {};
+                    if (header.colSpan > 1) {
+                      const leafHeaders2 = header.getLeafHeaders();
+                      const groupId = header.column.id;
+                      const totalWidth = leafHeaders2.filter((leaf) => leaf.column.id !== groupId).reduce((sum, leaf) => {
+                        const size = leaf.column.columnDef.size || 0;
+                        return sum + size;
+                      }, 0);
+                      const firstLeaf = leafHeaders2[0];
+                      const firstLeafPinned = firstLeaf.column.getIsPinned();
+                      headerStyle = __spreadProps(__spreadValues({}, (_b = (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerProps) == null ? void 0 : _b.style), {
+                        width: `${totalWidth}px`,
+                        minWidth: `${totalWidth}px`,
+                        maxWidth: `${totalWidth}px`,
+                        left: firstLeafPinned === "left" ? `${firstLeaf.column.getStart("left")}px` : void 0,
+                        right: firstLeafPinned === "right" ? `${firstLeaf.column.getAfter("right")}px` : void 0,
+                        position: firstLeafPinned ? "sticky" : "relative",
+                        zIndex: firstLeafPinned ? 10 : 0
+                      });
+                    } else {
+                      headerStyle = getFixedCellStyle(header.column, true);
+                    }
+                    const hasNoBorderRight = headerStyle.borderRight === "none" || ((_e = (_d = (_c = header.column.columnDef.meta) == null ? void 0 : _c.headerProps) == null ? void 0 : _d.style) == null ? void 0 : _e.borderRight) === "none";
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      TableHead,
+                      {
+                        "data-last-left-pinned": isLastLeftPinned,
+                        "data-first-right-pinned": isFirstRightPinned,
+                        "data-pinned": isPinned,
+                        "data-no-border-right": hasNoBorderRight,
+                        style: __spreadValues(__spreadValues({}, headerStyle), rowStyle && {
+                          backgroundColor: rowStyle.backgroundColor,
+                          height: rowStyle.height,
+                          maxHeight: rowStyle.maxHeight,
+                          minHeight: rowStyle.minHeight
+                        }),
+                        colSpan: header.colSpan,
+                        rowSpan,
+                        sortable: getTableHeadSortModel(header).showSortMenu,
+                        filterable: header.column.getCanFilter(),
+                        "data-sortable": getTableHeadSortModel(header).showSortMenu,
+                        "data-filterable": header.column.getCanFilter(),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header })
+                      },
+                      header.id
+                    );
+                  })
+                ] }, headerGroup.id);
+              }) })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(base.ScrollArea, { autoHeightMax: maxHeight, autoHeight: true, children: /* @__PURE__ */ jsxRuntime.jsx(BodyTableContainer, { hasPagination, onScroll: handleScroll, ref: bodyRef, children: isEmpty ? children || emptyElement : /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(base.ScrollArea, { autoHeightMax: maxHeight, autoHeight: true, children: /* @__PURE__ */ jsxRuntime.jsx(BodyTableContainer, { hasPagination, hasFooter, onScroll: handleScroll, ref: bodyRef, children: /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: rowIds, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "table",
       {
         style: {
@@ -1217,51 +1568,104 @@ var FixedTable = ({ tableState }) => {
           tableLayout: "fixed"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TableColumns, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(TableColumns, { showDragHandle: enableDragDrop }),
           /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { children: [
             paddingTop > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) }),
-            displayedRows.map((rowObj, i) => {
+            isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonRows,
+              {
+                rowCount: emptyRowCount || 8,
+                columns: table.getVisibleLeafColumns(),
+                enableDragDrop
+              }
+            ),
+            !isLoading && isEmpty && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              TableCell,
+              {
+                colSpan: table.getAllColumns().length + (enableDragDrop ? 1 : 0),
+                style: { padding: 0, border: "none" },
+                children: children || emptyElement
+              }
+            ) }),
+            !isLoading && !isEmpty && displayedRows.map((rowObj, i) => {
+              var _a, _b, _c;
               const isVirtual = "virtualRow" in rowObj && rowObj.virtualRow;
               const row = rowObj.row;
               const cells = typeof row.getVisibleCells === "function" ? row.getVisibleCells() : row;
+              const hasPinned = cells.some((cell) => cell.column.getIsPinned());
+              const rowId = row.id || `row-${((_a = row.original) == null ? void 0 : _a.id) || ((_c = (_b = row.original) == null ? void 0 : _b.userName) == null ? void 0 : _c.name) || i}`;
+              if (enableDragDrop) {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  SortableRow,
+                  {
+                    row,
+                    index: i,
+                    cells,
+                    hasPinned,
+                    onClickRow,
+                    getFixedCellStyle,
+                    showDragHandle: true,
+                    shouldFixDragHandle,
+                    dragColWidth,
+                    bodyRowStyle
+                  },
+                  rowId
+                );
+              }
+              const rowStyle = typeof bodyRowStyle === "function" ? bodyRowStyle(i, row.original) : bodyRowStyle;
+              const cellBackgroundColor = rowStyle == null ? void 0 : rowStyle.backgroundColor;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 TableRow,
                 {
                   "data-index": isVirtual ? rowObj.virtualRow.index : i,
+                  "data-has-pinned": hasPinned,
+                  style: rowStyle,
                   onClick: () => {
-                    var _a;
+                    var _a2;
                     if (typeof row.getVisibleCells === "function") {
                       onClickRow == null ? void 0 : onClickRow(row.original);
-                    } else if (Array.isArray(row) && row.length > 0 && ((_a = row[0].row) == null ? void 0 : _a.original)) {
+                    } else if (Array.isArray(row) && row.length > 0 && ((_a2 = row[0].row) == null ? void 0 : _a2.original)) {
                       onClickRow == null ? void 0 : onClickRow(row[0].row.original);
                     }
                   },
-                  className: onClickRow !== void 0 ? "clickable" : "",
+                  className: onClickRow !== void 0 ? "clickable" : `row-${i}`,
                   children: cells.map((cell) => {
-                    var _a;
+                    var _a2, _b2, _c2, _d;
                     const isPinned = cell.column.getIsPinned();
                     const isLastLeftPinned = isPinned === "left" && cell.column.getIsLastColumn("left");
                     const isFirstRightPinned = isPinned === "right" && cell.column.getIsFirstColumn("right");
-                    return /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    const cellContext = cell.getContext();
+                    const overriddenContext = __spreadProps(__spreadValues({}, cellContext), {
+                      row: __spreadProps(__spreadValues({}, cellContext.row), {
+                        index: i
+                      })
+                    });
+                    return /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
                       TableCell,
                       {
                         "data-last-left-pinned": isLastLeftPinned,
                         "data-first-right-pinned": isFirstRightPinned,
-                        "data-no-hover": ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.activeHover) ? "true" : void 0,
-                        style: getFixedCellStyle(cell.column),
-                        children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+                        "data-no-hover": getColumnActiveHoverDataAttribute(
+                          (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.activeHover,
+                          cell.row.original
+                        ),
+                        "data-has-custom-style": ((_d = (_c2 = (_b2 = cell.column.columnDef.meta) == null ? void 0 : _b2.cellProps) == null ? void 0 : _c2.style) == null ? void 0 : _d.backgroundColor) ? "true" : void 0,
+                        style: __spreadValues(__spreadValues({}, getFixedCellStyle(cell.column)), cellBackgroundColor && {
+                          backgroundColor: cellBackgroundColor
+                        }),
+                        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(CellSkeleton, {}) : reactTable.flexRender(cell.column.columnDef.cell, overriddenContext)
                       }
                     ) }, cell.id);
                   })
                 },
-                typeof row.id !== "undefined" ? row.id : i
+                rowId
               );
             }),
             paddingBottom > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }),
-            emptyRowCount !== 0 && displayedRows.length < emptyRowCount && Array.from({ length: emptyRowCount - displayedRows.length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-empty": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            emptyRowCount !== 0 && displayedRows.length < emptyRowCount && !isLoading && !isEmpty && Array.from({ length: emptyRowCount - displayedRows.length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-empty": true, children: /* @__PURE__ */ jsxRuntime.jsx(
               TableCell,
               {
-                colSpan: table.getAllColumns().length,
+                colSpan: table.getAllColumns().length + (enableDragDrop ? 1 : 0),
                 style: {
                   height: `${60}px`
                 }
@@ -1270,7 +1674,89 @@ var FixedTable = ({ tableState }) => {
           ] })
         ]
       }
-    ) }) })
+    ) }) }) }) }),
+    !hasPagination && /* @__PURE__ */ jsxRuntime.jsx(
+      BottomContainer,
+      {
+        ref: footerRef,
+        isEndOfPage: true,
+        hasFilterBar,
+        hasToolbar,
+        hideBorder: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer, { ref: tableScrollRef, onScroll: handleScrollBarScroll, isPagination: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            style: {
+              width: enableDragDrop ? (table.getTotalSize() || 0) + dragColWidth : table.getTotalSize() || "100%",
+              height: "6px",
+              tableLayout: "fixed"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(TableColumns, { showDragHandle: enableDragDrop })
+          }
+        ) })
+      }
+    ),
+    hasFooter && /* @__PURE__ */ jsxRuntime.jsx(FooterTableContainer, { ref: footerRef, isSticky, hasPagination, hasHeader: hasToolbar, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        style: {
+          width: "100%",
+          overflow: "auto",
+          tableLayout: "fixed"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableColumns, { showDragHandle: enableDragDrop }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableFooter, { children: table.getFooterGroups().map((footerGroup) => {
+            var _a;
+            return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { style: footerRowProps == null ? void 0 : footerRowProps.style, children: [
+              enableDragDrop && /* @__PURE__ */ jsxRuntime.jsx(
+                TableFoot,
+                {
+                  colSpan: 1,
+                  style: shouldFixDragHandle ? {
+                    position: "sticky",
+                    left: 0,
+                    zIndex: 11,
+                    width: dragColWidthPx,
+                    minWidth: dragColWidthPx,
+                    maxWidth: dragColWidthPx,
+                    backgroundColor: ((_a = footerRowProps == null ? void 0 : footerRowProps.style) == null ? void 0 : _a.backgroundColor) || "inherit"
+                  } : void 0,
+                  "data-last-left-pinned": shouldFixDragHandle ? false : void 0
+                }
+              ),
+              footerGroup.headers.map((footer) => {
+                const isPinned = footer.column.getIsPinned();
+                const isLastLeftPinned = isPinned === "left" && footer.column.getIsLastColumn("left");
+                const isFirstRightPinned = isPinned === "right" && footer.column.getIsFirstColumn("right");
+                const columnRelativeDepth = footer.depth - footer.column.depth;
+                if (!footer.isPlaceholder && columnRelativeDepth > 1 && footer.id === footer.column.id) {
+                  return null;
+                }
+                let rowSpan = 1;
+                if (footer.isPlaceholder) {
+                  const leafs = footer.getLeafHeaders();
+                  rowSpan = leafs[leafs.length - 1].depth - footer.depth;
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  TableFoot,
+                  {
+                    "data-last-left-pinned": isLastLeftPinned,
+                    "data-first-right-pinned": isFirstRightPinned,
+                    "data-pinned": isPinned,
+                    style: getFixedCellStyle(footer.column, false, true),
+                    colSpan: footer.colSpan,
+                    rowSpan,
+                    children: footer.isPlaceholder ? null : reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
+                  },
+                  footer.id
+                );
+              })
+            ] }, footerGroup.id);
+          }) })
+        ]
+      }
+    ) })
   ] });
 };
 var ResizableTable = ({ tableState }) => {
@@ -1285,29 +1771,33 @@ var ResizableTable = ({ tableState }) => {
     isSticky,
     stickyHeaderTopPosition,
     maxHeight = "100%",
-    emptyRowCount = 8
+    emptyRowCount = 8,
+    headerRowStyle,
+    bodyRowStyle
   } = tableState;
-  const handleScroll = React2.useCallback(() => {
-    if (headerRef.current && bodyRef.current && tableScrollRef.current) {
-      const scrollLeft = bodyRef.current.scrollLeft;
-      headerRef.current.scrollLeft = scrollLeft;
-      tableScrollRef.current.scrollLeft = scrollLeft;
+  const handleScroll = React3.useCallback(() => {
+    if (!bodyRef.current)
+      return;
+    const bodyScrollLeft = bodyRef.current.scrollLeft;
+    if (headerRef.current) {
+      headerRef.current.scrollLeft = bodyScrollLeft;
     }
-  }, []);
-  const columnSizeVars = React2__default.default.useMemo(() => {
-    var _a;
+    if (tableScrollRef.current) {
+      tableScrollRef.current.scrollLeft = bodyScrollLeft;
+    }
+  }, [bodyRef, headerRef, tableScrollRef]);
+  const columnSizeVars = React3__default.default.useMemo(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     const visibleHeaders = headers.filter((header) => header.column.getIsVisible());
-    const lastLeafColumns = table.getLeafHeaders();
-    const lastColumnId = (_a = lastLeafColumns[lastLeafColumns.length - 1]) == null ? void 0 : _a.id;
     visibleHeaders.forEach((header) => {
       const currentSize = header.column.getSize();
       const defaultSize = header.column.columnDef.size;
       const maxSize = header.column.columnDef.maxSize;
-      const isLastColumn = header.id === lastColumnId;
+      const isPinned = header.column.getIsPinned();
+      const canResize = header.column.getCanResize();
       let size;
-      if (isLastColumn) {
+      if (!isPinned && canResize) {
         size = "auto";
       } else if (currentSize !== void 0) {
         size = currentSize;
@@ -1316,7 +1806,7 @@ var ResizableTable = ({ tableState }) => {
       } else {
         size = 200;
       }
-      if (!isLastColumn && maxSize && typeof size === "number" && size > maxSize) {
+      if (maxSize && typeof size === "number" && size > maxSize) {
         size = maxSize;
       }
       colSizes[`--header-${header.id}-size`] = size;
@@ -1324,8 +1814,11 @@ var ResizableTable = ({ tableState }) => {
     });
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  const totalTableWidth = React3__default.default.useMemo(() => {
+    return table.getLeftTotalSize() + table.getCenterTotalSize() + table.getRightTotalSize();
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing, table.getState().columnPinning]);
   const getResizableCellStyle = (column, isHeader = false) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const baseStyle = __spreadValues(__spreadValues({}, getCommonPinningStyles(column)), isHeader ? (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerProps) == null ? void 0 : _b.style : (_d = (_c = column.columnDef.meta) == null ? void 0 : _c.cellProps) == null ? void 0 : _d.style);
     const colId = column.id;
     const headerId = isHeader ? colId : null;
@@ -1333,11 +1826,18 @@ var ResizableTable = ({ tableState }) => {
     const maxSize = column.columnDef.maxSize;
     const sizeKey = isHeader ? `--header-${headerId}-size` : `--col-${colId}-size`;
     const size = columnSizeVars[sizeKey];
-    const isLastColumn = (_e = column.columnDef.meta) == null ? void 0 : _e.isLastColumn;
-    return __spreadProps(__spreadValues(__spreadValues({}, baseStyle), size === "auto" ? { width: "auto", flex: "1 1 auto" } : { width: size ? `${size}px` : "auto" }), {
+    const canResize = column.getCanResize();
+    const isPinned = column.getIsPinned();
+    const ellipsisStyle = !canResize && !isPinned ? {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    } : {};
+    return __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, baseStyle), size === "auto" ? { width: "auto", flex: "1 1 auto" } : { width: size ? `${size}px` : "auto" }), {
       minWidth: `${minSize}px`,
-      maxWidth: isLastColumn ? "none" : `${maxSize || "none"}`
-    });
+      // maxWidth: isLastColumn && canResize ? 'none' : `${maxSize || 'none'}`,
+      maxWidth: canResize ? "none" : `${maxSize || "none"}`
+    }), ellipsisStyle);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1351,48 +1851,67 @@ var ResizableTable = ({ tableState }) => {
           "table",
           {
             style: {
-              width: `${table.getCenterTotalSize()}px`,
+              width: `${totalTableWidth}px`,
               minWidth: "100%",
               tableLayout: "fixed"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
-              const isPinned = header.column.getIsPinned();
-              const isLastLeftPinned = isPinned === "left" && header.column.getIsLastColumn("left");
-              const isFirstRightPinned = isPinned === "right" && header.column.getIsFirstColumn("right");
-              const columnRelativeDepth = header.depth - header.column.depth;
-              if (!header.isPlaceholder && columnRelativeDepth > 1 && header.id === header.column.id) {
-                return null;
-              }
-              let rowSpan = 1;
-              if (header.isPlaceholder) {
-                const leafs = header.getLeafHeaders();
-                rowSpan = leafs[leafs.length - 1].depth - header.depth;
-              }
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                TableHead,
-                {
-                  "data-last-left-pinned": isLastLeftPinned,
-                  "data-first-right-pinned": isFirstRightPinned,
-                  "data-pinned": isPinned,
-                  style: getResizableCellStyle(header.column, true),
-                  colSpan: header.colSpan,
-                  rowSpan,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header }),
-                    header.column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
-                      TableResizer,
-                      __spreadValues({}, {
-                        onDoubleClick: () => header.column.resetSize(),
-                        onMouseDown: header.getResizeHandler(),
-                        onTouchStart: header.getResizeHandler(),
-                        className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`
-                      })
-                    )
-                  ]
-                },
-                header.id
-              );
-            }) }, headerGroup.id)) })
+            children: /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup, i) => {
+              const rowStyle = typeof headerRowStyle === "function" ? headerRowStyle(i, headerGroup) : headerRowStyle;
+              return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { style: rowStyle, children: headerGroup.headers.map((header) => {
+                const isPinned = header.column.getIsPinned();
+                const leafHeaders = header.getLeafHeaders();
+                const hasLastLeftPinnedLeaf = leafHeaders.some(
+                  (leaf) => leaf.column.getIsPinned() === "left" && leaf.column.getIsLastColumn("left")
+                );
+                const hasFirstRightPinnedLeaf = leafHeaders.some(
+                  (leaf) => leaf.column.getIsPinned() === "right" && leaf.column.getIsFirstColumn("right")
+                );
+                const isLastLeftPinned = isPinned === "left" && header.column.getIsLastColumn("left") || hasLastLeftPinnedLeaf;
+                const isFirstRightPinned = isPinned === "right" && header.column.getIsFirstColumn("right") || hasFirstRightPinnedLeaf;
+                const columnRelativeDepth = header.depth - header.column.depth;
+                if (!header.isPlaceholder && columnRelativeDepth > 1 && header.id === header.column.id) {
+                  return null;
+                }
+                let rowSpan = 1;
+                if (header.isPlaceholder) {
+                  const leafs = header.getLeafHeaders();
+                  rowSpan = leafs[leafs.length - 1].depth - header.depth;
+                }
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  TableHead,
+                  {
+                    "data-last-left-pinned": isLastLeftPinned,
+                    "data-first-right-pinned": isFirstRightPinned,
+                    "data-pinned": isPinned,
+                    style: __spreadValues(__spreadValues({}, getResizableCellStyle(header.column, true)), rowStyle && {
+                      backgroundColor: rowStyle.backgroundColor,
+                      height: rowStyle.height,
+                      maxHeight: rowStyle.maxHeight,
+                      minHeight: rowStyle.minHeight
+                    }),
+                    colSpan: header.colSpan,
+                    rowSpan,
+                    sortable: getTableHeadSortModel(header).showSortMenu,
+                    filterable: header.column.getCanFilter(),
+                    "data-sortable": getTableHeadSortModel(header).showSortMenu,
+                    "data-filterable": header.column.getCanFilter(),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header }),
+                      header.column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
+                        TableResizer,
+                        __spreadValues({}, {
+                          onDoubleClick: () => header.column.resetSize(),
+                          onMouseDown: header.getResizeHandler(),
+                          onTouchStart: header.getResizeHandler(),
+                          className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`
+                        })
+                      )
+                    ]
+                  },
+                  header.id
+                );
+              }) }, headerGroup.id);
+            }) })
           }
         )
       }
@@ -1401,146 +1920,1560 @@ var ResizableTable = ({ tableState }) => {
       "table",
       {
         style: {
-          width: `${table.getCenterTotalSize()}px`,
+          width: `${totalTableWidth}px`,
           minWidth: "100%",
           tableLayout: "fixed"
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
           TableCell,
           {
-            colSpan: table.getAllColumns().length,
+            colSpan: table.getAllColumns().length,
+            style: {
+              height: "200px",
+              textAlign: "center",
+              verticalAlign: "middle"
+            },
+            children: children || emptyElement
+          }
+        ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          paddingTop > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) }),
+          displayedRows.map((rowObj, i) => {
+            const isVirtual = "virtualRow" in rowObj && rowObj.virtualRow;
+            const row = rowObj.row;
+            const cells = typeof row.getVisibleCells === "function" ? row.getVisibleCells() : row;
+            const rowStyle = typeof bodyRowStyle === "function" ? bodyRowStyle(i, row.original) : bodyRowStyle;
+            const cellBackgroundColor = rowStyle == null ? void 0 : rowStyle.backgroundColor;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableRow,
+              {
+                "data-index": isVirtual ? rowObj.virtualRow.index : i,
+                onClick: () => {
+                  onClickRow == null ? void 0 : onClickRow(row.original);
+                },
+                className: onClickRow !== void 0 ? "clickable" : "",
+                style: rowStyle,
+                children: cells.map((cell) => {
+                  var _a, _b, _c, _d;
+                  const isPinned = cell.column.getIsPinned();
+                  const isLastLeftPinned = isPinned === "left" && cell.column.getIsLastColumn("left");
+                  const isFirstRightPinned = isPinned === "right" && cell.column.getIsFirstColumn("right");
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    TableCell,
+                    {
+                      "data-last-left-pinned": isLastLeftPinned,
+                      "data-first-right-pinned": isFirstRightPinned,
+                      "data-no-hover": getColumnActiveHoverDataAttribute(
+                        (_a = cell.column.columnDef.meta) == null ? void 0 : _a.activeHover,
+                        cell.row.original
+                      ),
+                      "data-has-custom-style": ((_d = (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.cellProps) == null ? void 0 : _c.style) == null ? void 0 : _d.backgroundColor) ? "true" : void 0,
+                      style: __spreadValues(__spreadValues({}, getResizableCellStyle(cell.column)), cellBackgroundColor && {
+                        backgroundColor: cellBackgroundColor
+                      }),
+                      children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+                    },
+                    cell.id
+                  );
+                })
+              },
+              typeof row.id !== "undefined" ? row.id : i
+            );
+          }),
+          paddingBottom > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }),
+          emptyRowCount !== 0 && displayedRows.length < emptyRowCount && Array.from({ length: emptyRowCount - displayedRows.length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-empty": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            TableCell,
+            {
+              colSpan: table.getAllColumns().length,
+              style: {
+                height: `${60}px`
+              }
+            }
+          ) }, `empty-row-${index}`))
+        ] }) })
+      }
+    ) }) })
+  ] });
+};
+var distributeResponsiveWidths = ({
+  baseWidths,
+  autoIndexes,
+  maxWidths,
+  targetTotalWidth
+}) => {
+  const widths = [...baseWidths];
+  const baseTotal = baseWidths.reduce((sum, width) => sum + width, 0);
+  let remaining = Math.max(0, targetTotalWidth - baseTotal);
+  if (remaining === 0 || autoIndexes.length === 0)
+    return widths;
+  const growable = new Set(autoIndexes);
+  while (remaining > 0.01 && growable.size > 0) {
+    const share = remaining / growable.size;
+    let distributed = 0;
+    Array.from(growable).forEach((index) => {
+      var _a;
+      const maxWidth = (_a = maxWidths[index]) != null ? _a : Number.POSITIVE_INFINITY;
+      const capacity = Math.max(0, maxWidth - widths[index]);
+      const delta = Math.min(share, capacity);
+      widths[index] += delta;
+      distributed += delta;
+      if (capacity <= share + 0.01)
+        growable.delete(index);
+    });
+    if (distributed <= 0.01)
+      break;
+    remaining -= distributed;
+  }
+  return widths;
+};
+var useResponsiveViewportWidth = (tableContainerRef, headerRef) => {
+  const subscribe = React3.useCallback(
+    (onStoreChange) => {
+      let rafId = null;
+      const notifyWithBatch = () => {
+        if (rafId !== null)
+          return;
+        rafId = window.requestAnimationFrame(() => {
+          rafId = null;
+          onStoreChange();
+        });
+      };
+      const resizeObserver = new ResizeObserver(() => {
+        notifyWithBatch();
+      });
+      if (tableContainerRef.current)
+        resizeObserver.observe(tableContainerRef.current);
+      if (headerRef.current)
+        resizeObserver.observe(headerRef.current);
+      window.addEventListener("resize", notifyWithBatch);
+      return () => {
+        if (rafId !== null) {
+          window.cancelAnimationFrame(rafId);
+          rafId = null;
+        }
+        resizeObserver.disconnect();
+        window.removeEventListener("resize", notifyWithBatch);
+      };
+    },
+    [tableContainerRef, headerRef]
+  );
+  const getSnapshot = React3.useCallback(
+    () => {
+      var _a, _b, _c, _d;
+      return (_d = (_c = (_a = tableContainerRef.current) == null ? void 0 : _a.clientWidth) != null ? _c : (_b = headerRef.current) == null ? void 0 : _b.clientWidth) != null ? _d : 0;
+    },
+    [tableContainerRef, headerRef]
+  );
+  return React3.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+var useResponsiveColumnLayout = ({
+  unpinnedColumns,
+  leftPinnedColumns,
+  rightPinnedColumns,
+  viewportWidth
+}) => {
+  const getColumnMaxSize = React3.useCallback((column) => {
+    var _a;
+    const maxSize = (_a = column == null ? void 0 : column.columnDef) == null ? void 0 : _a.maxSize;
+    return typeof maxSize === "number" && maxSize > 0 ? maxSize : Number.POSITIVE_INFINITY;
+  }, []);
+  const getActualColumnSize = React3.useCallback(
+    (column) => {
+      var _a;
+      if (!column)
+        return 150;
+      const tableSize = (_a = column.getSize) == null ? void 0 : _a.call(column);
+      if (typeof tableSize === "number" && Number.isFinite(tableSize) && tableSize > 0)
+        return tableSize;
+      const size = column.columnDef.size;
+      if (typeof size === "number" && size > 0)
+        return size;
+      const minSize = column.columnDef.minSize;
+      if (typeof minSize === "number" && minSize > 0) {
+        return Math.min(minSize, getColumnMaxSize(column));
+      }
+      return Math.min(150, getColumnMaxSize(column));
+    },
+    [getColumnMaxSize]
+  );
+  const leftPinnedWidth = React3.useMemo(
+    () => leftPinnedColumns.reduce((sum, header) => sum + getActualColumnSize(header.column), 0),
+    [leftPinnedColumns, getActualColumnSize]
+  );
+  const rightPinnedWidth = React3.useMemo(
+    () => rightPinnedColumns.reduce((sum, header) => sum + getActualColumnSize(header.column), 0),
+    [rightPinnedColumns, getActualColumnSize]
+  );
+  const baseUnpinnedWidths = React3.useMemo(
+    () => unpinnedColumns.map((header) => getActualColumnSize(header.column)),
+    [unpinnedColumns, getActualColumnSize]
+  );
+  const autoColumnIndexes = React3.useMemo(
+    () => unpinnedColumns.map((header, index) => ({ index, size: header.column.columnDef.size })).filter(({ size }) => typeof size !== "number").map(({ index }) => index),
+    [unpinnedColumns]
+  );
+  const baseUnpinnedWidth = React3.useMemo(
+    () => baseUnpinnedWidths.reduce((sum, width) => sum + width, 0),
+    [baseUnpinnedWidths]
+  );
+  const availableUnpinnedWidth = Math.max(0, viewportWidth - leftPinnedWidth - rightPinnedWidth);
+  const targetUnpinnedWidth = Math.max(baseUnpinnedWidth, availableUnpinnedWidth);
+  const unpinnedMaxWidths = React3.useMemo(
+    () => unpinnedColumns.map((header) => getColumnMaxSize(header.column)),
+    [getColumnMaxSize, unpinnedColumns]
+  );
+  const computedUnpinnedWidths = React3.useMemo(
+    () => distributeResponsiveWidths({
+      baseWidths: baseUnpinnedWidths,
+      autoIndexes: autoColumnIndexes,
+      maxWidths: unpinnedMaxWidths,
+      targetTotalWidth: targetUnpinnedWidth
+    }),
+    [autoColumnIndexes, baseUnpinnedWidths, targetUnpinnedWidth, unpinnedMaxWidths]
+  );
+  const totalUnpinnedWidth = React3.useMemo(
+    () => computedUnpinnedWidths.reduce((sum, width) => sum + width, 0),
+    [computedUnpinnedWidths]
+  );
+  const getUnpinnedColumnWidth = React3.useCallback(
+    (index) => {
+      var _a;
+      return (_a = computedUnpinnedWidths[index]) != null ? _a : 150;
+    },
+    [computedUnpinnedWidths]
+  );
+  const totalTableWidth = React3.useMemo(
+    () => leftPinnedWidth + totalUnpinnedWidth + rightPinnedWidth,
+    [leftPinnedWidth, totalUnpinnedWidth, rightPinnedWidth]
+  );
+  return {
+    getActualColumnSize,
+    getUnpinnedColumnWidth,
+    totalUnpinnedWidth,
+    totalTableWidth
+  };
+};
+var PinnedColumnEdgeShadow = styled3__default.default.div`
+  position: absolute;
+  top: 0;
+  right: -4px;
+  height: 100%;
+  width: 4px;
+  pointer-events: none;
+  z-index: 11;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
+`;
+var VirtualTableRoot = styled3__default.default.div`
+  position: relative;
+  width: 100%;
+`;
+var VirtualTableScrollAreaInner = styled3__default.default.div`
+  position: relative;
+  width: 100%;
+`;
+var VirtualTableHeaderRoot = styled3__default.default.div`
+  width: 100%;
+  z-index: 11;
+  position: sticky;
+  top: 0;
+  overflow-x: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+var VirtualTableHeaderInner = styled3__default.default.div`
+  background-color: ${base.colorTokens.neutral100};
+`;
+var VirtualTableHeaderRow = styled3__default.default.div`
+  display: flex;
+  width: ${({ $tableWidthPx }) => `${$tableWidthPx}px`};
+  min-width: 100%;
+`;
+var VirtualTableGroupHeaderCell = styled3__default.default.div`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  height: 48px;
+  font-weight: 400;
+  line-height: 16px;
+  font-size: 13px;
+  border-bottom: 1px solid ${base.colorTokens.neutral200};
+  background-color: ${base.colorTokens.neutral100};
+  box-sizing: border-box;
+  border-right: 1px solid ${base.colorTokens.neutral200};
+
+  &[data-last-left-pinned='true'] {
+    border-right: none;
+  }
+
+  position: relative;
+  z-index: 0;
+
+  &[data-pinned='left'],
+  &[data-pinned='right'] {
+    position: sticky;
+    z-index: 10;
+  }
+`;
+var VirtualTableLeafHeaderPinnedLeft = styled3__default.default.div`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  height: 48px;
+  font-weight: 400;
+  line-height: 16px;
+  font-size: 13px;
+  border-bottom: 1px solid ${base.colorTokens.neutral200};
+  background-color: ${base.colorTokens.neutral100};
+  box-sizing: border-box;
+  border-right: 1px solid ${base.colorTokens.neutral200};
+  position: sticky;
+  z-index: 10;
+
+  &[data-last-left-pinned='true'] {
+    border-right: none;
+  }
+`;
+var VirtualTableVirtualizedColumnsOuter = styled3__default.default.div`
+  display: flex;
+  width: ${({ $unpinnedWidthPx }) => `${$unpinnedWidthPx}px`};
+  min-width: ${({ $unpinnedWidthPx }) => `${$unpinnedWidthPx}px`};
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+var VirtualTableHorizontalVirtualTrack = styled3__default.default.div`
+  display: flex;
+  transform: translateX(${(p) => p.$translateX}px);
+  will-change: transform;
+  ${({ $fillHeight }) => $fillHeight ? `height: 100%;` : ""}
+`;
+var VirtualTableLeafHeaderUnpinnedCell = styled3__default.default.div`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  height: 48px;
+  font-weight: 400;
+  line-height: 16px;
+  font-size: 13px;
+  border-bottom: 1px solid ${base.colorTokens.neutral200};
+  border-right: 1px solid ${base.colorTokens.neutral200};
+  background-color: ${base.colorTokens.neutral100};
+  box-sizing: border-box;
+  flex-shrink: 0;
+`;
+var VirtualTableLeafHeaderPinnedRight = styled3__default.default.div`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  height: 48px;
+  font-weight: 400;
+  line-height: 16px;
+  font-size: 13px;
+  border-bottom: 1px solid ${base.colorTokens.neutral200};
+  border-right: none;
+  background-color: ${base.colorTokens.neutral100};
+  box-sizing: border-box;
+  position: sticky;
+  z-index: 10;
+`;
+var VirtualTableBodyRow = styled3__default.default.div`
+  display: flex;
+  width: ${({ $tableWidthPx }) => `${$tableWidthPx}px`};
+  min-width: 100%;
+  height: ${({ $rowHeightPx }) => `${$rowHeightPx != null ? $rowHeightPx : 60}px`};
+  min-height: ${({ $rowHeightPx }) => `${$rowHeightPx != null ? $rowHeightPx : 60}px`};
+  border-bottom: 1px solid ${base.colorTokens.neutral200};
+`;
+var VirtualTableBodyPinnedCell = styled3__default.default.div`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  height: 100%;
+  background-color: ${base.colorTokens.neutral0};
+  position: sticky;
+  z-index: 10;
+  box-sizing: border-box;
+`;
+var VirtualTableBodyUnpinnedSlice = styled3__default.default.div`
+  display: flex;
+  width: ${({ $unpinnedWidthPx }) => `${$unpinnedWidthPx}px`};
+  min-width: ${({ $unpinnedWidthPx }) => `${$unpinnedWidthPx}px`};
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+var VirtualTableBodyUnpinnedCell = styled3__default.default.div`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  height: 100%;
+  background-color: ${base.colorTokens.neutral0};
+  box-sizing: border-box;
+  flex-shrink: 0;
+`;
+var VirtualTableBodyGrid = styled3__default.default.div`
+  display: grid;
+  height: ${({ $totalHeightPx }) => `${$totalHeightPx}px`};
+  position: relative;
+  color: ${base.colorTokens.neutral700};
+  font-size: 14px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+var VirtualTableVerticalVirtualTrack = styled3__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(${(p) => p.$translateY}px);
+  will-change: transform;
+  display: flex;
+  flex-direction: column;
+`;
+var CellSkeleton2 = () => /* @__PURE__ */ jsxRuntime.jsx(base.Skeleton, { styleVar: "rectangle", width: "80%", height: "20px" });
+var GroupHeaderRow = React3__default.default.memo(({ headerGroup, getActualColumnSize }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
+    const leafHeaders = header.getLeafHeaders ? header.getLeafHeaders() : [];
+    const groupId = header.column.id;
+    const filteredLeafHeaders = leafHeaders.filter((leaf) => leaf.column.id !== groupId);
+    const firstLeaf = filteredLeafHeaders[0];
+    const firstLeafPinned = firstLeaf == null ? void 0 : firstLeaf.column.getIsPinned();
+    const totalWidth = filteredLeafHeaders.reduce((sum, leaf) => {
+      return sum + getActualColumnSize(leaf.column);
+    }, 0);
+    const hasLastLeftPinnedLeaf = filteredLeafHeaders.some(
+      (leaf) => leaf.column.getIsPinned() === "left" && leaf.column.getIsLastColumn("left")
+    );
+    const hasFirstRightPinnedLeaf = filteredLeafHeaders.some(
+      (leaf) => leaf.column.getIsPinned() === "right" && leaf.column.getIsFirstColumn("right")
+    );
+    const positionStyle = {
+      width: `${totalWidth}px`,
+      minWidth: `${totalWidth}px`,
+      maxWidth: `${totalWidth}px`,
+      left: firstLeafPinned === "left" ? `${firstLeaf == null ? void 0 : firstLeaf.column.getStart("left")}px` : void 0,
+      right: firstLeafPinned === "right" ? `${firstLeaf == null ? void 0 : firstLeaf.column.getAfter("right")}px` : void 0
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      VirtualTableGroupHeaderCell,
+      {
+        "data-last-left-pinned": hasLastLeftPinnedLeaf,
+        "data-first-right-pinned": hasFirstRightPinnedLeaf,
+        "data-pinned": firstLeafPinned || void 0,
+        style: positionStyle,
+        children: [
+          header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header }),
+          hasLastLeftPinnedLeaf && /* @__PURE__ */ jsxRuntime.jsx(PinnedColumnEdgeShadow, {})
+        ]
+      },
+      header.id
+    );
+  }) });
+});
+GroupHeaderRow.displayName = "GroupHeaderRow";
+var LeafHeaderRow = React3__default.default.memo(
+  ({
+    leftPinnedColumns,
+    rightPinnedColumns,
+    unpinnedColumns,
+    virtualItems,
+    totalUnpinnedWidth,
+    getActualColumnSize,
+    getUnpinnedColumnWidth
+  }) => {
+    var _a, _b;
+    const leftPinnedPrepared = React3.useMemo(
+      () => leftPinnedColumns.map((header) => {
+        const isPinned = header.column.getIsPinned();
+        const isLastLeftPinned = isPinned === "left" && header.column.getIsLastColumn("left");
+        const headerWidth = getActualColumnSize(header.column);
+        const leftPosition = header.column.getStart("left");
+        return {
+          header,
+          isPinned,
+          isLastLeftPinned,
+          style: {
+            width: `${headerWidth}px`,
+            minWidth: `${headerWidth}px`,
+            left: `${leftPosition}px`
+          }
+        };
+      }),
+      [leftPinnedColumns, getActualColumnSize]
+    );
+    const rightPinnedPrepared = React3.useMemo(
+      () => rightPinnedColumns.map((header) => {
+        const isPinned = header.column.getIsPinned();
+        const isFirstRightPinned = isPinned === "right" && header.column.getIsFirstColumn("right");
+        const headerWidth = getActualColumnSize(header.column);
+        const rightPosition = header.column.getAfter("right");
+        return {
+          header,
+          isPinned,
+          isFirstRightPinned,
+          style: {
+            width: `${headerWidth}px`,
+            minWidth: `${headerWidth}px`,
+            right: `${rightPosition}px`
+          }
+        };
+      }),
+      [rightPinnedColumns, getActualColumnSize]
+    );
+    const virtualItemsLayoutKey = React3.useMemo(
+      () => virtualItems.map((v) => `${v.index}:${v.start}`).join("|"),
+      [virtualItems]
+    );
+    const unpinnedPrepared = React3.useMemo(() => {
+      return virtualItems.map((virtualColumn) => {
+        const header = unpinnedColumns[virtualColumn.index];
+        if (!header)
+          return null;
+        const columnWidth = getUnpinnedColumnWidth(virtualColumn.index);
+        return {
+          header,
+          style: {
+            width: `${columnWidth}px`,
+            minWidth: `${columnWidth}px`,
+            maxWidth: `${columnWidth}px`
+          }
+        };
+      });
+    }, [virtualItemsLayoutKey, unpinnedColumns, getUnpinnedColumnWidth]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      leftPinnedPrepared.map(({ header, isPinned, isLastLeftPinned, style }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        VirtualTableLeafHeaderPinnedLeft,
+        {
+          "data-last-left-pinned": isLastLeftPinned,
+          "data-pinned": isPinned,
+          style,
+          children: [
+            header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header }),
+            isLastLeftPinned && /* @__PURE__ */ jsxRuntime.jsx(PinnedColumnEdgeShadow, {})
+          ]
+        },
+        header.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(VirtualTableVirtualizedColumnsOuter, { $unpinnedWidthPx: totalUnpinnedWidth, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTableHorizontalVirtualTrack, { $translateX: (_b = (_a = virtualItems[0]) == null ? void 0 : _a.start) != null ? _b : 0, children: unpinnedPrepared.map((item) => {
+        if (!item)
+          return null;
+        const { header, style } = item;
+        return /* @__PURE__ */ jsxRuntime.jsx(VirtualTableLeafHeaderUnpinnedCell, { style, children: /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header }) }, header.id);
+      }) }) }),
+      rightPinnedPrepared.map(({ header, isPinned, isFirstRightPinned, style }) => /* @__PURE__ */ jsxRuntime.jsx(
+        VirtualTableLeafHeaderPinnedRight,
+        {
+          "data-first-right-pinned": isFirstRightPinned,
+          "data-pinned": isPinned,
+          style,
+          children: header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell_default, { header })
+        },
+        header.id
+      ))
+    ] });
+  }
+);
+LeafHeaderRow.displayName = "LeafHeaderRow";
+var VirtualTableHeader = ({
+  table,
+  headerRef,
+  getFixedCellStyle: _getFixedCellStyle,
+  tableContainerRef: _tableContainerRef,
+  scrollViewportRef: _scrollViewportRef,
+  onVirtualItemsChange,
+  onHeaderScroll,
+  viewportWidth
+}) => {
+  const headerGroups = table.getHeaderGroups();
+  const leafHeaderGroup = headerGroups[headerGroups.length - 1];
+  const allHeaders = React3.useMemo(() => {
+    const headers = (leafHeaderGroup == null ? void 0 : leafHeaderGroup.headers) || [];
+    return headers.filter((h) => {
+      const columns = h.column.columnDef.columns;
+      return !columns || columns.length === 0;
+    });
+  }, [leafHeaderGroup]);
+  const { leftPinnedColumns, rightPinnedColumns, unpinnedColumns } = React3.useMemo(() => {
+    const left = allHeaders.filter((h) => h.column.getIsPinned() === "left");
+    const right = allHeaders.filter((h) => h.column.getIsPinned() === "right");
+    const unpinned = allHeaders.filter((h) => !h.column.getIsPinned());
+    return {
+      leftPinnedColumns: left,
+      rightPinnedColumns: right,
+      unpinnedColumns: unpinned
+    };
+  }, [allHeaders]);
+  const { getActualColumnSize, getUnpinnedColumnWidth, totalUnpinnedWidth, totalTableWidth } = useResponsiveColumnLayout({
+    unpinnedColumns,
+    leftPinnedColumns,
+    rightPinnedColumns,
+    viewportWidth
+  });
+  const estimateSize = React3.useCallback((index) => getUnpinnedColumnWidth(index), [getUnpinnedColumnWidth]);
+  const columnVirtualizer = reactVirtual.useVirtualizer({
+    // flushSync는 중첩 렌더/레이아웃 효과와 충돌 시 경고를 유발하므로 비활성화
+    // useFlushSync: false,
+    count: unpinnedColumns.length,
+    getScrollElement: () => headerRef.current,
+    estimateSize,
+    horizontal: true,
+    overscan: 5
+  });
+  const virtualItems = columnVirtualizer.getVirtualItems();
+  React3__default.default.useEffect(() => {
+    if (onVirtualItemsChange) {
+      onVirtualItemsChange(virtualItems);
+    }
+  }, [virtualItems, onVirtualItemsChange]);
+  React3__default.default.useEffect(() => {
+    if (headerRef.current) {
+      const timeoutId = setTimeout(() => {
+        columnVirtualizer.measure();
+      }, 0);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [columnVirtualizer, headerRef]);
+  const handleHeaderScroll = React3.useCallback(() => {
+    if (!headerRef.current || !onHeaderScroll)
+      return;
+    onHeaderScroll();
+  }, [headerRef, onHeaderScroll]);
+  return /* @__PURE__ */ jsxRuntime.jsx(VirtualTableHeaderRoot, { ref: headerRef, onScroll: handleHeaderScroll, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTableHeaderInner, { children: headerGroups.map((headerGroup, groupIndex) => {
+    const isLeafRow = groupIndex === headerGroups.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsx(VirtualTableHeaderRow, { $tableWidthPx: totalTableWidth, children: isLeafRow ? /* @__PURE__ */ jsxRuntime.jsx(
+      LeafHeaderRow,
+      {
+        leftPinnedColumns,
+        rightPinnedColumns,
+        unpinnedColumns,
+        virtualItems,
+        totalUnpinnedWidth,
+        getActualColumnSize,
+        getUnpinnedColumnWidth
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(GroupHeaderRow, { headerGroup, getActualColumnSize }) }, headerGroup.id);
+  }) }) });
+};
+if (typeof VirtualTableHeader === "object" && VirtualTableHeader !== null) {
+  VirtualTableHeader.displayName = "VirtualTableHeader";
+}
+var TableBodyRow = React3__default.default.memo(
+  ({
+    row,
+    virtualRow,
+    rowVirtualizer,
+    getFixedCellStyle,
+    tableContainerRef: _tableContainerRef,
+    columnVirtualizer,
+    unpinnedColumns,
+    scrollMargin: _scrollMargin = 0,
+    totalUnpinnedWidth,
+    totalTableWidth,
+    getUnpinnedColumnWidth,
+    headerVirtualItems,
+    isLoading = false,
+    bodyRowStyle
+  }) => {
+    var _a, _b;
+    const { style: rowStyle, heightPx: rowHeightPx } = resolveBodyRowStyle(
+      bodyRowStyle,
+      virtualRow.index,
+      row.original
+    );
+    const cells = row.getVisibleCells();
+    const { leftPinnedCells, rightPinnedCells, unpinnedCells } = React3.useMemo(() => {
+      const left = cells.filter((cell) => cell.column.getIsPinned() === "left");
+      const right = cells.filter((cell) => cell.column.getIsPinned() === "right");
+      const unpinnedCellsMap = new Map(
+        cells.filter((cell) => !cell.column.getIsPinned()).map((cell) => [cell.column.id, cell])
+      );
+      const unpinned = unpinnedColumns.map((header) => unpinnedCellsMap.get(header.column.id)).filter((cell) => cell !== void 0);
+      return {
+        leftPinnedCells: left,
+        rightPinnedCells: right,
+        unpinnedCells: unpinned
+      };
+    }, [cells, unpinnedColumns]);
+    const hasPinned = React3.useMemo(() => cells.some((cell) => cell.column.getIsPinned()), [cells]);
+    const virtualItems = columnVirtualizer.getVirtualItems();
+    const effectiveVirtualItems = headerVirtualItems && headerVirtualItems.length > 0 ? headerVirtualItems : virtualItems;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      VirtualTableBodyRow,
+      {
+        "data-index": virtualRow.index,
+        "data-has-pinned": hasPinned,
+        ref: (node) => rowVirtualizer.measureElement(node),
+        $tableWidthPx: totalTableWidth,
+        $rowHeightPx: rowHeightPx,
+        style: rowStyle,
+        children: [
+          leftPinnedCells.map((cell) => {
+            var _a2, _b2, _c, _d, _e, _f;
+            const isPinned = cell.column.getIsPinned();
+            const isLastLeftPinned = isPinned === "left" && cell.column.getIsLastColumn("left");
+            const leftPosition = cell.column.getStart("left");
+            const size = cell.column.columnDef.size;
+            const minSize = cell.column.columnDef.minSize;
+            const cellWidth = typeof size === "number" && size > 0 ? size : typeof minSize === "number" && minSize > 0 ? minSize : 150;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              VirtualTableBodyPinnedCell,
+              {
+                "data-last-left-pinned": isLastLeftPinned,
+                "data-pinned": isPinned,
+                "data-no-hover": getColumnActiveHoverDataAttribute(
+                  (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.activeHover,
+                  cell.row.original
+                ),
+                "data-has-custom-style": ((_d = (_c = (_b2 = cell.column.columnDef.meta) == null ? void 0 : _b2.cellProps) == null ? void 0 : _c.style) == null ? void 0 : _d.backgroundColor) ? "true" : void 0,
+                style: __spreadProps(__spreadValues({}, ((_f = (_e = cell.column.columnDef.meta) == null ? void 0 : _e.cellProps) == null ? void 0 : _f.style) || {}), {
+                  width: `${cellWidth}px`,
+                  minWidth: `${cellWidth}px`,
+                  left: `${leftPosition}px`
+                }),
+                children: [
+                  isLoading ? /* @__PURE__ */ jsxRuntime.jsx(CellSkeleton2, {}) : reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()),
+                  isLastLeftPinned && /* @__PURE__ */ jsxRuntime.jsx(PinnedColumnEdgeShadow, {})
+                ]
+              },
+              cell.id
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(VirtualTableBodyUnpinnedSlice, { $unpinnedWidthPx: totalUnpinnedWidth, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTableHorizontalVirtualTrack, { $translateX: (_b = (_a = effectiveVirtualItems[0]) == null ? void 0 : _a.start) != null ? _b : 0, $fillHeight: true, children: effectiveVirtualItems.map((virtualColumn) => {
+            var _b2, _c, _d, _e;
+            const header = unpinnedColumns[virtualColumn.index];
+            if (!header)
+              return null;
+            const cell = unpinnedCells[virtualColumn.index];
+            if (!cell)
+              return null;
+            const baseStyle = getFixedCellStyle(cell.column);
+            const _a2 = baseStyle, restBaseStyle = __objRest(_a2, [
+              "left",
+              "right",
+              "position",
+              "width",
+              "transform"
+            ]);
+            const columnWidth = getUnpinnedColumnWidth(virtualColumn.index);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              VirtualTableBodyUnpinnedCell,
+              {
+                "data-no-hover": getColumnActiveHoverDataAttribute(
+                  (_b2 = cell.column.columnDef.meta) == null ? void 0 : _b2.activeHover,
+                  cell.row.original
+                ),
+                "data-has-custom-style": ((_e = (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.cellProps) == null ? void 0 : _d.style) == null ? void 0 : _e.backgroundColor) ? "true" : void 0,
+                style: __spreadProps(__spreadValues({}, restBaseStyle), {
+                  width: `${columnWidth}px`,
+                  minWidth: `${columnWidth}px`,
+                  maxWidth: `${columnWidth}px`
+                }),
+                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(CellSkeleton2, {}) : reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
+          }) }) }),
+          rightPinnedCells.map((cell) => {
+            var _a2, _b2, _c, _d, _e, _f;
+            const isPinned = cell.column.getIsPinned();
+            const isFirstRightPinned = isPinned === "right" && cell.column.getIsFirstColumn("right");
+            const rightPosition = cell.column.getAfter("right");
+            const size = cell.column.columnDef.size;
+            const minSize = cell.column.columnDef.minSize;
+            const cellWidth = typeof size === "number" && size > 0 ? size : typeof minSize === "number" && minSize > 0 ? minSize : 150;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              VirtualTableBodyPinnedCell,
+              {
+                "data-first-right-pinned": isFirstRightPinned,
+                "data-pinned": isPinned,
+                "data-no-hover": getColumnActiveHoverDataAttribute(
+                  (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.activeHover,
+                  cell.row.original
+                ),
+                "data-has-custom-style": ((_d = (_c = (_b2 = cell.column.columnDef.meta) == null ? void 0 : _b2.cellProps) == null ? void 0 : _c.style) == null ? void 0 : _d.backgroundColor) ? "true" : void 0,
+                style: __spreadProps(__spreadValues({}, ((_f = (_e = cell.column.columnDef.meta) == null ? void 0 : _e.cellProps) == null ? void 0 : _f.style) || {}), {
+                  width: `${cellWidth}px`,
+                  minWidth: `${cellWidth}px`,
+                  right: `${rightPosition}px`
+                }),
+                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(CellSkeleton2, {}) : reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
+          })
+        ]
+      }
+    );
+  },
+  (prevProps, nextProps) => {
+    var _a, _b;
+    if (prevProps.row.id !== nextProps.row.id)
+      return false;
+    if (prevProps.virtualRow.start !== nextProps.virtualRow.start)
+      return false;
+    if (prevProps.virtualRow.index !== nextProps.virtualRow.index)
+      return false;
+    if (prevProps.isLoading !== nextProps.isLoading)
+      return false;
+    if (prevProps.isRowSelected !== nextProps.isRowSelected)
+      return false;
+    const prevHeaderItems = prevProps.headerVirtualItems;
+    const nextHeaderItems = nextProps.headerVirtualItems;
+    if ((prevHeaderItems == null ? void 0 : prevHeaderItems.length) !== (nextHeaderItems == null ? void 0 : nextHeaderItems.length))
+      return false;
+    if (prevHeaderItems && nextHeaderItems && ((_a = prevHeaderItems[0]) == null ? void 0 : _a.index) !== ((_b = nextHeaderItems[0]) == null ? void 0 : _b.index))
+      return false;
+    if (prevProps.totalUnpinnedWidth !== nextProps.totalUnpinnedWidth)
+      return false;
+    if (prevProps.totalTableWidth !== nextProps.totalTableWidth)
+      return false;
+    return true;
+  }
+);
+if (typeof TableBodyRow === "object" && TableBodyRow !== null) {
+  TableBodyRow.displayName = "TableBodyRow";
+}
+var VirtualTableBody = React3__default.default.memo(
+  ({
+    table,
+    tableContainerRef,
+    getFixedCellStyle,
+    headerRef,
+    headerVirtualItems,
+    bodyRef,
+    scrollViewportRef,
+    onBodyScroll,
+    viewportWidth,
+    bodyRowStyle
+  }) => {
+    var _a, _b;
+    const { rows } = table.getRowModel();
+    const { isLoading } = useTable();
+    const currentHeaderGroups = table.getHeaderGroups();
+    const leafHeaderGroup = currentHeaderGroups[currentHeaderGroups.length - 1];
+    const allHeaders = React3.useMemo(() => {
+      const headers = (leafHeaderGroup == null ? void 0 : leafHeaderGroup.headers) || [];
+      const filtered = headers.filter((h) => {
+        const columns = h.column.columnDef.columns;
+        return !columns || columns.length === 0;
+      });
+      return filtered;
+    }, [leafHeaderGroup]);
+    const unpinnedColumns = React3.useMemo(() => allHeaders.filter((h) => !h.column.getIsPinned()), [allHeaders]);
+    const leftPinnedColumns = React3.useMemo(() => allHeaders.filter((h) => h.column.getIsPinned() === "left"), [allHeaders]);
+    const rightPinnedColumns = React3.useMemo(
+      () => allHeaders.filter((h) => h.column.getIsPinned() === "right"),
+      [allHeaders]
+    );
+    const { getUnpinnedColumnWidth, totalUnpinnedWidth, totalTableWidth } = useResponsiveColumnLayout({
+      unpinnedColumns,
+      leftPinnedColumns,
+      rightPinnedColumns,
+      viewportWidth
+    });
+    const [headerHeight, setHeaderHeight] = React3__default.default.useState(48);
+    React3__default.default.useEffect(() => {
+      if (headerRef.current) {
+        const updateHeaderHeight = () => {
+          if (headerRef.current) {
+            const firstRow = headerRef.current.querySelector("div > div");
+            if (firstRow) {
+              const height = firstRow.getBoundingClientRect().height;
+              if (height > 0) {
+                setHeaderHeight(height);
+              }
+            } else {
+              const height = headerRef.current.getBoundingClientRect().height;
+              if (height > 0) {
+                setHeaderHeight(height);
+              }
+            }
+          }
+        };
+        const timeoutId = setTimeout(updateHeaderHeight, 0);
+        const resizeObserver = new ResizeObserver(() => {
+          updateHeaderHeight();
+        });
+        resizeObserver.observe(headerRef.current);
+        return () => {
+          clearTimeout(timeoutId);
+          resizeObserver.disconnect();
+        };
+      }
+    }, [headerRef]);
+    const estimateSize = React3.useCallback((index) => getUnpinnedColumnWidth(index), [getUnpinnedColumnWidth]);
+    const columnVirtualizer = reactVirtual.useVirtualizer({
+      // 헤더와 동일: flushSync 경고 방지
+      // useFlushSync: false,
+      count: unpinnedColumns.length,
+      getScrollElement: () => headerRef.current || bodyRef.current,
+      estimateSize,
+      horizontal: true,
+      overscan: 5
+    });
+    const getItemKey = React3.useCallback(
+      (index) => {
+        const row = rows[index];
+        return (row == null ? void 0 : row.id) || `row-${index}`;
+      },
+      [rows]
+    );
+    const rowVirtualizer = reactVirtual.useVirtualizer({
+      // useFlushSync: false,
+      count: rows.length,
+      getScrollElement: () => (scrollViewportRef == null ? void 0 : scrollViewportRef.current) || tableContainerRef.current,
+      estimateSize: (index) => {
+        var _a2;
+        return resolveBodyRowStyle(bodyRowStyle, index, (_a2 = rows[index]) == null ? void 0 : _a2.original).heightPx;
+      },
+      overscan: 10,
+      // row의 안정적인 key를 제공하여 sync 상태 변경 시에도 row 추적 안정화
+      getItemKey
+      // 실제 row 높이를 측정하여 깜빡임 방지 (DOM layout 측정 비활성화)
+      // measureElement,
+    });
+    const virtualRows = rowVirtualizer.getVirtualItems();
+    React3__default.default.useEffect(() => {
+      const scrollElement = (scrollViewportRef == null ? void 0 : scrollViewportRef.current) || tableContainerRef.current;
+      if (scrollElement) {
+        const timeoutId = setTimeout(() => {
+          rowVirtualizer.measure();
+          columnVirtualizer.measure();
+        }, 0);
+        return () => clearTimeout(timeoutId);
+      }
+    }, [rowVirtualizer, columnVirtualizer, scrollViewportRef, tableContainerRef]);
+    const handleBodyScroll = React3.useCallback(() => {
+      if (!onBodyScroll)
+        return;
+      onBodyScroll();
+    }, [onBodyScroll]);
+    const bodyGridHeightPx = rowVirtualizer.getTotalSize();
+    return /* @__PURE__ */ jsxRuntime.jsx(VirtualTableBodyGrid, { ref: bodyRef, $totalHeightPx: bodyGridHeightPx, onScroll: handleBodyScroll, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTableVerticalVirtualTrack, { $translateY: (_b = (_a = virtualRows[0]) == null ? void 0 : _a.start) != null ? _b : 0, children: virtualRows.map((virtualRow) => {
+      const row = rows[virtualRow.index];
+      const rowKey = row.id || `row-${virtualRow.index}`;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TableBodyRow,
+        {
+          row,
+          isRowSelected: row.getIsSelected(),
+          virtualRow,
+          rowVirtualizer,
+          getFixedCellStyle,
+          tableContainerRef,
+          columnVirtualizer,
+          bodyRowStyle,
+          unpinnedColumns,
+          scrollMargin: headerHeight,
+          totalUnpinnedWidth,
+          totalTableWidth,
+          getUnpinnedColumnWidth,
+          headerVirtualItems,
+          isLoading
+        },
+        rowKey
+      );
+    }) }) });
+  }
+);
+if (typeof VirtualTableBody === "object" && VirtualTableBody !== null) {
+  VirtualTableBody.displayName = "VirtualTableBody";
+}
+function VirtualTable({
+  maxHeight = "800px",
+  bodyRowStyle
+}) {
+  const tableContainerRef = React3.useRef(null);
+  const scrollAreaRef = React3.useRef(null);
+  const scrollViewportRef = React3.useRef(null);
+  const { table, tableScrollRef, bodyRef, headerRef } = useTable();
+  const [headerVirtualItems, setHeaderVirtualItems] = React3__default.default.useState([]);
+  const viewportWidth = useResponsiveViewportWidth(tableContainerRef, headerRef);
+  React3__default.default.useEffect(() => {
+    var _a;
+    if ((_a = scrollAreaRef.current) == null ? void 0 : _a.view) {
+      scrollViewportRef.current = scrollAreaRef.current.view;
+      scrollViewportRef.current.dispatchEvent(new Event("scroll", { bubbles: true }));
+    }
+  }, []);
+  const handleBodyScroll = React3.useCallback(() => {
+    if (!bodyRef.current)
+      return;
+    const bodyScrollLeft = bodyRef.current.scrollLeft;
+    if (headerRef.current) {
+      headerRef.current.scrollLeft = bodyScrollLeft;
+    }
+    if (tableScrollRef == null ? void 0 : tableScrollRef.current) {
+      tableScrollRef.current.scrollLeft = bodyScrollLeft;
+    }
+  }, [tableScrollRef]);
+  const handleHeaderScroll = React3.useCallback(() => {
+    if (!headerRef.current)
+      return;
+    const headerScrollLeft = headerRef.current.scrollLeft;
+    if (bodyRef.current) {
+      bodyRef.current.scrollLeft = headerScrollLeft;
+    }
+    if (tableScrollRef == null ? void 0 : tableScrollRef.current) {
+      tableScrollRef.current.scrollLeft = headerScrollLeft;
+    }
+  }, [tableScrollRef]);
+  const columnStyleCacheRef = React3.useRef(/* @__PURE__ */ new WeakMap());
+  const getColumnStyle = React3.useCallback(
+    (column, isHeader) => {
+      var _a, _b, _c, _d;
+      const cached = columnStyleCacheRef.current.get(column);
+      if (cached) {
+        return isHeader ? cached.header : cached.cell;
+      }
+      const pinningStyles = getCommonPinningStyles(column);
+      const size = column.columnDef.size;
+      const minSize = column.columnDef.minSize;
+      const maxSize = column.columnDef.maxSize;
+      const widthStyle = size === 0 ? { width: "100%" } : {
+        width: pinningStyles.width || `${size}px`,
+        minWidth: `${minSize}px`,
+        maxWidth: `${maxSize}px`
+      };
+      const headerStyle = __spreadValues(__spreadValues(__spreadValues({}, pinningStyles), ((_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerProps) == null ? void 0 : _b.style) || {}), widthStyle);
+      const cellStyle = __spreadValues(__spreadValues(__spreadValues({}, pinningStyles), ((_d = (_c = column.columnDef.meta) == null ? void 0 : _c.cellProps) == null ? void 0 : _d.style) || {}), widthStyle);
+      columnStyleCacheRef.current.set(column, {
+        header: headerStyle,
+        cell: cellStyle
+      });
+      return isHeader ? headerStyle : cellStyle;
+    },
+    []
+    // 의존성 없음 - 컬럼 객체 자체가 변경되면 WeakMap에서 자동으로 가비지 컬렉션됨
+  );
+  const getFixedCellStyle = React3.useCallback(
+    (column, isHeader = false) => {
+      return getColumnStyle(column, isHeader);
+    },
+    [getColumnStyle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(VirtualTableRoot, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VirtualTableHeader,
+      {
+        table,
+        headerRef,
+        getFixedCellStyle,
+        tableContainerRef,
+        scrollViewportRef,
+        onVirtualItemsChange: setHeaderVirtualItems,
+        onHeaderScroll: handleHeaderScroll,
+        viewportWidth
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollViewportRef, style: { maxHeight, overflowY: "auto", overflowX: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTableScrollAreaInner, { ref: tableContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+      VirtualTableBody,
+      {
+        table,
+        tableContainerRef,
+        getFixedCellStyle,
+        headerRef,
+        headerVirtualItems,
+        bodyRef,
+        scrollViewportRef,
+        onBodyScroll: handleBodyScroll,
+        viewportWidth,
+        bodyRowStyle
+      }
+    ) }) })
+  ] });
+}
+var TableMain = (props) => {
+  const {
+    fixedColumns = [],
+    useVirtualization = false,
+    isSticky = true,
+    stickyHeaderTopPosition = 120,
+    children,
+    maxHeight,
+    emptyRowCount = 8,
+    enableDragDrop = false,
+    dragColWidth = 40,
+    onRowReorder,
+    footerRowProps,
+    headerRowStyle,
+    bodyRowStyle,
+    containerStyle
+  } = props;
+  const { table, hasToolbar, hasFilterBar, columnResizing } = useTable();
+  const { rows } = table.getRowModel();
+  const shouldFixDragHandle = enableDragDrop && fixedColumns.some((fc) => fc.index === 0 && fc.position === "left");
+  React3.useEffect(() => {
+    const pinningState = {
+      left: [],
+      right: []
+    };
+    fixedColumns.forEach(({ index, position }) => {
+      if (enableDragDrop && index === 0) {
+        return;
+      }
+      const actualIndex = enableDragDrop ? index - 1 : index;
+      const column = table.getAllLeafColumns()[actualIndex];
+      if (column == null ? void 0 : column.id) {
+        pinningState[position].push(column.id);
+      }
+    });
+    table.setColumnPinning(pinningState);
+  }, []);
+  const isEmpty = rows.length === 0;
+  let emptyElement;
+  React3__default.default.Children.forEach(children, (child) => {
+    if (React3__default.default.isValidElement(child) && child.type === TableEmpty) {
+      emptyElement = child;
+    }
+  });
+  const nonVirtualizedRows = rows.map((row) => __spreadValues({ row }, row));
+  const tableState = {
+    displayedRows: nonVirtualizedRows,
+    paddingTop: 0,
+    paddingBottom: 0,
+    isEmpty,
+    emptyElement,
+    children,
+    maxHeight,
+    hasToolbar,
+    isSticky,
+    stickyHeaderTopPosition,
+    emptyRowCount,
+    enableDragDrop,
+    dragColWidth,
+    shouldFixDragHandle,
+    onRowReorder,
+    footerRowProps,
+    headerRowStyle,
+    bodyRowStyle
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRootContainer, { hasFilterBar, hasToolbar, style: containerStyle, children: useVirtualization ? /* @__PURE__ */ jsxRuntime.jsx(VirtualTable, { maxHeight, bodyRowStyle }) : (
+    // <VirtualizedContent
+    //   {...props}
+    //   rows={rows}
+    //   emptyElement={emptyElement}
+    //   isEmpty={isEmpty}
+    //   enableDragDrop={enableDragDrop}
+    // />
+    columnResizing ? /* @__PURE__ */ jsxRuntime.jsx(ResizableTable, { tableState }) : /* @__PURE__ */ jsxRuntime.jsx(FixedTable, { tableState })
+  ) });
+};
+var useIntersectionObserver = (target, callback, options) => {
+  React3.useEffect(() => {
+    if (!target.current) {
+      return;
+    }
+    const observer = new IntersectionObserver(callback, options);
+    observer.observe(target.current);
+    return () => observer.disconnect();
+  }, [callback]);
+};
+var TablePagination = ({
+  total,
+  defaultPageSize,
+  leftSource,
+  children,
+  pageSizeList = PAGE_SIZE,
+  setCurrentPage,
+  notSizeOption = false,
+  currentPage,
+  showPagination = true,
+  sizeVar = "S",
+  hasPaddingInline = true
+}) => {
+  const { table, headerRef, bodyRef, tableScrollRef, footerRef, hasFilterBar, hasToolbar, isVirtualTableLayout } = useTable();
+  const { pageSize, pageIndex } = table.getState().pagination;
+  const [isEndOfPage, setIsEndOfPage] = React3.useState(false);
+  const handleScroll = React3.useCallback(() => {
+    if (!headerRef.current || !bodyRef.current || !tableScrollRef.current) {
+      return;
+    }
+    const scrollLeft = tableScrollRef.current.scrollLeft;
+    headerRef.current.scrollLeft = scrollLeft;
+    bodyRef.current.scrollLeft = scrollLeft;
+  }, []);
+  const onIntersect = React3.useCallback(
+    (entries) => __async(void 0, null, function* () {
+      const entry = entries[0];
+      entry.isIntersecting ? setIsEndOfPage(true) : setIsEndOfPage(false);
+    }),
+    [isEndOfPage]
+  );
+  useIntersectionObserver(footerRef, onIntersect, {
+    threshold: 1,
+    rootMargin: "0px 0px -1px"
+  });
+  const handlePageChange = React3.useCallback(
+    (updater) => {
+      const newPage = typeof updater === "function" ? updater(pageIndex) : updater;
+      table.setPageIndex(newPage);
+      setCurrentPage == null ? void 0 : setCurrentPage({ pageIndex: newPage, pageSize });
+    },
+    [pageIndex, pageSize, table, setCurrentPage]
+  );
+  const handlePageSizeChange = React3.useCallback(
+    (value) => {
+      const newSize = Number(value);
+      table.setPageSize(newSize);
+      table.setPageIndex(0);
+      setCurrentPage == null ? void 0 : setCurrentPage({ pageIndex: 0, pageSize: newSize });
+    },
+    [table, setCurrentPage]
+  );
+  const TableColumns = () => {
+    const leafColumns = table.getVisibleLeafColumns();
+    return /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: leafColumns.map((column) => {
+      const size = column.columnDef.size;
+      const minSize = column.columnDef.minSize;
+      const maxSize = column.columnDef.maxSize;
+      const style = size === 0 ? { width: "100%" } : {
+        width: `${size}px`,
+        minWidth: `${minSize}px`,
+        maxWidth: `${maxSize}px`
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx("col", { style }, column.id);
+    }) });
+  };
+  const renderRightSource = () => {
+    if (sizeVar === "XS") {
+      return null;
+    }
+    if (notSizeOption) {
+      return;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(PaginationSizeSelectorSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      base.Pagination.SizeSelector,
+      {
+        data: pageSizeList.map((item) => ({ label: item.label, value: item.key })),
+        pageSize: `${pageSize}`,
+        setPageSize: handlePageSizeChange,
+        middlewares: [
+          base.flip({ padding: 8, rootBoundary: "viewport" }),
+          base.shift({ padding: 8, rootBoundary: "viewport" })
+        ]
+      }
+    ) });
+  };
+  React3.useEffect(() => {
+    table.setPageSize(defaultPageSize);
+  }, [defaultPageSize, table]);
+  React3.useEffect(() => {
+    table.setPageIndex(currentPage != null ? currentPage : 0);
+  }, [table, currentPage]);
+  React3.useEffect(() => {
+    if (table.options.manualPagination) {
+      return;
+    }
+    const pageCount = Math.max(1, Math.ceil(total / Number(pageSize)));
+    if (pageIndex > pageCount - 1) {
+      table.setPageIndex(pageCount - 1);
+    }
+  }, [total, pageSize, pageIndex, table]);
+  const scrollbarTableWidth = table.getTotalSize() || "100%";
+  const leftSlotContent = leftSource != null ? leftSource : children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    BottomContainer,
+    {
+      ref: footerRef,
+      isEndOfPage,
+      hasFilterBar,
+      hasToolbar,
+      disableStickyFooter: Boolean(isVirtualTableLayout),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer, { ref: tableScrollRef, onScroll: handleScroll, isPagination: showPagination, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
             style: {
-              height: "200px",
-              textAlign: "center",
-              verticalAlign: "middle"
+              width: scrollbarTableWidth,
+              height: "6px",
+              tableLayout: "fixed"
             },
-            children: children || emptyElement
+            children: /* @__PURE__ */ jsxRuntime.jsx(TableColumns, {})
           }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          paddingTop > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) }),
-          displayedRows.map((rowObj, i) => {
-            const isVirtual = "virtualRow" in rowObj && rowObj.virtualRow;
-            const row = rowObj.row;
-            const cells = typeof row.getVisibleCells === "function" ? row.getVisibleCells() : row;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              TableRow,
-              {
-                "data-index": isVirtual ? rowObj.virtualRow.index : i,
-                onClick: () => {
-                  var _a;
-                  if (typeof row.getVisibleCells === "function") {
-                    onClickRow == null ? void 0 : onClickRow(row.original);
-                  } else if (Array.isArray(row) && row.length > 0 && ((_a = row[0].row) == null ? void 0 : _a.original)) {
-                    onClickRow == null ? void 0 : onClickRow(row[0].row.original);
-                  }
-                },
-                className: onClickRow !== void 0 ? "clickable" : "",
-                children: cells.map((cell) => {
-                  var _a;
-                  const isPinned = cell.column.getIsPinned();
-                  const isLastLeftPinned = isPinned === "left" && cell.column.getIsLastColumn("left");
-                  const isFirstRightPinned = isPinned === "right" && cell.column.getIsFirstColumn("right");
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    TableCell,
-                    {
-                      "data-last-left-pinned": isLastLeftPinned,
-                      "data-first-right-pinned": isFirstRightPinned,
-                      "data-no-hover": ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.activeHover) ? "true" : void 0,
-                      style: getResizableCellStyle(cell.column),
-                      children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-                    },
-                    cell.id
-                  );
-                })
-              },
-              typeof row.id !== "undefined" ? row.id : i
-            );
-          }),
-          paddingBottom > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }),
-          emptyRowCount !== 0 && displayedRows.length < emptyRowCount && Array.from({ length: emptyRowCount - displayedRows.length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-empty": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            TableCell,
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, { sizeVar, isEndOfPage, children: [
+          !showPagination && /* @__PURE__ */ jsxRuntime.jsx(PaginationLeftSlot, { children: leftSlotContent }),
+          showPagination && /* @__PURE__ */ jsxRuntime.jsx(
+            base.Pagination,
             {
-              colSpan: table.getAllColumns().length,
-              style: {
-                height: `${60}px`
-              }
-            }
-          ) }, `empty-row-${index}`))
-        ] }) })
-      }
-    ) }) })
-  ] });
+              sizeVar,
+              pageSize: `${pageSize}`,
+              currentPage: pageIndex,
+              itemsTotalCount: total,
+              totalCount: Math.ceil(total / Number(pageSize)),
+              previousPage: () => handlePageChange(pageIndex - 1),
+              nextPage: () => handlePageChange(pageIndex + 1),
+              style: { paddingInline: hasPaddingInline ? "16px" : "0px" },
+              gotoPage: handlePageChange,
+              rightSource: renderRightSource(),
+              leftSource: leftSlotContent
+            },
+            Math.ceil(total / Number(pageSize))
+          )
+        ] })
+      ]
+    }
+  );
+};
+var TableToolbar = ({
+  children,
+  filterAccessor,
+  height = "56px",
+  padding = "12px 20px",
+  totalCount
+}) => {
+  const { table, filterValue, setFilterValue } = useTable();
+  const _totalCount = totalCount || table.getPrePaginationRowModel().rows.length;
+  const onSearch = (value) => {
+    var _a;
+    if (!filterAccessor)
+      return null;
+    setFilterValue(value);
+    (_a = table.getColumn(filterAccessor)) == null ? void 0 : _a.setFilterValue(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, { width: "100%", height, align: "center", padding, justify: "space-between", children: children({
+    totalCount: _totalCount,
+    filterAccessor: filterAccessor != null ? filterAccessor : "",
+    onSearch,
+    filterValue
+  }) });
 };
-var TableMain = ({
-  fixedColumns = [],
-  useVirtualization = false,
-  isSticky = true,
-  stickyHeaderTopPosition = 120,
+var Table = ({
+  data,
+  columns,
+  columnResizing = false,
   children,
-  maxHeight,
-  emptyRowCount = 8
+  manualPagination = false,
+  manualFiltering = false,
+  manualSorting = true,
+  selectedRows = [],
+  onSelectedRowsChange,
+  onClickRow,
+  initPageSize = 100,
+  noBorder = false,
+  isLoading = false,
+  getRowId,
+  globalSorting,
+  outsideFilters,
+  autoResetPageIndex = false
 }) => {
-  const { table, hasToolbar, hasFilterBar, columnResizing } = useTable();
-  const { rows } = table.getRowModel();
-  const scrollToFn = React2.useCallback((offset) => {
-    window.scrollTo({
-      top: offset - 120,
-      behavior: "smooth"
+  const [sorting, setSorting] = React3.useState([]);
+  const [columnFilters, setColumnFilters] = React3.useState([]);
+  const [globalFilter, setGlobalFilter] = React3.useState([]);
+  const [columnVisibility, setColumnVisibility] = React3.useState({});
+  const [columnPinning, setColumnPinning] = React3.useState({});
+  const [rowSelection, setRowSelection] = React3.useState({});
+  const [filterValue, setFilterValue] = React3.useState("");
+  const currentSorting = globalSorting != null ? globalSorting : sorting;
+  const rowIdMapRef = React3.useRef(/* @__PURE__ */ new WeakMap());
+  const rowIdCounterRef = React3.useRef(0);
+  const filterHiddenColumns = (cols) => {
+    return cols.filter((column) => {
+      var _a;
+      return column && !((_a = column.meta) == null ? void 0 : _a.hiddenColumn);
+    }).map((column) => {
+      if ("columns" in column && Array.isArray(column.columns)) {
+        return __spreadProps(__spreadValues({}, column), {
+          columns: filterHiddenColumns(column.columns)
+        });
+      }
+      return column;
+    }).filter((column) => {
+      if ("columns" in column && Array.isArray(column.columns)) {
+        return column.columns.length > 0;
+      }
+      return true;
     });
-  }, []);
-  const rowVirtualizer = reactVirtual.useWindowVirtualizer({
-    estimateSize: () => 60,
-    // 각 행의 높이를 60px로 예측
-    count: rows.length,
-    overscan: 10,
-    // 실제 보이는 영역 외에 추가로 렌더링할 아이템 수
-    isScrollingResetDelay: 100,
-    // 스크롤이 멈추고 100ms 후에 스크롤 상태 초기화
-    observeElementOffset: (instance, cb) => reactVirtual.observeWindowOffset(instance, (offset, isScrolling) => cb(offset - 120, isScrolling)),
-    scrollToFn
-  });
-  const { getVirtualItems: virtualRows } = rowVirtualizer;
-  const displayedRows = useVirtualization ? virtualRows().map((virtualRow) => ({ row: rows[virtualRow.index], virtualRow })) : rows.map((row) => ({ row }));
-  const hasVirtualRow = (item) => {
-    return "virtualRow" in item;
   };
-  const paddingTop = displayedRows.length > 0 && hasVirtualRow(displayedRows[0]) ? displayedRows[0].virtualRow.start : 0;
-  const lastRow = displayedRows[displayedRows.length - 1];
-  const paddingBottom = displayedRows.length > 0 && lastRow && hasVirtualRow(lastRow) ? rowVirtualizer.getTotalSize() - lastRow.virtualRow.end : 0;
-  React2.useEffect(() => {
-    const pinningState = {
-      left: [],
-      right: []
+  const visibleColumns = React3.useMemo(() => filterHiddenColumns(columns), [columns]);
+  const safeGetRowId = React3.useMemo(() => {
+    if (getRowId) {
+      return (row) => {
+        const id = getRowId(row);
+        if (id === void 0 || id === null || id === "") {
+          if (rowIdMapRef.current.has(row)) {
+            return rowIdMapRef.current.get(row);
+          }
+          const newId = `row-${rowIdCounterRef.current++}`;
+          rowIdMapRef.current.set(row, newId);
+          return newId;
+        }
+        return String(id);
+      };
+    }
+    return (row) => {
+      if (typeof row === "object" && row !== null && "id" in row) {
+        const id = row.id;
+        if (id !== void 0 && id !== null && id !== "") {
+          return String(id);
+        }
+      }
+      if (rowIdMapRef.current.has(row)) {
+        return rowIdMapRef.current.get(row);
+      }
+      const newId = `row-${rowIdCounterRef.current++}`;
+      rowIdMapRef.current.set(row, newId);
+      return newId;
     };
-    fixedColumns.forEach(({ index, position }) => {
-      const column = table.getAllColumns()[index];
-      if (column == null ? void 0 : column.id) {
-        pinningState[position].push(column.id);
+  }, [getRowId]);
+  const table = reactTable.useReactTable({
+    data,
+    columns: visibleColumns,
+    columnResizeMode: "onChange",
+    getRowId: safeGetRowId,
+    initialState: {
+      pagination: {
+        pageSize: initPageSize
       }
-    });
-    table.setColumnPinning(pinningState);
-  }, []);
-  const isEmpty = rows.length === 0;
-  let emptyElement;
-  React2__default.default.Children.forEach(children, (child) => {
-    if (React2__default.default.isValidElement(child) && child.type === TableEmpty) {
-      emptyElement = child;
-    }
+    },
+    state: {
+      sorting: currentSorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      columnPinning,
+      rowSelection
+    },
+    defaultColumn: {
+      size: 0,
+      // TODO: 필터링 기능 추가 시 props로 옵션 처리
+      enableColumnFilter: false,
+      enableSorting: false,
+      enableResizing: true
+    },
+    onSortingChange: (updater) => {
+      var _a, _b;
+      const newSorting = typeof updater === "function" ? updater(table.getState().sorting) : updater;
+      if (!globalSorting) {
+        setSorting(newSorting);
+      }
+      if (newSorting.length > 0) {
+        const { id, desc } = newSorting[0];
+        const column = table.getAllLeafColumns().find((col) => col.id === id);
+        (_b = (_a = column == null ? void 0 : column.columnDef.meta) == null ? void 0 : _a.onSortChange) == null ? void 0 : _b.call(_a, desc ? "desc" : "asc");
+      } else {
+        table.getAllLeafColumns().forEach((column) => {
+          var _a2, _b2;
+          (_b2 = (_a2 = column.columnDef.meta) == null ? void 0 : _a2.onSortChange) == null ? void 0 : _b2.call(_a2, void 0);
+        });
+      }
+    },
+    onColumnFiltersChange: (updater) => {
+      const newFilters = typeof updater === "function" ? updater(table.getState().columnFilters) : updater;
+      setColumnFilters(newFilters);
+      newFilters.forEach((filter) => {
+        var _a, _b;
+        const column = table.getColumn(filter.id);
+        if ((_b = (_a = column == null ? void 0 : column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.onFilterChange) {
+          column.columnDef.meta.onFilterChange(filter.value || "");
+        }
+      });
+    },
+    onGlobalFilterChange: (updater) => {
+      var _a;
+      const newGlobalFilter = typeof updater === "function" ? updater(globalFilter) : updater;
+      setGlobalFilter(newGlobalFilter);
+      if ((_a = table.options.meta) == null ? void 0 : _a.onGlobalFilterChange) {
+        table.options.meta.onGlobalFilterChange(newGlobalFilter || "");
+      }
+      if (newGlobalFilter) {
+        table.getAllLeafColumns().forEach((column) => {
+          var _a2;
+          if (column.getCanFilter() && ((_a2 = column.columnDef.meta) == null ? void 0 : _a2.onFilterChange)) {
+            column.columnDef.meta.onFilterChange(newGlobalFilter);
+          }
+        });
+      }
+    },
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnPinningChange: setColumnPinning,
+    onRowSelectionChange: (updater) => {
+      const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+      setRowSelection(newSelection);
+      const selectedRowIds = Object.keys(newSelection).filter((id) => newSelection[id]);
+      const newSelectedRows = selectedRowIds.map((rowId) => {
+        const found = data.find((row) => safeGetRowId(row) === rowId);
+        if (found)
+          return found;
+        return selectedRows.find((row) => safeGetRowId(row) === rowId);
+      }).filter(Boolean);
+      onSelectedRowsChange == null ? void 0 : onSelectedRowsChange(newSelectedRows, newSelection);
+    },
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    enableColumnResizing: columnResizing,
+    manualPagination,
+    manualFiltering,
+    manualSorting,
+    autoResetPageIndex
   });
-  const tableState = {
-    displayedRows,
-    paddingTop,
-    paddingBottom,
-    isEmpty,
-    emptyElement,
-    children,
-    maxHeight,
+  const headerRef = React3.useRef(null);
+  const bodyRef = React3.useRef(null);
+  const footerRef = React3.useRef(null);
+  const tableScrollRef = React3.useRef(null);
+  const hasToolbar = React3.Children.toArray(children).some((child) => React3.isValidElement(child) && child.type === TableToolbar) || noBorder;
+  const hasPagination = React3.Children.toArray(children).some((child) => {
+    if (!React3.isValidElement(child))
+      return false;
+    if (child.type === TablePagination)
+      return true;
+    if (typeof child.type !== "function")
+      return false;
+    const component = child.type;
+    const componentName = component.displayName || component.name || "";
+    return componentName.includes("Pagination");
+  });
+  const hasFilterBar = React3.Children.toArray(children).some(
+    (child) => React3.isValidElement(child) && child.type === TableFilterBar
+  );
+  const hasFooter = table.getVisibleFlatColumns().some((column) => column.columnDef.footer !== void 0);
+  const isVirtualTableLayout = React3.useMemo(() => {
+    let virtual = false;
+    React3.Children.forEach(children, (child) => {
+      if (React3.isValidElement(child) && child.type === TableMain) {
+        const p = child.props;
+        virtual = Boolean(p.useVirtualization);
+      }
+    });
+    return virtual;
+  }, [children]);
+  const contextValue = {
+    table,
+    headerRef,
+    bodyRef,
+    footerRef,
+    tableScrollRef,
+    selectedRows,
+    onClickRow,
     hasToolbar,
-    isSticky,
-    stickyHeaderTopPosition,
-    emptyRowCount
+    hasFilterBar,
+    hasPagination,
+    columnResizing,
+    filterValue,
+    setFilterValue,
+    outsideFilters,
+    hasFooter,
+    isLoading,
+    isVirtualTableLayout
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TableRootContainer, { hasFilterBar, hasToolbar, children: columnResizing ? /* @__PURE__ */ jsxRuntime.jsx(ResizableTable, { tableState }) : /* @__PURE__ */ jsxRuntime.jsx(FixedTable, { tableState }) });
+  React3.useEffect(() => {
+    if (selectedRows.length === 0) {
+      table.resetRowSelection();
+    }
+  }, [onSelectedRowsChange, selectedRows.length, table]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContainer, { hasToolbar: hasToolbar || hasFilterBar, children: /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { value: contextValue, children }) });
 };
 var TableColumnVisibility = () => {
   const { table } = useTable();
@@ -1548,7 +3481,7 @@ var TableColumnVisibility = () => {
     var _a;
     const header = column.columnDef.header;
     if (typeof header === "function") {
-      const headerContent = header();
+      const headerContent = header({ table, column, header: column.columnDef.header });
       if (typeof headerContent === "string") {
         return headerContent;
       }
@@ -1569,37 +3502,6 @@ var TableColumnVisibility = () => {
     }) })
   ] });
 };
-var TableBtn = styled2__default.default.button`
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  border: 1px solid ${base.colorTokens.neutral200};
-  border-radius: 4px;
-  padding: 4px;
-  background: ${base.colorTokens.neutral150};
-  color: ${base.colorTokens.neutral700};
-  cursor: ${({ onClick }) => onClick ? "pointer" : "default"};
-
-  &:hover {
-    background: ${({ disabled }) => disabled ? base.colorTokens.neutral150 : base.colorTokens.neutral200};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-exports.TableButton = (_a) => {
-  var _b = _a, { children, leftSource, rightSource } = _b, buttonProps = __objRest(_b, ["children", "leftSource", "rightSource"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(TableBtn, __spreadProps(__spreadValues({}, buttonProps), { children: [
-    leftSource && leftSource,
-    /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_500", lineClamp: 2, children }),
-    rightSource && rightSource
-  ] }));
-};
-exports.TableBadge = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer, { radius: "borderRadius04", background: "neutral150", padding: "2px 4px", children: /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", children }) });
-};
 
 // src/components/Table/components/Table/index.ts
 exports.Table = Object.assign(Table, {
@@ -1612,7 +3514,7 @@ exports.Table = Object.assign(Table, {
   Button: exports.TableButton,
   Badge: exports.TableBadge
 });
-var AttachmentListContext = React2.createContext({});
+var AttachmentListContext = React3.createContext({});
 var AttachmentList = (_a) => {
   var _b = _a, {
     onClick,
@@ -1630,7 +3532,7 @@ var AttachmentList = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AttachmentListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, __spreadProps(__spreadValues({ spacing: "spacing08" }, rest), { children })) });
 };
 exports.AttachmentList = AttachmentList;
-var StyledSeparator = styled2__default.default.div`
+var StyledSeparator = styled3__default.default.div`
   width: 2px;
   height: 2px;
   background-color: var(--neutral400);