refactor(data-table): sticky-expanded-rows

CHANGELOG.en-US.md

@@ -54,7 +54,7 @@
 - `n-input` adds `render-count` prop.
 - `n-input` adds `countTextColorDisabled` theme variable, closes [#3481](https://github.com/tusen-ai/naive-ui/issues/3481).
 - `n-statistic` adds `valueFontSize` theme variable, closes [#3510](https://github.com/tusen-ai/naive-ui/issues/3510).
-- `n-data-table` adds `expanded-row-remain-sticky` to allow expanded content remains sticky, closes [#3485](https://github.com/tusen-ai/naive-ui/issues/3485).
+- `n-data-table` adds `sticky-expanded-rows` to allow expanded content remains sticky, closes [#3485](https://github.com/tusen-ai/naive-ui/issues/3485).
 - `n-tree` adds `scrollTo` method, closes [#3480](https://github.com/tusen-ai/naive-ui/issues/3480).
 - `n-pagination` adds `display-order` prop, closes [#3466](https://github.com/tusen-ai/naive-ui/issues/3466).
 - `n-grid` adds `layout-shift-disabled` prop, closes [#3301](https://github.com/tusen-ai/naive-ui/issues/3301).

CHANGELOG.zh-CN.md

@@ -55,7 +55,7 @@
 - `n-tree` 新增 `scrollTo` 方法，关闭 [#3480](https://github.com/tusen-ai/naive-ui/issues/3480)
 - `n-pagination` 新增 `display-order` 属性，关闭 [#3466](https://github.com/tusen-ai/naive-ui/issues/3466)
 - `n-grid` 新增 `layout-shift-disabled` 属性，关闭 [#3301](https://github.com/tusen-ai/naive-ui/issues/3301)
-- `n-data-table` 新增 `expanded-row-remain-sticky` 属性，支持固定展开内容，关闭 [#3485](https://github.com/tusen-ai/naive-ui/issues/3485).
+- `n-data-table` 新增 `sticky-expanded-rows` 属性，支持固定展开内容，关闭 [#3485](https://github.com/tusen-ai/naive-ui/issues/3485).
 
 ## 2.32.1
 

src/data-table/demos/enUS/index.demo-entry.md

@@ -77,7 +77,6 @@ render-cell.vue
 | default-expanded-row-keys | `Array<string \| number>` | `[]` | The key value of the expanded tree data by default |  |
 | default-expand-all | `boolean` | `false` | Whether to expand all expandable rows. Can't be used with async expanding data. | 2.30.4 |
 | expanded-row-keys | `Array<string \| number>` | `undefined` | Expanded row keys. |  |
-| expanded-row-remain-sticky | `boolean` | `false` | Expanded row content remains sticky. | 2.33 |
 | pagination-behavior-on-filter | `'first' \| 'current'` | `'current'` | The behavior of pagination after filter state is changed. `'first'` means returning to first page on filter, `'current'` means keep at current page on filter. | 2.28.3 |
 | flex-height | `boolean` | `false` | Whether to make table body's height auto fit table area height. Make it enabled will make `table-layout` always set to `'fixed'`. |  |
 | indent | `number` | `16` | Indent of row content when using tree data. |  |
@@ -95,6 +94,7 @@ render-cell.vue
 | single-column | `boolean` | `false` | Whether rows are not divided. If the prop is `true`, table cell has no `border-bottom`. |  |
 | single-line | `boolean` | `true` | Whether columns are not divided. If the prop is `true`, table cell has no `border-right`. |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Table size. |  |
+| sticky-expanded-rows | `boolean` | `false` | Expanded row content remains sticky. | NEXT_VERSION |
 | striped | `boolean` | `false` | Whether to show zebra stripes on rows. |  |
 | summary | `DataTableCreateSummary` | `undefined` | Data of table summary row. For types, see <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a>. |  |
 | table-layout | `'auto' \| 'fixed'` | `'auto'` | Style `table-layout` of the table. When `ellipsis` or `max-height` or `flex-height` are set, it will always be `'fixed'` regardless of what you set. |  |

src/data-table/demos/zhCN/index.demo-entry.md

@@ -85,7 +85,6 @@ expandable-debug.vue
 | default-expanded-row-keys | `Array<string \| number>` | `[]` | 默认展开行的 key 值 |  |
 | default-expand-all | `boolean` | `false` | 是否默认展开全部可展开的行，不可在异步展开行时使用 | 2.30.4 |
 | expanded-row-keys | `Array<string \| number>` | `undefined` | 展开行的 key 值 |  |
-| expanded-row-remain-sticky | `boolean` | `false` | 展开行是否不随表格横向滚动 | 2.33 |
 | indent | `number` | `16` | 使用树形数据时行内容的缩进 |  |
 | pagination-behavior-on-filter | `'first' \| 'current'` | `'current'` | 过滤操作后页面的状态，`'first'` 为回到首页，`'current'` 为停留在当前页 | 2.28.3 |
 | flex-height | `boolean` | `false` | 是否让表格主体的高度自动适应整个表格区域的高度，打开这个选项会让 `table-layout` 始终为 `'fixed'` |  |
@@ -103,6 +102,7 @@ expandable-debug.vue
 | single-column | `boolean` | `false` | 是否不设定行的分割线，当参数为`true`时，则单元格没有下边线 |  |
 | single-line | `boolean` | `true` | 是否不设定列的分割线，当参数值为 `true` 时，则单元格没有右边线 |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 表格的尺寸 |  |
+| sticky-expanded-rows | `boolean` | `false` | 展开行是否不随表格横向滚动 | NEXT_VERSION |
 | striped | `boolean` | `false` | 是否使用斑马线条纹 |  |
 | summary | `DataTableCreateSummary` | `undefined` | 表格总结栏的数据，类型见 <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a> |  |
 | table-layout | `'auto' \| 'fixed'` | `'auto'` | 表格的 `table-layout` 样式属性，在设定 `ellipsis` 或 `max-height` 的情况下固定为 `'fixed'` |  |

src/data-table/src/DataTable.tsx

@@ -108,7 +108,7 @@ export const dataTableProps = {
   },
   defaultExpandAll: Boolean,
   expandedRowKeys: Array as PropType<RowKey[]>,
-  expandedRowRemainSticky: Boolean,
+  stickyExpandedRows: Boolean,
   virtualScroll: Boolean,
   tableLayout: {
     type: String as PropType<'auto' | 'fixed'>,
@@ -288,7 +288,7 @@ export default defineComponent({
       paginatedDataRef
     })
     const {
-      expandedRowRemainStickyRef,
+      stickyExpandedRowsRef,
       mergedExpandedRowKeysRef,
       renderExpandRef,
       expandableRef,
@@ -363,7 +363,7 @@ export default defineComponent({
       localeRef,
       scrollPartRef,
       expandableRef,
-      expandedRowRemainStickyRef,
+      stickyExpandedRowsRef,
       rowKeyRef: toRef(props, 'rowKey'),
       renderExpandRef,
       summaryRef: toRef(props, 'summary'),

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

@@ -180,7 +180,7 @@ export default defineComponent({
       onLoadRef,
       loadingKeySetRef,
       expandableRef,
-      expandedRowRemainStickyRef,
+      stickyExpandedRowsRef,
       setHeaderScrollLeft,
       doUpdateExpandedRowKeys,
       handleTableBodyScroll,
@@ -415,7 +415,7 @@ export default defineComponent({
       })
     })
     return {
-      bodyWidthRef,
+      bodyWidth: bodyWidthRef,
       dataTableSlots,
       componentId,
       scrollbarInstRef,
@@ -476,7 +476,7 @@ export default defineComponent({
       maxHeight: maxHeightRef,
       loadingKeySet: loadingKeySetRef,
       expandable: expandableRef,
-      expandedRowRemainSticky: expandedRowRemainStickyRef,
+      stickyExpandedRows: stickyExpandedRowsRef,
       setHeaderScrollLeft,
       handleMouseenterTable,
       handleVirtualListScroll,
@@ -502,7 +502,6 @@ export default defineComponent({
       mergedTableLayout,
       flexHeight,
       loadingKeySet,
-      bodyWidthRef,
       onResize,
       setHeaderScrollLeft
     } = this
@@ -555,7 +554,7 @@ export default defineComponent({
               rowClassName,
               mergedSortState,
               mergedExpandedRowKeySet,
-              expandedRowRemainSticky,
+              stickyExpandedRows,
               componentId,
               childTriggerColIndex,
               expandable,
@@ -643,6 +642,10 @@ export default defineComponent({
               rowIndexToKey[rowIndex] = tmNode.key
             })
 
+            const bodyWidth = stickyExpandedRows ? this.bodyWidth : null
+            const bodyWidthPx =
+              bodyWidth === null ? undefined : `${bodyWidth}px`
+
             const renderRow = (
               rowInfo: RowRenderInfo,
               displayedRowIndex: number,
@@ -667,10 +670,12 @@ export default defineComponent({
                       ]}
                       colspan={colCount}
                     >
-                      {expandedRowRemainSticky ? (
+                      {stickyExpandedRows ? (
                         <div
                           class={`${mergedClsPrefix}-data-table-expand`}
-                          style={{ width: `${bodyWidthRef!}px` }}
+                          style={{
+                            width: bodyWidthPx
+                          }}
                         >
                           {renderExpand!(rawNode, actualRowIndex)}
                         </div>

src/data-table/src/interface.ts

@@ -224,7 +224,7 @@ export interface DataTableInjection {
   loadingKeySetRef: Ref<Set<RowKey>>
   paginationBehaviorOnFilterRef: Ref<'current' | 'first'>
   expandableRef: Ref<Expandable<any> | undefined>
-  expandedRowRemainStickyRef: Ref<boolean>
+  stickyExpandedRowsRef: Ref<boolean>
   doUpdatePage: (page: number) => void
   doUpdateExpandedRowKeys: (keys: RowKey[]) => void
   doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void

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

@@ -143,10 +143,10 @@ export default c([
         iconSwitchTransition()
       ])
     ]),
-    cB('data-table-thead', {
-      transition: 'background-color .3s var(--n-bezier)',
-      backgroundColor: 'var(--n-merged-th-color)'
-    }),
+    cB('data-table-thead', `
+      transition: background-color .3s var(--n-bezier);
+      background-color: var(--n-merged-th-color);
+    `),
     cB('data-table-tr', `
       box-sizing: border-box;
       background-clip: padding-box;
@@ -158,6 +158,7 @@ export default c([
         overflow: hidden;
         margin: calc(var(--n-th-padding) * -1);
         padding: var(--n-th-padding);
+        box-sizing: border-box;
       `),
       cM('striped', 'background-color: var(--n-merged-td-color-striped);', [
         cB('data-table-td', 'background-color: var(--n-merged-td-color-striped);')

src/data-table/src/use-expand.ts

@@ -51,7 +51,7 @@ export function useExpand (
       : props.defaultExpandedRowKeys
   )
   const controlledExpandedRowKeysRef = toRef(props, 'expandedRowKeys')
-  const expandedRowRemainStickyRef = toRef(props, 'expandedRowRemainSticky')
+  const stickyExpandedRowsRef = toRef(props, 'stickyExpandedRows')
   const mergedExpandedRowKeysRef = useMergedState(
     controlledExpandedRowKeysRef,
     uncontrolledExpandedRowKeysRef
@@ -70,7 +70,7 @@ export function useExpand (
     uncontrolledExpandedRowKeysRef.value = expandedKeys
   }
   return {
-    expandedRowRemainStickyRef,
+    stickyExpandedRowsRef,
     mergedExpandedRowKeysRef,
     renderExpandRef,
     expandableRef,