fix(data-table): ellipsis content in table cell would wrap with expand button when using tree data, closes #3755

CHANGELOG.en-US.md

@@ -24,6 +24,7 @@
 - Fix `n-select`'s `empty` slot action then it is an interactive component, closes [#4700](https://github.com/tusen-ai/naive-ui/issues/4700).
 - Fix `n-data-table` header and body's scrolling are not sync when using the keyboard, closes [#3941](https://github.com/tusen-ai/naive-ui/issues/3941).
 - Fix `n-data-table` drag column causing text selection in Safari, closes [#4957](https://github.com/tusen-ai/naive-ui/issues/4957).
+- Fix `n-data-table` ellipsis content in table cell would wrap with expand button when using tree data, closes [#3755](https://github.com/tusen-ai/naive-ui/issues/3755).
 
 ### Features
 

CHANGELOG.zh-CN.md

@@ -24,6 +24,7 @@
 - 修复 `n-select` 的 `empty` slot 为可交互组件时的行为，关闭 [#4700](https://github.com/tusen-ai/naive-ui/issues/4700)
 - 修复 `n-data-table` 使用按键滚动时 header 和 body 不同步，关闭 [#3941](https://github.com/tusen-ai/naive-ui/issues/3941)
 - 修复 `n-data-table` 在 Safari 中拖拽列时文本会被选中, closes [#4957](https://github.com/tusen-ai/naive-ui/issues/4957)
+- 修复 `n-data-table` 当使用树形表格时，某一列设置了固定宽度且 ellipsis: true 后，如果文字溢出，不会显示省略号，而是换行[#3755](https://github.com/tusen-ai/naive-ui/issues/3755)
 
 ### Features
 

src/data-table/src/TableParts/Body.tsx

@@ -796,6 +796,9 @@ export default defineComponent({
                       rowData,
                       actualRowIndex
                     )
+                    const indentOffsetStyle = {
+                      '--indent-offset': '' as string | number
+                    }
                     return (
                       <td
                         {...resolvedCellProps}
@@ -806,6 +809,7 @@ export default defineComponent({
                             left: pxfy(fixedColumnLeftMap[colKey]?.start),
                             right: pxfy(fixedColumnRightMap[colKey]?.start)
                           },
+                          indentOffsetStyle as CSSProperties,
                           resolvedCellProps?.style || ''
                         ]}
                         colspan={mergedColSpan}
@@ -840,7 +844,8 @@ export default defineComponent({
                         {hasChildren && colIndex === childTriggerColIndex
                           ? [
                               repeat(
-                                isSummary ? 0 : rowInfo.tmNode.level,
+                                (indentOffsetStyle['--indent-offset'] =
+                                  isSummary ? 0 : rowInfo.tmNode.level),
                                 <div
                                   class={`${mergedClsPrefix}-data-table-indent`}
                                   style={indentStyle}

src/data-table/src/TableParts/ExpandTrigger.tsx

@@ -33,6 +33,9 @@ export default defineComponent({
           this.expanded && `${clsPrefix}-data-table-expand-trigger--expanded`
         ]}
         onClick={this.onClick}
+        onMousedown={(e) => {
+          e.preventDefault()
+        }}
       >
         <NIconSwitchTransition>
           {{

src/data-table/src/styles/index.cssr.ts

@@ -48,6 +48,8 @@ const fixedColumnStyle = createFixedColumnStyle()
 
 // --n-box-shadow-before used in Body.tsx
 // --n-box-shadow-after used in Body.tsx
+
+// --indent-offset for ellipsis & expand trigger
 export default c([
   cB('data-table', `
     width: 100%;
@@ -390,6 +392,7 @@ export default c([
         white-space: nowrap;
         max-width: 100%;
         vertical-align: bottom;
+        max-width: calc(100% - var(--indent-offset, -1.5) * 16px - 24px);
       `),
       cM('selection, expand', `
         text-align: center;