feat(ui): add dNowrap for both td and th

Author: xiejay97

packages/ui/src/components/table/Cell.tsx

@@ -27,6 +27,7 @@ export interface DCellProps extends React.TdHTMLAttributes<HTMLTableCellElement>
     | undefined;
   dAlign: 'left' | 'right' | 'center';
   dEllipsis: boolean;
+  dNowrap: boolean;
 }
 
 export function DCell(props: DCellProps): JSX.Element | null {
@@ -37,6 +38,7 @@ export function DCell(props: DCellProps): JSX.Element | null {
     dFixed,
     dAlign,
     dEllipsis,
+    dNowrap,
 
     ...restProps
   } = props;
@@ -100,6 +102,7 @@ export function DCell(props: DCellProps): JSX.Element | null {
         [`${dPrefix}table__cell--fixed-left`]: fixedLeft,
         [`${dPrefix}table__cell--fixed-right`]: fixedRight,
         [`${dPrefix}table__cell--ellipsis`]: ellipsis,
+        [`${dPrefix}table__cell--nowrap`]: dNowrap,
       }),
       style: {
         ...restProps.style,

packages/ui/src/components/table/TableTd.tsx

@@ -35,7 +35,7 @@ export function DTableTd(props: DTableTdProps): JSX.Element | null {
   //#endregion
 
   return (
-    <DCell {...restProps} dTag="td" dWidth={dWidth} dFixed={dFixed} dAlign={dAlign} dEllipsis={dEllipsis}>
+    <DCell {...restProps} dTag="td" dWidth={dWidth} dFixed={dFixed} dAlign={dAlign} dEllipsis={dEllipsis} dNowrap={dNowrap}>
       {dNowrap ? children : <div className={`${dPrefix}table__cell-text`}>{children}</div>}
     </DCell>
   );

packages/ui/src/components/table/TableTh.tsx

@@ -25,6 +25,7 @@ export interface DTableThProps extends React.ThHTMLAttributes<HTMLTableCellEleme
   };
   dAlign?: 'left' | 'right' | 'center';
   dEllipsis?: boolean;
+  dNowrap?: boolean;
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DTable.Th' as const });
@@ -37,6 +38,7 @@ export function DTableTh(props: DTableThProps): JSX.Element | null {
     dFixed,
     dAlign = 'left',
     dEllipsis = false,
+    dNowrap = true,
 
     ...restProps
   } = useComponentConfig(COMPONENT_NAME, props);
@@ -66,6 +68,7 @@ export function DTableTh(props: DTableThProps): JSX.Element | null {
       dFixed={dFixed}
       dAlign={dAlign}
       dEllipsis={dEllipsis}
+      dNowrap={dNowrap}
     >
       <div className={`${dPrefix}table__cell-text`}>{children}</div>
       {(dSort || dActions.length > 0) && (

packages/ui/src/styles/components/table.scss

@@ -164,6 +164,10 @@ $table-filter-option-height: 32px;
       }
     }
 
+    @include m(nowrap) {
+      white-space: nowrap;
+    }
+
     @include m(th-sort) {
       cursor: pointer;
     }
@@ -180,7 +184,6 @@ $table-filter-option-height: 32px;
 
     display: flex;
     align-items: center;
-    white-space: nowrap;
 
     @at-root {
       th #{$selector} {
@@ -191,7 +194,6 @@ $table-filter-option-height: 32px;
 
   @include e(cell-text) {
     overflow-wrap: break-word;
-    white-space: normal;
   }
 
   @include e(th-actions) {