@ceed/cds 1.8.7 → 1.9.0

package/dist/components/DataTable/types.d.ts

@@ -45,11 +45,28 @@ export type GridCellClassNamePropType<R, V> = (params: {
     field: string;
     id: string;
 }) => string | undefined;
+export type ColumnGroupingModel<T extends Record<PropertyKey, any>, ID = unknown> = {
+    groupId: string;
+    headerName?: string;
+    children: ColumnGroupingModel<T, ID> | ColumnDef<T, ID>[];
+}[];
+export type ProcessedColumnGroup = {
+    groupId: string;
+    headerName?: string;
+    colspan: number;
+    level: number;
+    startIndex: number;
+};
+export type FlattenedColumn<T extends Record<PropertyKey, any>, ID> = ColumnDef<T, ID> & {
+    groupPath: string[];
+    columnIndex: number;
+};
 export type BaseColumnDef<T extends Record<PropertyKey, V>, V, ID> = {
     [K in keyof T]: {
         field: K;
         headerName?: string;
         headerRef?: React.RefObject<HTMLTableCellElement>;
+        tableColRef?: React.RefObject<HTMLTableColElement>;
         width?: string;
         minWidth?: string;
         maxWidth?: string;
@@ -136,6 +153,7 @@ export type DataTableProps<T extends Record<PropertyKey, any>, GetId extends ((r
     checkboxSelection?: boolean;
     columns: ColumnDef<T, InferredIdType<T, GetId>>[];
     pinnedColumns?: PinnedColumns;
+    columnGroupingModel?: ColumnGroupingModel<T, InferredIdType<T, GetId>>;
     editMode?: boolean;
     /**
      * 체크박스가 있는 경우, 체크박스를 클릭했을 때 선택된 row의 index를 지정한다.

package/dist/index.cjs

@@ -2694,6 +2694,118 @@ function InfoSign(props) {
 var InfoSign_default = InfoSign;
 
 // src/components/DataTable/DataTable.tsx
+function extractFieldsFromGroupingModel(items) {
+  const fields = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if ("groupId" in item) {
+      const children = Array.isArray(item.children) ? item.children : [item.children];
+      const childFields = extractFieldsFromGroupingModel(children);
+      childFields.forEach((field) => fields.add(field));
+    } else {
+      fields.add(item.field);
+    }
+  }
+  return fields;
+}
+function reorderColumnsByGroupingModel(columns, columnGroupingModel) {
+  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
+  const orderedFields = [];
+  function collectFieldsInOrder(items) {
+    for (const item of items) {
+      if ("groupId" in item) {
+        const children = Array.isArray(item.children) ? item.children : [item.children];
+        collectFieldsInOrder(children);
+      } else {
+        if (!orderedFields.includes(item.field)) {
+          orderedFields.push(item.field);
+        }
+      }
+    }
+  }
+  collectFieldsInOrder(columnGroupingModel);
+  const columnMap = new Map(columns.map((col) => [col.field, col]));
+  const reorderedColumns = [];
+  for (const field of orderedFields) {
+    const column = columnMap.get(field);
+    if (column) {
+      reorderedColumns.push(column);
+    }
+  }
+  for (const column of columns) {
+    if (!fieldsInGroupingModel.has(column.field)) {
+      reorderedColumns.push(column);
+    }
+  }
+  return reorderedColumns;
+}
+function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }) {
+  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));
+    } else {
+      result.push({
+        ...item,
+        groupPath,
+        columnIndex: columnIndex.current++
+      });
+    }
+  }
+  return result;
+}
+function calculateColumnGroups(columnGroupingModel, columns) {
+  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
+  const flattenedColumns = flattenColumnGroups(columnGroupingModel);
+  const columnIndexMap = new Map(flattenedColumns.map((col) => [col.field, col.columnIndex]));
+  const processedGroups = /* @__PURE__ */ new Map();
+  const groupsByLevel = [];
+  let maxLevel = 0;
+  function processGroup(items, level, parentGroupId) {
+    let minIndex = Infinity;
+    let maxIndex = -Infinity;
+    for (const item of items) {
+      if ("groupId" in item) {
+        const groupKey = parentGroupId ? `${parentGroupId}.${item.groupId}` : item.groupId;
+        if (!processedGroups.has(groupKey)) {
+          const children = Array.isArray(item.children) ? item.children : [item.children];
+          const { startIndex, colspan } = processGroup(children, level + 1, groupKey);
+          const group = {
+            groupId: item.groupId,
+            headerName: item.headerName,
+            colspan,
+            level,
+            startIndex
+          };
+          processedGroups.set(groupKey, group);
+          if (!groupsByLevel[level]) {
+            groupsByLevel[level] = [];
+          }
+          groupsByLevel[level].push(group);
+          maxLevel = Math.max(maxLevel, level);
+          minIndex = Math.min(minIndex, startIndex);
+          maxIndex = Math.max(maxIndex, startIndex + colspan - 1);
+        }
+      } else {
+        const columnIndex = columnIndexMap.get(item.field);
+        if (columnIndex !== void 0) {
+          minIndex = Math.min(minIndex, columnIndex);
+          maxIndex = Math.max(maxIndex, columnIndex);
+        }
+      }
+    }
+    return {
+      startIndex: minIndex === Infinity ? 0 : minIndex,
+      colspan: maxIndex === -Infinity ? 0 : maxIndex - minIndex + 1
+    };
+  }
+  processGroup(columnGroupingModel, 0);
+  groupsByLevel.forEach((level) => {
+    level.sort((a, b) => a.startIndex - b.startIndex);
+  });
+  return { groups: groupsByLevel, maxLevel, fieldsInGroupingModel };
+}
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
 }
@@ -2764,7 +2876,7 @@ var OverlayWrapper = (0, import_joy33.styled)("tr", {
   }
 });
 var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
-var Resizer = (ref) => /* @__PURE__ */ import_react25.default.createElement(
+var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react25.default.createElement(
   Box_default,
   {
     sx: {
@@ -2782,6 +2894,7 @@ var Resizer = (ref) => /* @__PURE__ */ import_react25.default.createElement(
       const onMouseMove = (e2) => {
         if (initialWidth && initialX) {
           ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
+          targetRef.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
         }
       };
       const onMouseUp = () => {
@@ -2892,17 +3005,19 @@ var HeadCell = (props) => {
     isPinned,
     pinnedStartPosition,
     pinnedEndPosition,
-    headerRef
+    headerRef,
+    tableColRef
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const ref = headerRef;
+  const colRef = tableColRef;
   const [isHovered, setIsHovered] = (0, import_react25.useState)(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = (0, import_react25.useMemo)(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = (0, import_react25.useMemo)(() => resizable ?? true ? Resizer(ref) : null, [resizable, ref]);
+  const resizer = (0, import_react25.useMemo)(() => resizable ?? true ? Resizer(ref, colRef) : null, [resizable, ref, colRef]);
   const style = (0, import_react25.useMemo)(
     () => ({
       width,
@@ -3237,8 +3352,15 @@ function useDataTableRenderer({
   editMode,
   getId: _getId,
   isTotalSelected: _isTotalSelected,
-  isRowSelectable
+  isRowSelectable,
+  columnGroupingModel
+  // Add this prop
 }) {
+  if (pinnedColumns && columnGroupingModel) {
+    throw new Error(
+      "You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
+    );
+  }
   const onSelectionModelChangeRef = (0, import_react25.useRef)(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = (0, import_react25.useState)(null);
@@ -3247,18 +3369,23 @@ function useDataTableRenderer({
     initialState?.sorting?.sortModel ?? [],
     (0, import_react25.useCallback)((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
   );
+  const reorderedColumns = (0, import_react25.useMemo)(() => {
+    if (!columnGroupingModel) return columnsProp;
+    return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
+  }, [columnsProp, columnGroupingModel]);
   const columnsByField = (0, import_react25.useMemo)(
-    () => columnsProp.reduce(
+    () => reorderedColumns.reduce(
       (acc, curr) => ({
         ...acc,
         [curr.field]: {
           ...curr,
-          headerRef: import_react25.default.createRef()
+          headerRef: import_react25.default.createRef(),
+          tableColRef: import_react25.default.createRef()
         }
       }),
       {}
     ),
-    [columnsProp]
+    [reorderedColumns]
   );
   const sortComparator = (0, import_react25.useCallback)(
     (rowA, rowB) => {
@@ -3338,11 +3465,17 @@ function useDataTableRenderer({
     columnsByField[f].minWidth ?? 0,
     [columnWidths, columnsByField]
   );
+  const processedColumnGroups = (0, import_react25.useMemo)(() => {
+    if (!columnGroupingModel) return null;
+    return calculateColumnGroups(columnGroupingModel, reorderedColumns);
+  }, [columnGroupingModel, reorderedColumns]);
   const columns = (0, import_react25.useMemo)(() => {
-    const baseColumns = columnsProp || // fallback
-    Object.keys(rows[0] || {}).map((key) => ({
-      field: key
-    }));
+    const baseColumns = reorderedColumns.length > 0 ? reorderedColumns : (
+      // fallback
+      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);
@@ -3350,6 +3483,7 @@ function useDataTableRenderer({
       return {
         ...column,
         headerRef: columnsByField[column.field].headerRef,
+        tableColRef: columnsByField[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,
@@ -3362,7 +3496,7 @@ function useDataTableRenderer({
       };
     });
   }, [
-    columnsProp,
+    reorderedColumns,
     rows,
     pinnedColumns?.left,
     pinnedColumns?.right,
@@ -3458,6 +3592,7 @@ function useDataTableRenderer({
       [selectionModel, onSelectionModelChange, selectedModelSet]
     ),
     columns,
+    processedColumnGroups,
     onTotalSelect: (0, import_react25.useCallback)(() => {
       const selectableRows = rows.filter((row, i) => {
         if (!isRowSelectable) return true;
@@ -3500,6 +3635,8 @@ function Component(props, apiRef) {
     getId: ____________,
     // getId is used in useDataTableRenderer
     loading,
+    columnGroupingModel: _________________,
+    // columnGroupingModel is used in useDataTableRenderer
     slots: {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
@@ -3516,6 +3653,7 @@ function Component(props, apiRef) {
   const tableBodyRef = (0, import_react25.useRef)(null);
   const {
     columns,
+    processedColumnGroups,
     isAllSelected,
     isSelectedRow,
     isRowSelectable: isRowSelectableCheck,
@@ -3623,7 +3761,8 @@ function Component(props, apiRef) {
           boxShadow: "sm",
           borderRadius: "sm",
           "--DataTableSheet-width": parentRef.current?.clientWidth + "px",
-          backgroundColor: "white"
+          backgroundColor: "white",
+          "--TableCell-cornerRadius": "0px"
         },
         className: [
           ...(parentRef.current?.scrollLeft || 0) > 0 ? ["ScrollableRight"] : [],
@@ -3632,12 +3771,30 @@ function Component(props, apiRef) {
         ref: parentRef,
         ...backgroundProps
       },
-      /* @__PURE__ */ import_react25.default.createElement(Table, { ...innerProps }, /* @__PURE__ */ import_react25.default.createElement("thead", null, /* @__PURE__ */ import_react25.default.createElement("tr", null, checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react25.default.createElement(Table, { ...innerProps }, /* @__PURE__ */ import_react25.default.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(
+        "col",
+        {
+          style: {
+            width: "40px"
+          }
+        }
+      ), columns.map((c) => /* @__PURE__ */ import_react25.default.createElement(
+        "col",
+        {
+          ref: c.tableColRef,
+          key: `${c.field.toString()}_${c.width}`,
+          style: {
+            width: c.width
+          }
+        }
+      ))), /* @__PURE__ */ import_react25.default.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ import_react25.default.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ import_react25.default.createElement(
         "th",
         {
+          rowSpan: processedColumnGroups.maxLevel + 2,
           style: {
             width: "40px",
-            textAlign: "center"
+            textAlign: "center",
+            verticalAlign: "middle"
           }
         },
         /* @__PURE__ */ import_react25.default.createElement(
@@ -3650,16 +3807,52 @@ function Component(props, apiRef) {
             ...checkboxProps
           }
         )
-      ), columns.map((c, i) => /* @__PURE__ */ import_react25.default.createElement(
-        HeadCell2,
+      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ import_react25.default.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.map((group, groupIndex) => {
+        const nextGroup = levelGroups[groupIndex + 1];
+        const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
+        return /* @__PURE__ */ import_react25.default.createElement(import_react25.Fragment, { key: group.groupId }, /* @__PURE__ */ import_react25.default.createElement(
+          "th",
+          {
+            colSpan: group.colspan,
+            style: {
+              textAlign: "center",
+              fontWeight: "bold",
+              verticalAlign: "middle"
+            }
+          },
+          group.headerName ?? group.groupId
+        ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ import_react25.default.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
+      }))), /* @__PURE__ */ import_react25.default.createElement("tr", null, !processedColumnGroups && checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(
+        "th",
         {
-          tableId,
-          key: `${c.field.toString()}_${i}`,
-          stickyHeader: props.stickyHeader,
-          editMode: !!c.isCellEditable,
-          onSortChange: handleSortChange,
-          ...c
-        }
+          style: {
+            width: "40px",
+            textAlign: "center"
+          }
+        },
+        /* @__PURE__ */ import_react25.default.createElement(
+          RenderCheckbox,
+          {
+            onChange: onAllCheckboxChange,
+            checked: isAllSelected,
+            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+            disabled: dataInPage.length > 0 && !selectableRowCount,
+            ...checkboxProps
+          }
+        )
+      ), columns.map((c, i) => (
+        // @ts-ignore
+        /* @__PURE__ */ import_react25.default.createElement(
+          HeadCell2,
+          {
+            tableId,
+            key: `${c.field.toString()}_${i}`,
+            stickyHeader: props.stickyHeader,
+            editMode: !!c.isCellEditable,
+            onSortChange: handleSortChange,
+            ...c
+          }
+        )
       )))), /* @__PURE__ */ import_react25.default.createElement(
         VirtualizedTableBody,
         {