feat(components): [virtual-table] renderers (#7201)

- Add RightTable component for rendering right fixed columns
- Add style for right fixed columns
- Fix the judgment bug for left fixed columns

packages/components/table-v2/src/renderers/left-table.tsx

@@ -9,7 +9,7 @@ type LeftTableProps = TableV2GridProps & {
 }
 
 const LeftTable: FunctionalComponent<LeftTableProps> = (props, { slots }) => {
-  if (!props.columns) return
+  if (!props.columns.length) return
 
   const { leftTableRef, ...rest } = props
 

packages/components/table-v2/src/renderers/right-table.tsx

@@ -0,0 +1,23 @@
+import Table from '../table-grid'
+
+import type { FunctionalComponent, Ref } from 'vue'
+import type { TableV2GridProps } from '../grid'
+import type { TableGridInstance } from '../table-grid'
+
+type LeftTableProps = TableV2GridProps & {
+  rightTableRef: Ref<TableGridInstance | undefined>
+}
+
+const LeftTable: FunctionalComponent<LeftTableProps> = (props, { slots }) => {
+  if (!props.columns.length) return
+
+  const { rightTableRef, ...rest } = props
+
+  return (
+    <Table ref={rightTableRef} {...rest}>
+      {slots}
+    </Table>
+  )
+}
+
+export default LeftTable

packages/components/table-v2/src/table-v2.tsx

@@ -7,6 +7,7 @@ import { tableV2Props } from './table'
 // renderers
 import MainTable from './renderers/main-table'
 import LeftTable from './renderers/left-table'
+import RightTable from './renderers/right-table'
 import Row from './renderers/row'
 import Cell from './renderers/cell'
 import Header from './renderers/header'
@@ -30,11 +31,12 @@ const TableV2 = defineComponent({
       columnsStyles,
       columnsTotalWidth,
       fixedColumnsOnLeft,
-      // fixedColumnOnRight,
+      fixedColumnOnRight,
       mainColumns,
       mainTableHeight,
       fixedTableHeight,
       leftTableWidth,
+      rightTableWidth,
       data,
       depthMap,
       expandedRowKeys,
@@ -42,6 +44,7 @@ const TableV2 = defineComponent({
       hoveringRowKey,
       mainTableRef,
       leftTableRef,
+      rightTableRef,
       isResetting,
       isScrolling,
       resizingKey,
@@ -77,17 +80,6 @@ const TableV2 = defineComponent({
       () => unref(bodyWidth) + (props.fixed ? unref(vScrollbarSize) : 0)
     )
 
-    // function renderLeftTable() {
-    //   const columns = unref(fixedColumnsOnLeft)
-    //   if (columns.length === 0) return
-
-    //   const { estimatedRowHeight, headerHeight, rowHeight, width } = props
-
-    //   return <Table>{}</Table>
-    // }
-
-    // function renderRightTable() {}
-
     // function renderFooter() {}
 
     provide(TableV2InjectionKey, {
@@ -163,6 +155,27 @@ const TableV2 = defineComponent({
         onScroll: onVerticalScroll,
       }
 
+      const rightColumnsWidth = unref(rightTableWidth)
+      const rightColumnsWidthWithScrollbar =
+        rightColumnsWidth + unref(vScrollbarSize)
+
+      const rightTableProps = {
+        cache,
+        class: ns.e('right'),
+        columns: unref(fixedColumnOnRight),
+        data: _data,
+        estimatedRowHeight,
+        rightTableRef,
+        rowHeight,
+        bodyWidth: rightColumnsWidthWithScrollbar,
+        headerWidth: rightColumnsWidthWithScrollbar,
+        headerHeight,
+        height: _fixedTableHeight,
+        useIsScrolling,
+        width: rightColumnsWidthWithScrollbar,
+        onScroll: onVerticalScroll,
+      }
+
       const tableRowProps = {
         ns,
         depthMap: unref(depthMap),
@@ -237,6 +250,7 @@ const TableV2 = defineComponent({
         <div class={[ns.b(), ns.e('root')]} style={unref(rootStyle)}>
           <MainTable {...mainTableProps}>{tableSlots}</MainTable>
           <LeftTable {...leftTableProps}>{tableSlots}</LeftTable>
+          <RightTable {...rightTableProps}>{tableSlots}</RightTable>
         </div>
       )
     }

packages/components/table-v2/src/use-table.ts

@@ -140,8 +140,14 @@ function useTable(props: TableV2Props) {
     return Math.min(tableHeight, totalHeight)
   })
 
+  const mapColumn = (column: TableV2Props['columns'][number]) => column.width
+
   const leftTableWidth = computed(() =>
-    sum(unref(fixedColumnsOnLeft).map((column) => column.width))
+    sum(unref(fixedColumnsOnLeft).map(mapColumn))
+  )
+
+  const rightTableWidth = computed(() =>
+    sum(unref(fixedColumnOnRight).map(mapColumn))
   )
 
   const headerHeight = computed(() => sum(props.headerHeight))
@@ -399,6 +405,7 @@ function useTable(props: TableV2Props) {
     mainTableHeight,
     fixedTableHeight,
     leftTableWidth,
+    rightTableWidth,
 
     // methods
     scrollTo,

packages/theme-chalk/src/table-v2.scss

@@ -29,7 +29,6 @@
   flex-direction: column-reverse;
   position: absolute;
   overflow: hidden;
-  left: 0;
   top: 0;
   background-color: getCssVar('bg', 'color');
 }
@@ -49,13 +48,21 @@
 
   @include e('main') {
     @include table-root;
+    left: 0;
   }
 
   @include e('left') {
     @include table-root;
+    left: 0;
     box-shadow: 2px 0 4px 0 rgb(0 0 0 / 6%);
   }
 
+  @include e('right') {
+    @include table-root;
+    right: 0;
+    box-shadow: -2px 0 4px 0 rgb(0 0 0 / 6%);
+  }
+
   @include e('header-wrapper') {
     overflow: hidden;
   }