@ceed/ads 1.26.0 → 1.27.0

package/dist/index.cjs

@@ -2134,14 +2134,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,
@@ -2151,9 +2152,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 = [];
@@ -2201,7 +2202,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";
@@ -3365,7 +3368,9 @@ function useDataTableRenderer({
   getId: _getId,
   isTotalSelected: _isTotalSelected,
   isRowSelectable,
-  columnGroupingModel
+  columnGroupingModel,
+  columnVisibilityModel,
+  onColumnVisibilityModelChange
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
@@ -3381,12 +3386,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]: {
@@ -3397,7 +3425,7 @@ function useDataTableRenderer({
       }),
       {}
     ),
-    [reorderedColumns]
+    [visibleColumns]
   );
   const sortComparator = (0, import_react25.useCallback)(
     (rowA, rowB) => {
@@ -3405,7 +3433,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({
@@ -3425,7 +3454,7 @@ function useDataTableRenderer({
       }
       return 0;
     },
-    [sortModel, columnsByField]
+    [sortModel, allColumnsByField]
   );
   const rows = (0, import_react25.useMemo)(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
@@ -3489,44 +3518,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,
@@ -3542,8 +3581,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;
@@ -3560,7 +3599,7 @@ function useDataTableRenderer({
         setSortModel(newSortModel);
       }
     },
-    [sortOrder, columnsByField, sortModel, setSortModel]
+    [sortOrder, allColumnsByField, sortModel, setSortModel]
   );
   (0, import_react25.useEffect)(() => {
     if (!paginationModel) {
@@ -3986,6 +4025,10 @@ 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,
@@ -4225,7 +4268,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,
@@ -4245,7 +4288,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 };
@@ -4263,7 +4306,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: {

package/dist/index.js

@@ -2000,14 +2000,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,
@@ -2017,9 +2018,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 = [];
@@ -2067,7 +2068,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";
@@ -3240,7 +3243,9 @@ function useDataTableRenderer({
   getId: _getId,
   isTotalSelected: _isTotalSelected,
   isRowSelectable,
-  columnGroupingModel
+  columnGroupingModel,
+  columnVisibilityModel,
+  onColumnVisibilityModelChange
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
@@ -3256,12 +3261,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]: {
@@ -3272,7 +3300,7 @@ function useDataTableRenderer({
       }),
       {}
     ),
-    [reorderedColumns]
+    [visibleColumns]
   );
   const sortComparator = useCallback10(
     (rowA, rowB) => {
@@ -3280,7 +3308,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({
@@ -3300,7 +3329,7 @@ function useDataTableRenderer({
       }
       return 0;
     },
-    [sortModel, columnsByField]
+    [sortModel, allColumnsByField]
   );
   const rows = useMemo9(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
@@ -3364,44 +3393,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,
@@ -3417,8 +3456,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;
@@ -3435,7 +3474,7 @@ function useDataTableRenderer({
         setSortModel(newSortModel);
       }
     },
-    [sortOrder, columnsByField, sortModel, setSortModel]
+    [sortOrder, allColumnsByField, sortModel, setSortModel]
   );
   useEffect6(() => {
     if (!paginationModel) {
@@ -3861,6 +3900,10 @@ 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,
@@ -4100,7 +4143,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,
@@ -4120,7 +4163,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 };
@@ -4138,7 +4181,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: {