diff --git a/packages/components/table-v2/src/common.ts b/packages/components/table-v2/src/common.ts index 656c42ce3c..0efaed3c0b 100644 --- a/packages/components/table-v2/src/common.ts +++ b/packages/components/table-v2/src/common.ts @@ -1,4 +1,4 @@ -import { definePropType } from '@element-plus/utils' +import { definePropType, mutable } from '@element-plus/utils' import type { CSSProperties } from 'vue' import type { Column, KeyType } from './types' @@ -31,6 +31,11 @@ export const dataType = { export const expandColumnKey = String +export const expandKeys = { + type: definePropType(Array), + default: () => mutable([]), +} as const + export const requiredNumber = { type: Number, required: true, @@ -38,7 +43,7 @@ export const requiredNumber = { export const rowKey = { type: definePropType([String, Number, Symbol]), - required: true, + default: 'id', } as const /** diff --git a/packages/components/table-v2/src/header.ts b/packages/components/table-v2/src/header.ts index 07b0832809..0e87c23edf 100644 --- a/packages/components/table-v2/src/header.ts +++ b/packages/components/table-v2/src/header.ts @@ -20,11 +20,13 @@ export const tableV2HeaderProps = buildProps({ }, headerHeight: { type: definePropType([Number, Array]), - required: true, + default: 50, }, rowWidth: requiredNumberType, - rowHeight: requiredNumberType, - + rowHeight: { + type: Number, + default: 50, + }, height: requiredNumberType, width: requiredNumberType, } as const) diff --git a/packages/components/table-v2/src/table.ts b/packages/components/table-v2/src/table.ts index 42c086db6c..1597b11cd9 100644 --- a/packages/components/table-v2/src/table.ts +++ b/packages/components/table-v2/src/table.ts @@ -1,4 +1,16 @@ import { buildProps, definePropType } from '@element-plus/utils' +import { + classType, + columns, + dataType, + expandKeys, + fixedDataType, + requiredNumber, + rowKey, +} from './common' +import { tableV2RowProps } from './row' +import { tableV2HeaderProps } from './header' +import { tableV2GridProps } from './grid' import type { ExtractPropTypes, StyleValue } from 'vue' import type { @@ -53,13 +65,17 @@ export type RowClassNameGetter = ( export type ColumnSortHandler = (params: ColumnSortParams) => void export const tableV2Props = buildProps({ + cache: tableV2GridProps.cache, + estimatedRowHeight: tableV2RowProps.estimatedRowHeight, + rowKey, /** * extra props deriver */ cellProps: { type: definePropType>([Object, Function]), }, - headerClassName: { + // Header attributes + headerClass: { type: definePropType>([ String, Function, @@ -77,55 +93,54 @@ export const tableV2Props = buildProps({ Function, ]), }, - rowClassName: { + headerHeight: tableV2HeaderProps.headerHeight, + /** + * Footer attributes + */ + footerHeight: { + type: Number, + default: 0, + }, + /** + * Row attributes + */ + rowClass: { type: definePropType>([String, Function]), }, rowProps: { type: definePropType>([Object, Function]), }, - + rowHeight: Number, /** * Data models */ - columns: { - type: definePropType[]>(Array), - required: true, - }, - fixedData: { - type: definePropType(Array), - }, - data: { - type: definePropType(Array), - }, + columns, + data: dataType, + fixedData: fixedDataType, /** * Expanded keys */ - expandedRowKeys: { - type: definePropType(Array), - }, - defaultExpandedRowKeys: { - type: definePropType(Array), - }, + expandColumnKey: tableV2RowProps.expandColumnKey, + expandedRowKeys: expandKeys, + defaultExpandedRowKeys: expandKeys, /** * Attributes */ - classNames: { - type: definePropType([String, Array]), - }, + class: classType, disabled: Boolean, - footerHeight: { - type: definePropType([Number, Array]), - }, - headerHeight: { - type: definePropType([Number, Array]), - }, + fixed: Boolean, style: { type: definePropType([String, Array, Object]), }, + width: requiredNumber, + height: Number, + maxHeight: Number, + sortBy: { type: definePropType<{ key: KeyType; order: SortOrder }>(Object), + default: () => ({} as { key: KeyType; order: SortOrder }), }, /** @@ -134,6 +149,10 @@ export const tableV2Props = buildProps({ onColumnSort: { type: definePropType>(Function), }, + onExpandedRowsChange: Function, + onRowExpand: Function, + onScroll: tableV2GridProps.onScroll, + rowEventHandlers: tableV2RowProps.rowEventHandlers, } as const) export type TableV2Props = ExtractPropTypes diff --git a/packages/components/table-v2/src/types.ts b/packages/components/table-v2/src/types.ts index 15a9299f8c..ecb629565e 100644 --- a/packages/components/table-v2/src/types.ts +++ b/packages/components/table-v2/src/types.ts @@ -1,4 +1,4 @@ -import type { RendererElement, RendererNode, StyleValue, VNode } from 'vue' +import type { CSSProperties, RendererElement, RendererNode, VNode } from 'vue' import type { sortOrders } from './constants' @@ -69,7 +69,7 @@ export type Column = { maxWidth?: number minWidth?: number resizable?: boolean - style?: StyleValue + style?: CSSProperties sortable?: boolean width: number /** @@ -83,6 +83,8 @@ export type Column = { [key: string]: any } +export type Columns = Column[] + export type CustomizedCellsType = VNode< RendererNode, RendererElement, diff --git a/packages/components/table-v2/src/useTable.ts b/packages/components/table-v2/src/useTable.ts new file mode 100644 index 0000000000..e4bae0c64d --- /dev/null +++ b/packages/components/table-v2/src/useTable.ts @@ -0,0 +1,119 @@ +import { computed, unref } from 'vue' + +import type { CSSProperties, Ref } from 'vue' +import type { Column, Columns } from './types' + +const getColumnStyle = ( + column: Column, + fixedColumn: boolean +): CSSProperties => { + const style = { + ...(column.style ?? {}), + width: column.width, + } + + if (!fixedColumn) { + if (column.maxWidth) style.maxWidth = column.maxWidth + if (column.minWidth) style.maxWidth = column.minWidth + } + + return style +} + +function useColumns(columns: Ref>, fixed: Ref) { + let mappedColumnsCopy: Columns = [] + + const mappedColumns = computed(() => { + const _columns = unref(columns) + const ret = _columns.map((column) => { + if (!column.resizable) return column + + let { width } = column + if (column.resizable) { + const idx = _columns.findIndex( + (predicated) => column.key === predicated.key + ) + if (idx >= 0 && _columns[idx].width === column.width) { + width = mappedColumnsCopy[idx].width + } + } + return { + ...column, + width, + } + }) + + mappedColumnsCopy = ret + return ret + }) + + const visibleColumns = computed(() => { + return unref(mappedColumns).filter((column) => !column.hidden) + }) + + const fixedColumnsOnLeft = computed(() => + unref(visibleColumns).filter( + (column) => column.fixed === 'left' || column.fixed === true + ) + ) + + const fixedColumnOnRight = computed(() => + unref(visibleColumns).filter((column) => column.fixed === 'right') + ) + + const normalColumns = computed(() => + unref(visibleColumns).filter((column) => !column.fixed) + ) + + const mainColumns = computed(() => { + const ret: Columns = [] + + unref(fixedColumnsOnLeft).forEach((column) => { + ret.push({ + ...column, + isPlaceholder: true, + }) + }) + + unref(normalColumns).forEach((column) => { + ret.push(column) + }) + + unref(fixedColumnOnRight).forEach((column) => { + ret.push({ + ...column, + isPlaceholder: true, + }) + }) + + return ret + }) + + const columnsStyle = computed(() => { + const columns = unref(mappedColumns) + + return columns.reduce['key'], CSSProperties>>( + (style, column) => { + style[column.key] = getColumnStyle(column, unref(fixed)) + return style + }, + {} + ) + }) + + return { + columns: mappedColumns, + columnsStyle, + fixedColumnsOnLeft, + fixedColumnOnRight, + mainColumns, + normalColumns, + visibleColumns, + } +} + +function useTable() { + // to be filled +} + +export { useColumns, useTable }