@ceed/cds 1.25.0 → 1.27.0

package/dist/index.cjs

@@ -2136,14 +2136,15 @@ function reorderColumnsByGroupingModel(columns, columnGroupingModel) {
   }
   return reorderedColumns;
 }
-function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }) {
+function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }, visibleFields) {
   const result = [];
   for (const item of items) {
     if ("groupId" in item) {
       const newPath = [...groupPath, item.groupId];
       const children = Array.isArray(item.children) ? item.children : [item.children];
-      result.push(...flattenColumnGroups(children, newPath, columnIndex));
+      result.push(...flattenColumnGroups(children, newPath, columnIndex, visibleFields));
     } else {
+      if (visibleFields && !visibleFields.has(item.field)) continue;
       result.push({
         ...item,
         groupPath,
@@ -2153,9 +2154,9 @@ function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }
   }
   return result;
 }
-function calculateColumnGroups(columnGroupingModel, columns) {
+function calculateColumnGroups(columnGroupingModel, columns, visibleFields) {
   const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
-  const flattenedColumns = flattenColumnGroups(columnGroupingModel);
+  const flattenedColumns = flattenColumnGroups(columnGroupingModel, [], { current: 0 }, visibleFields);
   const columnIndexMap = new Map(flattenedColumns.map((col) => [col.field, col.columnIndex]));
   const processedGroups = /* @__PURE__ */ new Map();
   const groupsByLevel = [];
@@ -2203,7 +2204,9 @@ function calculateColumnGroups(columnGroupingModel, columns) {
   groupsByLevel.forEach((level) => {
     level.sort((a, b) => a.startIndex - b.startIndex);
   });
-  return { groups: groupsByLevel, maxLevel, fieldsInGroupingModel };
+  const filteredGroupsByLevel = groupsByLevel.map((level) => level.filter((g) => g.colspan > 0)).filter((level) => level.length > 0);
+  const correctedMaxLevel = filteredGroupsByLevel.length > 0 ? filteredGroupsByLevel.length - 1 : -1;
+  return { groups: filteredGroupsByLevel, maxLevel: correctedMaxLevel, fieldsInGroupingModel };
 }
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
@@ -2318,6 +2321,7 @@ var StyledTd = (0, import_joy25.styled)("td")(({ theme }) => ({
 }));
 var MotionSortIcon = (0, import_framer_motion17.motion)(import_ArrowUpwardRounded.default);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.LinearProgress, { value: 8, variant: "plain" });
+var DefaultNoRowsOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.Typography, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
 var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.createElement(
   Box_default,
   {
@@ -3367,7 +3371,9 @@ function useDataTableRenderer({
   getId: _getId,
   isTotalSelected: _isTotalSelected,
   isRowSelectable,
-  columnGroupingModel
+  columnGroupingModel,
+  columnVisibilityModel,
+  onColumnVisibilityModelChange
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
@@ -3383,12 +3389,35 @@ function useDataTableRenderer({
     initialState?.sorting?.sortModel ?? [],
     (0, import_react25.useCallback)((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
   );
+  const [visibilityModel] = useControlledState(
+    columnVisibilityModel,
+    initialState?.columns?.columnVisibilityModel ?? {},
+    (0, import_react25.useCallback)(
+      (model) => onColumnVisibilityModelChange?.(model),
+      [onColumnVisibilityModelChange]
+    )
+  );
   const reorderedColumns = (0, import_react25.useMemo)(() => {
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const columnsByField = (0, import_react25.useMemo)(
+  const visibleColumns = (0, import_react25.useMemo)(
+    () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
+    [reorderedColumns, visibilityModel]
+  );
+  const visibleFieldSet = (0, import_react25.useMemo)(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const allColumnsByField = (0, import_react25.useMemo)(
     () => reorderedColumns.reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr.field]: curr
+      }),
+      {}
+    ),
+    [reorderedColumns]
+  );
+  const visibleColumnsByField = (0, import_react25.useMemo)(
+    () => visibleColumns.reduce(
       (acc, curr) => ({
         ...acc,
         [curr.field]: {
@@ -3399,7 +3428,7 @@ function useDataTableRenderer({
       }),
       {}
     ),
-    [reorderedColumns]
+    [visibleColumns]
   );
   const sortComparator = (0, import_react25.useCallback)(
     (rowA, rowB) => {
@@ -3407,7 +3436,8 @@ function useDataTableRenderer({
         const { field, sort: direction } = sort;
         const a = rowA[field];
         const b = rowB[field];
-        const column = columnsByField[field];
+        const column = allColumnsByField[field];
+        if (!column) continue;
         let comparison = 0;
         if (column.sortComparator) {
           comparison = column.sortComparator({
@@ -3427,7 +3457,7 @@ function useDataTableRenderer({
       }
       return 0;
     },
-    [sortModel, columnsByField]
+    [sortModel, allColumnsByField]
   );
   const rows = (0, import_react25.useMemo)(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
@@ -3491,44 +3521,54 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
-  const columnWidths = useColumnWidths(columnsByField);
+  const columnWidths = useColumnWidths(visibleColumnsByField);
   const getWidth = (0, import_react25.useCallback)(
-    (f) => columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
-    columnsByField[f].minWidth ?? 0,
-    [columnWidths, columnsByField]
+    (f) => columnWidths[f] ?? allColumnsByField[f]?.width ?? // Column prop 으로 지정된 width
+    allColumnsByField[f]?.minWidth ?? 0,
+    [columnWidths, allColumnsByField]
   );
   const processedColumnGroups = (0, import_react25.useMemo)(() => {
     if (!columnGroupingModel) return null;
-    return calculateColumnGroups(columnGroupingModel, reorderedColumns);
-  }, [columnGroupingModel, reorderedColumns]);
+    return calculateColumnGroups(columnGroupingModel, visibleColumns, visibleFieldSet);
+  }, [columnGroupingModel, visibleColumns, visibleFieldSet]);
+  const effectivePinnedLeft = (0, import_react25.useMemo)(
+    () => pinnedColumns?.left?.filter((f) => visibleFieldSet.has(f)),
+    [pinnedColumns?.left, visibleFieldSet]
+  );
+  const effectivePinnedRight = (0, import_react25.useMemo)(
+    () => pinnedColumns?.right?.filter((f) => visibleFieldSet.has(f)),
+    [pinnedColumns?.right, visibleFieldSet]
+  );
   const columns = (0, import_react25.useMemo)(() => {
-    const baseColumns = reorderedColumns.length > 0 ? reorderedColumns : Object.keys(rows[0] || {}).map((key) => ({
+    const baseColumns = visibleColumns.length > 0 ? visibleColumns : reorderedColumns.length > 0 ? [] : Object.keys(rows[0] || {}).map((key) => ({
       field: key
     }));
     return baseColumns.map((column) => {
-      const isLeftPinned = pinnedColumns?.left?.includes(column.field);
-      const isRightPinned = pinnedColumns?.right?.includes(column.field);
+      const isLeftPinned = effectivePinnedLeft?.includes(column.field);
+      const isRightPinned = effectivePinnedRight?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
       return {
         ...column,
-        headerRef: columnsByField[column.field].headerRef,
-        tableColRef: columnsByField[column.field].tableColRef,
+        headerRef: visibleColumnsByField[column.field]?.headerRef,
+        tableColRef: visibleColumnsByField[column.field]?.tableColRef,
         isCellEditable: editMode && (typeof column.isCellEditable === "function" ? column.isCellEditable : column.isCellEditable ?? true),
         sort: sortModel.find((sort) => sort.field === column.field)?.sort,
-        sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
+        sortOrder: allColumnsByField[column.field]?.sortOrder || sortOrder,
         isPinned,
-        isLastStartPinnedColumn: isLeftPinned && [...pinnedColumns?.left || []].pop() === column.field,
-        isLastEndPinnedColumn: isRightPinned && (pinnedColumns?.right?.[0] ?? null) === column.field,
-        pinnedStartPosition: pinnedColumns?.left?.slice(0, isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length).reduce((acc, curr) => acc + getWidth(curr), 0),
-        pinnedEndPosition: pinnedColumns?.right?.slice(isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
+        isLastStartPinnedColumn: isLeftPinned && [...effectivePinnedLeft || []].pop() === column.field,
+        isLastEndPinnedColumn: isRightPinned && (effectivePinnedRight?.[0] ?? null) === column.field,
+        pinnedStartPosition: effectivePinnedLeft?.slice(0, isLeftPinned ? effectivePinnedLeft.indexOf(column.field) : effectivePinnedLeft.length).reduce((acc, curr) => acc + getWidth(curr), 0),
+        pinnedEndPosition: effectivePinnedRight?.slice(isRightPinned ? effectivePinnedRight.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
       };
     });
   }, [
+    visibleColumns,
     reorderedColumns,
     rows,
-    pinnedColumns?.left,
-    pinnedColumns?.right,
-    columnsByField,
+    effectivePinnedLeft,
+    effectivePinnedRight,
+    visibleColumnsByField,
+    allColumnsByField,
     editMode,
     sortModel,
     sortOrder,
@@ -3544,8 +3584,8 @@ function useDataTableRenderer({
   const handleSortChange = (0, import_react25.useCallback)(
     (props) => {
       const { field, currentSort, multiple } = props;
-      const column = columnsByField[field];
-      const columnSortOrder = column.sortOrder || sortOrder;
+      const column = allColumnsByField[field];
+      const columnSortOrder = column?.sortOrder || sortOrder;
       if (currentSort !== void 0) {
         const currentOrderIndex = columnSortOrder.indexOf(currentSort);
         const nextSortOrderIndex = (currentOrderIndex + 1) % columnSortOrder.length;
@@ -3562,7 +3602,7 @@ function useDataTableRenderer({
         setSortModel(newSortModel);
       }
     },
-    [sortOrder, columnsByField, sortModel, setSortModel]
+    [sortOrder, allColumnsByField, sortModel, setSortModel]
   );
   (0, import_react25.useEffect)(() => {
     if (!paginationModel) {
@@ -3988,13 +4028,23 @@ function Component(props, apiRef) {
     loading,
     columnGroupingModel: _________________,
     // columnGroupingModel is used in useDataTableRenderer
+    columnVisibilityModel: __________________,
+    // columnVisibilityModel is used in useDataTableRenderer
+    onColumnVisibilityModelChange: ___________________,
+    // onColumnVisibilityModelChange is used in useDataTableRenderer
     slots: {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
       footer: Footer,
-      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay
+      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay,
+      noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
+    } = {},
+    slotProps: {
+      checkbox: checkboxProps = {},
+      toolbar: toolbarProps,
+      background: backgroundProps = {},
+      noRowsOverlay: noRowsOverlayProps = {}
     } = {},
-    slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps, background: backgroundProps = {} } = {},
     stripe,
     isTotalSelected: ___________,
     ...innerProps
@@ -4038,6 +4088,8 @@ function Component(props, apiRef) {
   const paginationModel = (0, import_react28.useMemo)(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
+  const showNoRowsOverlay = !loading && rowCount === 0;
+  const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0));
   const getRowClickHandler = (0, import_react28.useCallback)(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
@@ -4227,7 +4279,7 @@ function Component(props, apiRef) {
             width: c.width
           }
         }
-      ))), /* @__PURE__ */ import_react28.default.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ import_react28.default.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ import_react28.default.createElement(
+      ))), /* @__PURE__ */ import_react28.default.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ import_react28.default.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ import_react28.default.createElement(
         "th",
         {
           rowSpan: processedColumnGroups.maxLevel + 2,
@@ -4247,7 +4299,7 @@ function Component(props, apiRef) {
             ...checkboxProps
           }
         )
-      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ import_react28.default.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.map((group, groupIndex) => {
+      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ import_react28.default.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.filter((g) => g.colspan > 0).map((group, groupIndex) => {
         const nextGroup = levelGroups[groupIndex + 1];
         const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
         const params = { groupId: group.groupId };
@@ -4265,7 +4317,7 @@ function Component(props, apiRef) {
           },
           group.headerName ?? group.groupId
         ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ import_react28.default.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
-      }))), /* @__PURE__ */ import_react28.default.createElement("tr", null, !processedColumnGroups && checkboxSelection && /* @__PURE__ */ import_react28.default.createElement(
+      }))), /* @__PURE__ */ import_react28.default.createElement("tr", null, (!processedColumnGroups || processedColumnGroups.groups.length === 0) && checkboxSelection && /* @__PURE__ */ import_react28.default.createElement(
         "th",
         {
           style: {
@@ -4329,6 +4381,18 @@ function Component(props, apiRef) {
             /* @__PURE__ */ import_react28.default.createElement(LoadingOverlay, null)
           )
         )),
+        showNoRowsOverlay && /* @__PURE__ */ import_react28.default.createElement("tr", null, /* @__PURE__ */ import_react28.default.createElement("td", { colSpan: totalColCount, style: { border: "none" } }, /* @__PURE__ */ import_react28.default.createElement(
+          Box_default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: "150px"
+            }
+          },
+          /* @__PURE__ */ import_react28.default.createElement(NoRowsOverlay, { ...noRowsOverlayProps })
+        ))),
         virtualizedItems.map((virtualizedRow, index) => {
           const rowIndex = virtualizedRow.index;
           const row = dataInPage[rowIndex];

package/dist/index.js

@@ -2010,14 +2010,15 @@ function reorderColumnsByGroupingModel(columns, columnGroupingModel) {
   }
   return reorderedColumns;
 }
-function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }) {
+function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }, visibleFields) {
   const result = [];
   for (const item of items) {
     if ("groupId" in item) {
       const newPath = [...groupPath, item.groupId];
       const children = Array.isArray(item.children) ? item.children : [item.children];
-      result.push(...flattenColumnGroups(children, newPath, columnIndex));
+      result.push(...flattenColumnGroups(children, newPath, columnIndex, visibleFields));
     } else {
+      if (visibleFields && !visibleFields.has(item.field)) continue;
       result.push({
         ...item,
         groupPath,
@@ -2027,9 +2028,9 @@ function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }
   }
   return result;
 }
-function calculateColumnGroups(columnGroupingModel, columns) {
+function calculateColumnGroups(columnGroupingModel, columns, visibleFields) {
   const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
-  const flattenedColumns = flattenColumnGroups(columnGroupingModel);
+  const flattenedColumns = flattenColumnGroups(columnGroupingModel, [], { current: 0 }, visibleFields);
   const columnIndexMap = new Map(flattenedColumns.map((col) => [col.field, col.columnIndex]));
   const processedGroups = /* @__PURE__ */ new Map();
   const groupsByLevel = [];
@@ -2077,7 +2078,9 @@ function calculateColumnGroups(columnGroupingModel, columns) {
   groupsByLevel.forEach((level) => {
     level.sort((a, b) => a.startIndex - b.startIndex);
   });
-  return { groups: groupsByLevel, maxLevel, fieldsInGroupingModel };
+  const filteredGroupsByLevel = groupsByLevel.map((level) => level.filter((g) => g.colspan > 0)).filter((level) => level.length > 0);
+  const correctedMaxLevel = filteredGroupsByLevel.length > 0 ? filteredGroupsByLevel.length - 1 : -1;
+  return { groups: filteredGroupsByLevel, maxLevel: correctedMaxLevel, fieldsInGroupingModel };
 }
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
@@ -2086,7 +2089,7 @@ var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().form
 
 // src/components/DataTable/styled.tsx
 import React17 from "react";
-import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
+import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses, Typography as Typography3 } from "@mui/joy";
 import { motion as motion17 } from "framer-motion";
 import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
 var EllipsisDiv = styled8("div", {
@@ -2192,6 +2195,7 @@ var StyledTd = styled8("td")(({ theme }) => ({
 }));
 var MotionSortIcon = motion17(SortIcon);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
+var DefaultNoRowsOverlay = () => /* @__PURE__ */ React17.createElement(Typography3, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
 var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
   Box_default,
   {
@@ -2663,7 +2667,7 @@ var Textarea_default = Textarea;
 
 // src/components/Select/Select.tsx
 import React20, { useMemo as useMemo7 } from "react";
-import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
+import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography4 } from "@mui/joy";
 import { motion as motion20 } from "framer-motion";
 var MotionOption = motion20(JoyOption);
 var Option = MotionOption;
@@ -2737,7 +2741,7 @@ function Select(props) {
         return optionMap.get(selected.value)?.label;
       }
     },
-    options.map((option) => /* @__PURE__ */ React20.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React20.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React20.createElement(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React20.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
+    options.map((option) => /* @__PURE__ */ React20.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React20.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React20.createElement(Typography4, { level: "inherit" }, option.label), /* @__PURE__ */ React20.createElement(Typography4, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
   );
   return /* @__PURE__ */ React20.createElement(
     FormControl_default,
@@ -3250,7 +3254,9 @@ function useDataTableRenderer({
   getId: _getId,
   isTotalSelected: _isTotalSelected,
   isRowSelectable,
-  columnGroupingModel
+  columnGroupingModel,
+  columnVisibilityModel,
+  onColumnVisibilityModelChange
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
@@ -3266,12 +3272,35 @@ function useDataTableRenderer({
     initialState?.sorting?.sortModel ?? [],
     useCallback10((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
   );
+  const [visibilityModel] = useControlledState(
+    columnVisibilityModel,
+    initialState?.columns?.columnVisibilityModel ?? {},
+    useCallback10(
+      (model) => onColumnVisibilityModelChange?.(model),
+      [onColumnVisibilityModelChange]
+    )
+  );
   const reorderedColumns = useMemo9(() => {
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const columnsByField = useMemo9(
+  const visibleColumns = useMemo9(
+    () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
+    [reorderedColumns, visibilityModel]
+  );
+  const visibleFieldSet = useMemo9(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const allColumnsByField = useMemo9(
     () => reorderedColumns.reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr.field]: curr
+      }),
+      {}
+    ),
+    [reorderedColumns]
+  );
+  const visibleColumnsByField = useMemo9(
+    () => visibleColumns.reduce(
       (acc, curr) => ({
         ...acc,
         [curr.field]: {
@@ -3282,7 +3311,7 @@ function useDataTableRenderer({
       }),
       {}
     ),
-    [reorderedColumns]
+    [visibleColumns]
   );
   const sortComparator = useCallback10(
     (rowA, rowB) => {
@@ -3290,7 +3319,8 @@ function useDataTableRenderer({
         const { field, sort: direction } = sort;
         const a = rowA[field];
         const b = rowB[field];
-        const column = columnsByField[field];
+        const column = allColumnsByField[field];
+        if (!column) continue;
         let comparison = 0;
         if (column.sortComparator) {
           comparison = column.sortComparator({
@@ -3310,7 +3340,7 @@ function useDataTableRenderer({
       }
       return 0;
     },
-    [sortModel, columnsByField]
+    [sortModel, allColumnsByField]
   );
   const rows = useMemo9(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
@@ -3374,44 +3404,54 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
-  const columnWidths = useColumnWidths(columnsByField);
+  const columnWidths = useColumnWidths(visibleColumnsByField);
   const getWidth = useCallback10(
-    (f) => columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
-    columnsByField[f].minWidth ?? 0,
-    [columnWidths, columnsByField]
+    (f) => columnWidths[f] ?? allColumnsByField[f]?.width ?? // Column prop 으로 지정된 width
+    allColumnsByField[f]?.minWidth ?? 0,
+    [columnWidths, allColumnsByField]
   );
   const processedColumnGroups = useMemo9(() => {
     if (!columnGroupingModel) return null;
-    return calculateColumnGroups(columnGroupingModel, reorderedColumns);
-  }, [columnGroupingModel, reorderedColumns]);
+    return calculateColumnGroups(columnGroupingModel, visibleColumns, visibleFieldSet);
+  }, [columnGroupingModel, visibleColumns, visibleFieldSet]);
+  const effectivePinnedLeft = useMemo9(
+    () => pinnedColumns?.left?.filter((f) => visibleFieldSet.has(f)),
+    [pinnedColumns?.left, visibleFieldSet]
+  );
+  const effectivePinnedRight = useMemo9(
+    () => pinnedColumns?.right?.filter((f) => visibleFieldSet.has(f)),
+    [pinnedColumns?.right, visibleFieldSet]
+  );
   const columns = useMemo9(() => {
-    const baseColumns = reorderedColumns.length > 0 ? reorderedColumns : Object.keys(rows[0] || {}).map((key) => ({
+    const baseColumns = visibleColumns.length > 0 ? visibleColumns : reorderedColumns.length > 0 ? [] : Object.keys(rows[0] || {}).map((key) => ({
       field: key
     }));
     return baseColumns.map((column) => {
-      const isLeftPinned = pinnedColumns?.left?.includes(column.field);
-      const isRightPinned = pinnedColumns?.right?.includes(column.field);
+      const isLeftPinned = effectivePinnedLeft?.includes(column.field);
+      const isRightPinned = effectivePinnedRight?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
       return {
         ...column,
-        headerRef: columnsByField[column.field].headerRef,
-        tableColRef: columnsByField[column.field].tableColRef,
+        headerRef: visibleColumnsByField[column.field]?.headerRef,
+        tableColRef: visibleColumnsByField[column.field]?.tableColRef,
         isCellEditable: editMode && (typeof column.isCellEditable === "function" ? column.isCellEditable : column.isCellEditable ?? true),
         sort: sortModel.find((sort) => sort.field === column.field)?.sort,
-        sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
+        sortOrder: allColumnsByField[column.field]?.sortOrder || sortOrder,
         isPinned,
-        isLastStartPinnedColumn: isLeftPinned && [...pinnedColumns?.left || []].pop() === column.field,
-        isLastEndPinnedColumn: isRightPinned && (pinnedColumns?.right?.[0] ?? null) === column.field,
-        pinnedStartPosition: pinnedColumns?.left?.slice(0, isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length).reduce((acc, curr) => acc + getWidth(curr), 0),
-        pinnedEndPosition: pinnedColumns?.right?.slice(isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
+        isLastStartPinnedColumn: isLeftPinned && [...effectivePinnedLeft || []].pop() === column.field,
+        isLastEndPinnedColumn: isRightPinned && (effectivePinnedRight?.[0] ?? null) === column.field,
+        pinnedStartPosition: effectivePinnedLeft?.slice(0, isLeftPinned ? effectivePinnedLeft.indexOf(column.field) : effectivePinnedLeft.length).reduce((acc, curr) => acc + getWidth(curr), 0),
+        pinnedEndPosition: effectivePinnedRight?.slice(isRightPinned ? effectivePinnedRight.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
       };
     });
   }, [
+    visibleColumns,
     reorderedColumns,
     rows,
-    pinnedColumns?.left,
-    pinnedColumns?.right,
-    columnsByField,
+    effectivePinnedLeft,
+    effectivePinnedRight,
+    visibleColumnsByField,
+    allColumnsByField,
     editMode,
     sortModel,
     sortOrder,
@@ -3427,8 +3467,8 @@ function useDataTableRenderer({
   const handleSortChange = useCallback10(
     (props) => {
       const { field, currentSort, multiple } = props;
-      const column = columnsByField[field];
-      const columnSortOrder = column.sortOrder || sortOrder;
+      const column = allColumnsByField[field];
+      const columnSortOrder = column?.sortOrder || sortOrder;
       if (currentSort !== void 0) {
         const currentOrderIndex = columnSortOrder.indexOf(currentSort);
         const nextSortOrderIndex = (currentOrderIndex + 1) % columnSortOrder.length;
@@ -3445,7 +3485,7 @@ function useDataTableRenderer({
         setSortModel(newSortModel);
       }
     },
-    [sortOrder, columnsByField, sortModel, setSortModel]
+    [sortOrder, allColumnsByField, sortModel, setSortModel]
   );
   useEffect6(() => {
     if (!paginationModel) {
@@ -3871,13 +3911,23 @@ function Component(props, apiRef) {
     loading,
     columnGroupingModel: _________________,
     // columnGroupingModel is used in useDataTableRenderer
+    columnVisibilityModel: __________________,
+    // columnVisibilityModel is used in useDataTableRenderer
+    onColumnVisibilityModelChange: ___________________,
+    // onColumnVisibilityModelChange is used in useDataTableRenderer
     slots: {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
       footer: Footer,
-      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay
+      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay,
+      noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
+    } = {},
+    slotProps: {
+      checkbox: checkboxProps = {},
+      toolbar: toolbarProps,
+      background: backgroundProps = {},
+      noRowsOverlay: noRowsOverlayProps = {}
     } = {},
-    slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps, background: backgroundProps = {} } = {},
     stripe,
     isTotalSelected: ___________,
     ...innerProps
@@ -3921,6 +3971,8 @@ function Component(props, apiRef) {
   const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
+  const showNoRowsOverlay = !loading && rowCount === 0;
+  const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0));
   const getRowClickHandler = useCallback12(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
@@ -4110,7 +4162,7 @@ function Component(props, apiRef) {
             width: c.width
           }
         }
-      ))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
+      ))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
         "th",
         {
           rowSpan: processedColumnGroups.maxLevel + 2,
@@ -4130,7 +4182,7 @@ function Component(props, apiRef) {
             ...checkboxProps
           }
         )
-      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.map((group, groupIndex) => {
+      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.filter((g) => g.colspan > 0).map((group, groupIndex) => {
         const nextGroup = levelGroups[groupIndex + 1];
         const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
         const params = { groupId: group.groupId };
@@ -4148,7 +4200,7 @@ function Component(props, apiRef) {
           },
           group.headerName ?? group.groupId
         ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
-      }))), /* @__PURE__ */ React25.createElement("tr", null, !processedColumnGroups && checkboxSelection && /* @__PURE__ */ React25.createElement(
+      }))), /* @__PURE__ */ React25.createElement("tr", null, (!processedColumnGroups || processedColumnGroups.groups.length === 0) && checkboxSelection && /* @__PURE__ */ React25.createElement(
         "th",
         {
           style: {
@@ -4212,6 +4264,18 @@ function Component(props, apiRef) {
             /* @__PURE__ */ React25.createElement(LoadingOverlay, null)
           )
         )),
+        showNoRowsOverlay && /* @__PURE__ */ React25.createElement("tr", null, /* @__PURE__ */ React25.createElement("td", { colSpan: totalColCount, style: { border: "none" } }, /* @__PURE__ */ React25.createElement(
+          Box_default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: "150px"
+            }
+          },
+          /* @__PURE__ */ React25.createElement(NoRowsOverlay, { ...noRowsOverlayProps })
+        ))),
         virtualizedItems.map((virtualizedRow, index) => {
           const rowIndex = virtualizedRow.index;
           const row = dataInPage[rowIndex];