feat(data-table): make expand content sticky by default

tusen-ai · Aug 11, 2022 · 23ecd62 · 23ecd62
1 parent 1ed0aec
commit 23ecd62
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -147,6 +147,7 @@ export default defineComponent({
   setup (props) {
     const {
       slots: dataTableSlots,
+      bodyWidthRef,
       mergedExpandedRowKeysRef,
       mergedClsPrefixRef,
       mergedThemeRef,
@@ -412,6 +413,7 @@ export default defineComponent({
       })
     })
     return {
+      bodyWidthRef,
       dataTableSlots,
       componentId,
       scrollbarInstRef,
@@ -496,6 +498,7 @@ export default defineComponent({
       mergedTableLayout,
       flexHeight,
       loadingKeySet,
+      bodyWidthRef,
       onResize,
       setHeaderScrollLeft
     } = this
@@ -654,7 +657,14 @@ export default defineComponent({
                       ]}
                       colspan={colCount}
                     >
-                      {renderExpand!(rawNode, actualRowIndex)}
+                      <div
+                        class={`${mergedClsPrefix}-data-table-expand`}
+                        style={{
+                          width: bodyWidthRef ? `${bodyWidthRef}px` : undefined
+                        }}
+                      >
+                        {renderExpand!(rawNode, actualRowIndex)}
+                      </div>
                     </td>
                   </tr>
                 )

diff --git a/src/data-table/src/styles/index.cssr.ts b/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);')
       ]),