diff --git a/packages/components/table-v2/src/renderers/left-table.tsx b/packages/components/table-v2/src/renderers/left-table.tsx index 83061bf89f..17aa19a833 100644 --- a/packages/components/table-v2/src/renderers/left-table.tsx +++ b/packages/components/table-v2/src/renderers/left-table.tsx @@ -9,7 +9,7 @@ type LeftTableProps = TableV2GridProps & { } const LeftTable: FunctionalComponent = (props, { slots }) => { - if (!props.columns) return + if (!props.columns.length) return const { leftTableRef, ...rest } = props diff --git a/packages/components/table-v2/src/renderers/right-table.tsx b/packages/components/table-v2/src/renderers/right-table.tsx new file mode 100644 index 0000000000..777440fc25 --- /dev/null +++ b/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 +} + +const LeftTable: FunctionalComponent = (props, { slots }) => { + if (!props.columns.length) return + + const { rightTableRef, ...rest } = props + + return ( + + {slots} +
+ ) +} + +export default LeftTable diff --git a/packages/components/table-v2/src/table-v2.tsx b/packages/components/table-v2/src/table-v2.tsx index f41f31ebc8..5643daf43e 100644 --- a/packages/components/table-v2/src/table-v2.tsx +++ b/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 {}
- // } - - // 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({
{tableSlots} {tableSlots} + {tableSlots}
) } diff --git a/packages/components/table-v2/src/use-table.ts b/packages/components/table-v2/src/use-table.ts index 387aa1f21c..d5ca0c29e2 100644 --- a/packages/components/table-v2/src/use-table.ts +++ b/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, diff --git a/packages/theme-chalk/src/table-v2.scss b/packages/theme-chalk/src/table-v2.scss index fef012256b..916a9a0898 100644 --- a/packages/theme-chalk/src/table-v2.scss +++ b/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; }