feat(data-table): add expanded-row-remain-sticky option (#3488)

CHANGELOG.en-US.md

@@ -53,6 +53,7 @@
 - `n-drawer` supports RTL.
 - `n-input` adds `render-count` prop.
 - `n-input` adds `countTextColorDisabled` theme variable, closes [#3481](https://github.com/tusen-ai/naive-ui/issues/3481).
+- `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-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

@@ -54,6 +54,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).
 
 ## 2.32.1
 

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

@@ -77,6 +77,7 @@ 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. |  |

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

@@ -85,6 +85,7 @@ 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'` |  |

src/data-table/src/DataTable.tsx

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

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

@@ -147,6 +147,7 @@ export default defineComponent({
   setup (props) {
     const {
       slots: dataTableSlots,
+      bodyWidthRef,
       mergedExpandedRowKeysRef,
       mergedClsPrefixRef,
       mergedThemeRef,
@@ -179,6 +180,7 @@ export default defineComponent({
       onLoadRef,
       loadingKeySetRef,
       expandableRef,
+      expandedRowRemainStickyRef,
       setHeaderScrollLeft,
       doUpdateExpandedRowKeys,
       handleTableBodyScroll,
@@ -413,6 +415,7 @@ export default defineComponent({
       })
     })
     return {
+      bodyWidthRef,
       dataTableSlots,
       componentId,
       scrollbarInstRef,
@@ -473,6 +476,7 @@ export default defineComponent({
       maxHeight: maxHeightRef,
       loadingKeySet: loadingKeySetRef,
       expandable: expandableRef,
+      expandedRowRemainSticky: expandedRowRemainStickyRef,
       setHeaderScrollLeft,
       handleMouseenterTable,
       handleVirtualListScroll,
@@ -498,6 +502,7 @@ export default defineComponent({
       mergedTableLayout,
       flexHeight,
       loadingKeySet,
+      bodyWidthRef,
       onResize,
       setHeaderScrollLeft
     } = this
@@ -550,6 +555,7 @@ export default defineComponent({
               rowClassName,
               mergedSortState,
               mergedExpandedRowKeySet,
+              expandedRowRemainSticky,
               componentId,
               childTriggerColIndex,
               expandable,
@@ -661,7 +667,16 @@ export default defineComponent({
                       ]}
                       colspan={colCount}
                     >
-                      {renderExpand!(rawNode, actualRowIndex)}
+                      {expandedRowRemainSticky ? (
+                        <div
+                          class={`${mergedClsPrefix}-data-table-expand`}
+                          style={{ width: `${bodyWidthRef!}px` }}
+                        >
+                          {renderExpand!(rawNode, actualRowIndex)}
+                        </div>
+                      ) : (
+                        renderExpand!(rawNode, actualRowIndex)
+                      )}
                     </td>
                   </tr>
                 )

src/data-table/src/interface.ts

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

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

@@ -152,6 +152,13 @@ export default c([
       background-clip: padding-box;
       transition: background-color .3s var(--n-bezier);
     `, [
+      cB('data-table-expand', `
+        position: sticky;
+        left: 0;
+        overflow: hidden;
+        margin: calc(var(--n-th-padding) * -1);
+        padding: var(--n-th-padding);
+      `),
       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,6 +51,7 @@ export function useExpand (
       : props.defaultExpandedRowKeys
   )
   const controlledExpandedRowKeysRef = toRef(props, 'expandedRowKeys')
+  const expandedRowRemainStickyRef = toRef(props, 'expandedRowRemainSticky')
   const mergedExpandedRowKeysRef = useMergedState(
     controlledExpandedRowKeysRef,
     uncontrolledExpandedRowKeysRef
@@ -69,6 +70,7 @@ export function useExpand (
     uncontrolledExpandedRowKeysRef.value = expandedKeys
   }
   return {
+    expandedRowRemainStickyRef,
     mergedExpandedRowKeysRef,
     renderExpandRef,
     expandableRef,