@ceed/cds 1.24.1-next.2 → 1.25.0

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

@@ -1,7 +1,8 @@
 import React, { ReactNode } from 'react';
 import type { ObjectLike, ColumnDef, Sort } from './types';
-export declare const TextEllipsis: ({ children }: {
+export declare const TextEllipsis: ({ children, lineClamp }: {
     children: ReactNode;
+    lineClamp?: number | undefined;
 }) => React.JSX.Element;
 export declare const CellTextEllipsis: ({ children }: {
     children: ReactNode;

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

@@ -1,5 +1,7 @@
 import React, { RefObject } from 'react';
-export declare const EllipsisDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const EllipsisDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme> & {
+    lineClamp?: number | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OverlayWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof React.ClassAttributes<HTMLTableRowElement> | keyof React.HTMLAttributes<HTMLTableRowElement>>, {}>;
 export declare const VirtualizedTableBody: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, keyof React.ClassAttributes<HTMLTableSectionElement> | keyof React.HTMLAttributes<HTMLTableSectionElement>>, {}>;
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme> & {

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

@@ -103,6 +103,7 @@ export type BaseColumnDef<T extends Record<PropertyKey, V>, V, ID> = {
         description?: string;
         cellClassName?: TableCellClassNamePropType<T, T[K]>;
         headerClassName?: TableColumnHeaderClassNamePropType<T, T[K]>;
+        headerLineClamp?: 1 | 2;
     };
 }[keyof T];
 export type AutocompleteColumnDef<T extends Record<PropertyKey, string>, ID> = BaseColumnDef<T, string, ID> & {

package/dist/components/data-display/DataTable.md

@@ -895,6 +895,82 @@ const columns = [
 ];
 ```
 
+### Two-Line Headers (headerLineClamp)
+
+Setting `headerLineClamp: 2` on a column allows the header text to wrap up to 2 lines. Text exceeding 2 lines is truncated with an ellipsis, and a tooltip is displayed on hover when truncation occurs.
+
+```tsx
+<Box sx={{
+  width: 500
+}}>
+<DataTable rows={manyRows} columns={[{
+  field: 'dessert',
+  headerName: 'Dessert Name (100g serving)',
+  headerLineClamp: 2,
+  width: '120px'
+}, {
+  field: 'calories',
+  headerName: 'Calories (kcal)',
+  headerLineClamp: 2,
+  type: 'number',
+  width: '80px'
+}, {
+  field: 'fat',
+  headerName: 'Fat Content (grams)',
+  headerLineClamp: 2,
+  type: 'number',
+  width: '80px'
+}, {
+  field: 'carbs',
+  headerName: 'Total Carbohydrates (g)',
+  headerLineClamp: 2,
+  type: 'number',
+  width: '90px'
+}, {
+  field: 'protein',
+  headerName: 'Protein Amount (g)',
+  type: 'number',
+  width: '120px'
+}]} stickyHeader slotProps={{
+  background: {
+    style: {
+      height: '400px'
+    }
+  }
+}} />
+</Box>
+```
+
+```tsx
+const columns = [
+  {
+    field: 'calories',
+    headerName: 'Calories (kcal)',
+    headerLineClamp: 2,
+    type: 'number',
+    width: '80px',
+  },
+  {
+    field: 'fat',
+    headerName: 'Fat Content (grams)',
+    headerLineClamp: 2,
+    type: 'number',
+    width: '80px',
+  },
+  {
+    field: 'protein',
+    headerName: 'Protein (g)',  // no headerLineClamp — single line (default)
+    type: 'number',
+  },
+];
+```
+
+#### Notes
+
+- `headerLineClamp` is opt-in per column. Columns without it remain single-line.
+- Supported values: `1 | 2`.
+- Works with all existing features: sorting, pinning, resizing, and column grouping.
+
 ## Editing Features
 
 ### Inline Editing