@shoplflow/templates 0.0.55 → 0.1.0

package/dist/index.cjs

@@ -1,13 +1,19 @@
 'use strict';
 
 var base = require('@shoplflow/base');
-var styled = require('@emotion/styled');
+var styled2 = require('@emotion/styled');
 var shoplAssets = require('@shoplflow/shopl-assets');
 var jsxRuntime = require('react/jsx-runtime');
+var React6 = require('react');
+var reactTable = require('@tanstack/react-table');
+var lodashEs = require('lodash-es');
+var reactVirtual = require('@tanstack/react-virtual');
+var utils = require('@shoplflow/utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefault(styled);
+var styled2__default = /*#__PURE__*/_interopDefault(styled2);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -51,7 +57,7 @@ var getTypographyAndColor = (depth) => {
       return { typography: "body1_700", color: "neutral500" };
   }
 };
-var StyledRequired = styled__default.default.div`
+var StyledRequired = styled2__default.default.div`
   color: ${base.colorTokens.red300};
   font-weight: 700;
   font-size: 14px;
@@ -104,3 +110,1481 @@ TitleGroup.Header = Header;
 TitleGroup.Actions = Actions;
 TitleGroup.Description = Description;
 exports.TitleGroup = TitleGroup;
+var TableContext = React6.createContext(void 0);
+var useTable = () => {
+  const context = React6.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`
+  border: ${({ hasToolbar }) => !hasToolbar && `1px solid ${base.colorTokens.neutral200}`};
+  border-radius: 8px;
+  background-color: ${base.colorTokens.neutral0};
+  width: 100%;
+  max-width: 100%;
+
+  .resizer {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    right: 0;
+    width: 2px;
+    background: ${base.colorTokens.neutral700};
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .resizer.isResizing {
+    background: ${base.colorTokens.neutral700};
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .resizer {
+      opacity: 0;
+    }
+
+    *:hover > .resizer {
+      opacity: 1;
+    }
+  }
+`;
+var TableHeader = styled2__default.default.thead`
+  color: ${base.colorTokens.neutral400};
+  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;
+    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;
+
+      // Ensure the right border is visible for colspan cells
+      &::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;
+        width: 100%;
+        height: 1px;
+        background-color: ${base.colorTokens.neutral200};
+        pointer-events: none;
+      }
+    }
+
+    // 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-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);
+      }
+    }
+  }
+
+  th:last-of-type::after {
+    display: none;
+  }
+`;
+var TableRow = styled2__default.default.tr`
+  &.clickable:hover td {
+    background-color: ${base.colorTokens.neutral400_5};
+    cursor: pointer;
+  }
+
+  &:hover td[data-no-hover='true'] {
+    background-color: ${base.colorTokens.neutral400_5};
+  }
+`;
+var TableHead = styled2__default.default.th`
+  .table-head[data-filter-open='true'] {
+    background-color: black;
+  }
+  & span {
+    color: ${base.colorTokens.neutral400};
+  }
+`;
+var TableRootContainer = styled2__default.default.div`
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  border: ${({ hasFilterBar, hasToolbar }) => hasFilterBar && !hasToolbar && `1px solid ${base.colorTokens.neutral200}`};
+  border-radius: ${({ hasFilterBar, hasToolbar }) => hasFilterBar && !hasToolbar ? "8px 8px 0 0" : "8px"};
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera*/
+  }
+`;
+var HeaderTableContainer = styled2__default.default.div`
+  width: 100%;
+  z-index: 15;
+  position: ${({ isSticky }) => isSticky ? "sticky" : ""};
+  top: ${({ stickyHeaderMarginTop }) => stickyHeaderMarginTop}px;
+  overflow-x: hidden;
+  border-radius: ${({ hasHeader }) => !hasHeader ? "8px 8px 0 0" : "0"};
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera*/
+  }
+`;
+var BodyTableContainer = styled2__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"};
+
+  opacity: ${({ isFetching }) => isFetching && 0.7};
+  pointer-events: ${({ isFetching }) => isFetching && "none"};
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera*/
+  }
+`;
+var TableCell = styled2__default.default.td`
+  position: relative;
+  padding: 8px;
+  vertical-align: middle;
+  background-color: ${base.colorTokens.neutral0};
+
+  &:has(li) {
+    padding: 0;
+  }
+
+  &[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: -4px; // border 바깥으로 이동
+      height: 100%;
+      width: 4px;
+      pointer-events: none;
+      z-index: 11;
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
+    }
+  }
+`;
+var TableBody = styled2__default.default.tbody`
+  color: ${base.colorTokens.neutral700};
+  font-size: 14px;
+  position: relative;
+
+  tr {
+    height: 60px;
+    cursor: ${({ isClickable }) => isClickable ? "pointer" : "default"};
+
+    &:not(:last-of-type) {
+      border-bottom: ${({ innerBorder }) => innerBorder != null ? innerBorder : "1px solid #eaeaea"};
+    }
+
+    &:hover {
+      background-color: ${base.colorTokens.neutral100};
+    }
+
+    // 데이터가 minRows 이하여서 빈칸을 채워준 경우 호버 액션, 커서 액션 모두 OFF
+    &[data-empty='true'] {
+      border: none; /* 테두리 제거 */
+      background-color: transparent; /* 배경색도 투명 처리 (선택 사항) */
+      cursor: default;
+
+      &:hover {
+        background-color: unset;
+      }
+
+      td {
+        cursor: default;
+      }
+    }
+  }
+
+  td {
+    padding: 8px;
+    vertical-align: middle;
+    background-color: ${base.colorTokens.neutral0};
+    &:not(:first-of-type) {
+      border-left: ${({ innerBorder }) => innerBorder != null ? innerBorder : "none"};
+    }
+  }
+`;
+var PaginationWrapper = styled2__default.default.div`
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 56px;
+  border-top: ${`1px solid ${base.colorTokens.neutral200}`};
+
+  .table-pagination {
+    border-top: none;
+  }
+`;
+var BottomContainer = styled2__default.default.div`
+  position: sticky;
+  width: 100%;
+  bottom: 0;
+  background-color: ${base.colorTokens.neutral0};
+  z-index: 11;
+  border-radius: ${({ isEndOfPage }) => isEndOfPage && "0 0 12px 12px"};
+  border: ${({ hasFilterBar, hasToolbar }) => hasFilterBar && !hasToolbar && `1px solid ${base.colorTokens.neutral200}`};
+  border-top: none;
+`;
+var ScrollContainer = styled2__default.default.div`
+  height: 6px;
+  position: absolute;
+  bottom: 50px;
+  width: 100%;
+  z-index: 12;
+  overflow-x: scroll;
+
+  ::-webkit-scrollbar {
+    width: inherit;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: ${base.colorTokens.neutral400};
+    border-radius: 100px;
+  }
+`;
+var TableResizer = styled2__default.default.div``;
+var EmptySource = styled2__default.default.div`
+  width: 60px;
+`;
+var PaginationLeftSlot = styled2__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 TableToolbar = ({ children, filterAccessor }) => {
+  const { table, filterValue, setFilterValue } = useTable();
+  const 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: "64px", align: "center", padding: "12px 24px", justify: "space-between", children: children({
+    totalCount,
+    filterAccessor: filterAccessor != null ? filterAccessor : "",
+    onSearch,
+    filterValue
+  }) });
+};
+
+// src/components/Table/utils/index.ts
+var getCommonPinningStyles = (column) => {
+  const isPinned = column.getIsPinned();
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+    zIndex: isPinned ? 10 : 0
+  };
+};
+var PAGE_SIZE = [
+  { key: "5", label: "5" },
+  { key: "10", label: "10" },
+  { key: "20", label: "20" },
+  { key: "50", label: "50" },
+  { key: "100", label: "100" }
+];
+var useIntersectionObserver = (target, callback, options) => {
+  React6.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
+}) => {
+  const { table, headerRef, bodyRef, tableScrollRef, footerRef, hasFilterBar, hasToolbar } = useTable();
+  const { pageSize, pageIndex } = table.getState().pagination;
+  const [isEndOfPage, setIsEndOfPage] = React6.useState(false);
+  const handleScroll = React6.useCallback(() => {
+    if (!headerRef.current || !bodyRef.current || !tableScrollRef.current) {
+      return;
+    }
+    const scrollLeft = tableScrollRef.current.scrollLeft;
+    headerRef.current.scrollLeft = scrollLeft;
+    bodyRef.current.scrollLeft = scrollLeft;
+  }, []);
+  const onIntersect = React6.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 = React6.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 = React6.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);
+  }) });
+  React6.useEffect(() => {
+    table.setPageSize(defaultPageSize);
+  }, [defaultPageSize, table]);
+  React6.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),
+          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
+            }
+          )
+        },
+        Math.ceil(total / Number(pageSize))
+      )
+    ] })
+  ] });
+};
+var TableFilterBar = React6.memo(({ outsideFilters }) => {
+  const { table, setFilterValue, hasToolbar } = useTable();
+  const filters = table.getState().columnFilters;
+  const prevFiltersRef = React6.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;
+    }
+    const filterOption = column.columnDef.meta.filterOptions.find((option) => option.value === value);
+    return filterOption ? filterOption.label : value;
+  };
+  React6.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([]);
+      }
+    }
+  }, [outsideFilters, table]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+    base.StackContainer.Horizontal,
+    {
+      width: "100%",
+      align: "center",
+      padding: hasToolbar ? "0px 16px 8px" : "0px 0px 8px 0px",
+      spacing: "spacing08",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          base.IconButton,
+          {
+            sizeVar: "XS",
+            styleVar: "GHOST",
+            onClick: () => {
+              resetFilters();
+              if (filters) {
+                onSearch("");
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.RefreshIcon, color: "neutral700" })
+          }
+        ),
+        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] = React6.useState([]);
+  const [columnFilters, setColumnFilters] = React6.useState([]);
+  const [globalFilter, setGlobalFilter] = React6.useState([]);
+  const [columnVisibility, setColumnVisibility] = React6.useState({});
+  const [columnPinning, setColumnPinning] = React6.useState({});
+  const [rowSelection, setRowSelection] = React6.useState({});
+  const [filterValue, setFilterValue] = React6.useState("");
+  const visibleColumns = React6.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 = React6.useRef(null);
+  const bodyRef = React6.useRef(null);
+  const footerRef = React6.useRef(null);
+  const tableScrollRef = React6.useRef(null);
+  const hasToolbar = React6.Children.toArray(children).some((child) => React6.isValidElement(child) && child.type === TableToolbar);
+  const hasPagination = React6.Children.toArray(children).some(
+    (child) => React6.isValidElement(child) && child.type === TablePagination
+  );
+  const hasFilterBar = React6.Children.toArray(children).some(
+    (child) => React6.isValidElement(child) && child.type === TableFilterBar
+  );
+  const contextValue = {
+    table,
+    headerRef,
+    bodyRef,
+    footerRef,
+    tableScrollRef,
+    selectedRows,
+    onClickRow,
+    hasToolbar,
+    hasFilterBar,
+    hasPagination,
+    columnResizing,
+    filterValue,
+    setFilterValue
+  };
+  React6.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] = React6.useState(0);
+  const labelRefs = React6.useRef([]);
+  React6.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,
+          {
+            leftSource: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource: shoplAssets.MoreIcon, sizeVar: "S" }),
+            isSelected: !currentSort,
+            onClick: () => handleSortChange(void 0),
+            children: sortLabels[2]
+          }
+        )
+      ]
+    }
+  );
+};
+var TableHeadTrigger = ({
+  header,
+  uniqueClass,
+  tableHeadRef,
+  isOpen,
+  onTriggerClick
+}) => {
+  var _a, _b;
+  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;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    base.StackContainer.Horizontal,
+    {
+      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,
+      children: [
+        reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+        showSortMenu && /* @__PURE__ */ jsxRuntime.jsx(
+          base.IconButton,
+          {
+            sizeVar: "XS",
+            styleVar: "GHOST",
+            onClick: (e) => {
+              e.stopPropagation();
+              onTriggerClick();
+            },
+            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();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              base.Icon,
+              {
+                iconSource: isOpen ? shoplAssets.UpArrowSolidXsmallIcon : shoplAssets.DownArrowSolidXsmallIcon,
+                sizeVar: "XS",
+                color: "neutral400"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var TableHeadCell = ({ header, onFilterChange, onSortChange }) => {
+  const tableHeadRef = React6.useRef(null);
+  const [triggerWidth, setTriggerWidth] = React6.useState(0);
+  const uniqueClass = `filter-menu-${header.column.id}`;
+  const [isOpen, setIsOpen] = utils.useOutsideClick({
+    selector: `.${uniqueClass}`
+  });
+  const showFilterMenu = header.column.getCanFilter();
+  const showSortMenu = header.column.getCanSort();
+  const hasInteraction = showFilterMenu || showSortMenu;
+  const cursorStyle = hasInteraction ? "pointer" : "default";
+  React6.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,
+          {
+            isOpen,
+            header,
+            uniqueClass,
+            tableHeadRef,
+            onTriggerClick: () => setIsOpen((prev) => !prev)
+          }
+        )
+      }
+    ),
+    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
+        }
+      )
+    ] })
+  ] });
+};
+var TableHeadCell_default = TableHeadCell;
+var FixedTable = ({ tableState }) => {
+  const { table, headerRef, bodyRef, tableScrollRef, hasToolbar, hasPagination, onClickRow } = useTable();
+  const {
+    displayedRows,
+    paddingTop,
+    paddingBottom,
+    isEmpty,
+    emptyElement,
+    children,
+    isSticky,
+    stickyHeaderTopPosition,
+    maxHeight = "100%",
+    emptyRowCount = 8
+  } = tableState;
+  const handleScroll = React6.useCallback(() => {
+    if (headerRef.current && bodyRef.current && tableScrollRef.current) {
+      const scrollLeft = bodyRef.current.scrollLeft;
+      headerRef.current.scrollLeft = scrollLeft;
+      tableScrollRef.current.scrollLeft = scrollLeft;
+    }
+  }, []);
+  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);
+  }) });
+  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);
+    const size = column.columnDef.size;
+    const minSize = column.columnDef.minSize;
+    const maxSize = column.columnDef.maxSize;
+    return __spreadValues(__spreadValues({}, baseStyle), size === 0 ? { width: "100%" } : {
+      width: `${size}px`,
+      minWidth: `${minSize}px`,
+      maxWidth: `${maxSize}px`
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderTableContainer,
+      {
+        ref: headerRef,
+        hasHeader: hasToolbar,
+        isSticky,
+        stickyHeaderMarginTop: stickyHeaderTopPosition,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "table",
+          {
+            style: {
+              width: "100%",
+              overflow: "auto",
+              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(base.ScrollArea, { autoHeightMax: maxHeight, autoHeight: true, children: /* @__PURE__ */ jsxRuntime.jsx(BodyTableContainer, { hasPagination, onScroll: handleScroll, ref: bodyRef, children: isEmpty ? children || emptyElement : /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        style: {
+          width: "100%",
+          overflow: "auto",
+          tableLayout: "fixed"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableColumns, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { 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(React6.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())
+                      }
+                    ) }, 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 ResizableTable = ({ tableState }) => {
+  const { table, headerRef, bodyRef, tableScrollRef, hasToolbar, hasPagination, onClickRow } = useTable();
+  const {
+    displayedRows,
+    paddingTop,
+    paddingBottom,
+    isEmpty,
+    emptyElement,
+    children,
+    isSticky,
+    stickyHeaderTopPosition,
+    maxHeight = "100%",
+    emptyRowCount = 8
+  } = tableState;
+  const handleScroll = React6.useCallback(() => {
+    if (headerRef.current && bodyRef.current && tableScrollRef.current) {
+      const scrollLeft = bodyRef.current.scrollLeft;
+      headerRef.current.scrollLeft = scrollLeft;
+      tableScrollRef.current.scrollLeft = scrollLeft;
+    }
+  }, []);
+  const columnSizeVars = React6__default.default.useMemo(() => {
+    var _a;
+    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;
+      let size;
+      if (isLastColumn) {
+        size = "auto";
+      } else if (currentSize !== void 0) {
+        size = currentSize;
+      } else if (typeof defaultSize === "number") {
+        size = defaultSize;
+      } else {
+        size = 200;
+      }
+      if (!isLastColumn && maxSize && typeof size === "number" && size > maxSize) {
+        size = maxSize;
+      }
+      colSizes[`--header-${header.id}-size`] = size;
+      colSizes[`--col-${header.column.id}-size`] = size;
+    });
+    return colSizes;
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  const getResizableCellStyle = (column, isHeader = false) => {
+    var _a, _b, _c, _d, _e;
+    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;
+    const minSize = column.columnDef.minSize || 100;
+    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" }), {
+      minWidth: `${minSize}px`,
+      maxWidth: isLastColumn ? "none" : `${maxSize || "none"}`
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderTableContainer,
+      {
+        hasHeader: hasToolbar,
+        isSticky,
+        stickyHeaderMarginTop: stickyHeaderTopPosition,
+        ref: headerRef,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            style: {
+              width: `${table.getCenterTotalSize()}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)) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(base.ScrollArea, { autoHeightMax: maxHeight, autoHeight: true, children: /* @__PURE__ */ jsxRuntime.jsx(BodyTableContainer, { hasPagination, onScroll: handleScroll, ref: bodyRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "table",
+      {
+        style: {
+          width: `${table.getCenterTotalSize()}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,
+            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;
+            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,
+            {
+              colSpan: table.getAllColumns().length,
+              style: {
+                height: `${60}px`
+              }
+            }
+          ) }, `empty-row-${index}`))
+        ] }) })
+      }
+    ) }) })
+  ] });
+};
+var TableMain = ({
+  fixedColumns = [],
+  useVirtualization = false,
+  isSticky = true,
+  stickyHeaderTopPosition = 120,
+  children,
+  maxHeight,
+  emptyRowCount = 8
+}) => {
+  const { table, hasToolbar, hasFilterBar, columnResizing } = useTable();
+  const { rows } = table.getRowModel();
+  const scrollToFn = React6.useCallback((offset) => {
+    window.scrollTo({
+      top: offset - 120,
+      behavior: "smooth"
+    });
+  }, []);
+  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;
+  React6.useEffect(() => {
+    const pinningState = {
+      left: [],
+      right: []
+    };
+    fixedColumns.forEach(({ index, position }) => {
+      const column = table.getAllColumns()[index];
+      if (column == null ? void 0 : column.id) {
+        pinningState[position].push(column.id);
+      }
+    });
+    table.setColumnPinning(pinningState);
+  }, []);
+  const isEmpty = rows.length === 0;
+  let emptyElement;
+  React6__default.default.Children.forEach(children, (child) => {
+    if (React6__default.default.isValidElement(child) && child.type === TableEmpty) {
+      emptyElement = child;
+    }
+  });
+  const tableState = {
+    displayedRows,
+    paddingTop,
+    paddingBottom,
+    isEmpty,
+    emptyElement,
+    children,
+    maxHeight,
+    hasToolbar,
+    isSticky,
+    stickyHeaderTopPosition,
+    emptyRowCount
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRootContainer, { hasFilterBar, hasToolbar, children: columnResizing ? /* @__PURE__ */ jsxRuntime.jsx(ResizableTable, { tableState }) : /* @__PURE__ */ jsxRuntime.jsx(FixedTable, { tableState }) });
+};
+var TableColumnVisibility = () => {
+  const { table } = useTable();
+  const getColumnHeader = (column) => {
+    var _a;
+    const header = column.columnDef.header;
+    if (typeof header === "function") {
+      const headerContent = header();
+      if (typeof headerContent === "string") {
+        return headerContent;
+      }
+      return ((_a = headerContent.props) == null ? void 0 : _a.children) || headerContent;
+    }
+    return header;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(base.Stack.Horizontal, { align: "center", spacing: "spacing12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(base.Checkbox, { checked: table.getIsAllColumnsVisible(), onClick: table.getToggleAllColumnsVisibilityHandler() }),
+      /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body1_400", children: "\uC804\uCCB4 \uC120\uD0DD" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(base.Stack.Vertical, { spacing: "spacing12", children: table.getAllLeafColumns().map((column) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(base.Stack.Horizontal, { align: "center", spacing: "spacing12", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(base.Checkbox, { checked: column.getIsVisible(), onClick: column.getToggleVisibilityHandler() }),
+        /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body1_400", children: getColumnHeader(column) })
+      ] }, column.id);
+    }) })
+  ] });
+};
+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, {
+  Toolbar: TableToolbar,
+  FilterBar: TableFilterBar,
+  Main: TableMain,
+  Pagination: TablePagination,
+  Empty: TableEmpty,
+  ColumnVisibility: TableColumnVisibility,
+  Button: exports.TableButton,
+  Badge: exports.TableBadge
+});
+
+Object.defineProperty(exports, 'createColumnHelper', {
+  enumerable: true,
+  get: function () { return reactTable.createColumnHelper; }
+});