@v-c/table 1.1.9 → 1.2.1

package/dist/Body/BodyRow.d.ts

@@ -26,7 +26,207 @@ export declare function getCellProps<RecordType>(rowInfo: ReturnType<typeof useR
     key: import('../interface').Key;
     fixedInfo: import('../utils/fixUtil').FixedInfo;
     appendCellNode: any;
-    additionalCellProps: Partial<import('../interface').CellAttributes>;
+    additionalCellProps: {
+        innerHTML?: string | undefined;
+        class?: import('vue').ClassValue | undefined;
+        style?: import('vue').StyleValue | undefined;
+        accesskey?: string | undefined;
+        contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextmenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        enterKeyHint?: import('vue').HTMLAttributes["enterkeyhint"];
+        hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
+        id?: string | undefined;
+        inert?: (boolean | "true" | "false") | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        spellcheck?: (boolean | "true" | "false") | undefined;
+        tabindex?: (string | number) | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radiogroup?: string | undefined;
+        role?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autocapitalize?: string | undefined;
+        autocorrect?: string | undefined;
+        autosave?: string | undefined;
+        color?: string | undefined;
+        itemprop?: string | undefined;
+        itemscope?: (boolean | "true" | "false") | undefined;
+        itemtype?: string | undefined;
+        itemid?: string | undefined;
+        itemref?: string | undefined;
+        results?: (string | number) | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string;
+        part?: string;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-colcount'?: (string | number) | undefined;
+        'aria-colindex'?: (string | number) | undefined;
+        'aria-colspan'?: (string | number) | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: (string | number) | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: (string | number) | undefined;
+        'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: (string | number) | undefined;
+        'aria-rowindex'?: (string | number) | undefined;
+        'aria-rowspan'?: (string | number) | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: (string | number) | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: (string | number) | undefined;
+        'aria-valuemin'?: (string | number) | undefined;
+        'aria-valuenow'?: (string | number) | undefined;
+        'aria-valuetext'?: string | undefined;
+        onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+        onCut?: ((payload: ClipboardEvent) => void) | undefined;
+        onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+        onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+        onDrag?: ((payload: DragEvent) => void) | undefined;
+        onDragend?: ((payload: DragEvent) => void) | undefined;
+        onDragenter?: ((payload: DragEvent) => void) | undefined;
+        onDragexit?: ((payload: DragEvent) => void) | undefined;
+        onDragleave?: ((payload: DragEvent) => void) | undefined;
+        onDragover?: ((payload: DragEvent) => void) | undefined;
+        onDragstart?: ((payload: DragEvent) => void) | undefined;
+        onDrop?: ((payload: DragEvent) => void) | undefined;
+        onFocus?: ((payload: FocusEvent) => void) | undefined;
+        onFocusin?: ((payload: FocusEvent) => void) | undefined;
+        onFocusout?: ((payload: FocusEvent) => void) | undefined;
+        onBlur?: ((payload: FocusEvent) => void) | undefined;
+        onChange?: ((payload: Event) => void) | undefined;
+        onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+        onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+        onInput?: ((payload: InputEvent) => void) | undefined;
+        onReset?: ((payload: Event) => void) | undefined;
+        onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+        onInvalid?: ((payload: Event) => void) | undefined;
+        onFullscreenchange?: ((payload: Event) => void) | undefined;
+        onFullscreenerror?: ((payload: Event) => void) | undefined;
+        onLoad?: ((payload: Event) => void) | undefined;
+        onError?: ((payload: Event) => void) | undefined;
+        onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+        onDblclick?: ((payload: MouseEvent) => void) | undefined;
+        onMousedown?: ((payload: MouseEvent) => void) | undefined;
+        onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+        onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+        onMousemove?: ((payload: MouseEvent) => void) | undefined;
+        onMouseout?: ((payload: MouseEvent) => void) | undefined;
+        onMouseover?: ((payload: MouseEvent) => void) | undefined;
+        onMouseup?: ((payload: MouseEvent) => void) | undefined;
+        onAbort?: ((payload: UIEvent) => void) | undefined;
+        onCanplay?: ((payload: Event) => void) | undefined;
+        onCanplaythrough?: ((payload: Event) => void) | undefined;
+        onDurationchange?: ((payload: Event) => void) | undefined;
+        onEmptied?: ((payload: Event) => void) | undefined;
+        onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+        onEnded?: ((payload: Event) => void) | undefined;
+        onLoadeddata?: ((payload: Event) => void) | undefined;
+        onLoadedmetadata?: ((payload: Event) => void) | undefined;
+        onLoadstart?: ((payload: Event) => void) | undefined;
+        onPause?: ((payload: Event) => void) | undefined;
+        onPlay?: ((payload: Event) => void) | undefined;
+        onPlaying?: ((payload: Event) => void) | undefined;
+        onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+        onRatechange?: ((payload: Event) => void) | undefined;
+        onSeeked?: ((payload: Event) => void) | undefined;
+        onSeeking?: ((payload: Event) => void) | undefined;
+        onStalled?: ((payload: Event) => void) | undefined;
+        onSuspend?: ((payload: Event) => void) | undefined;
+        onTimeupdate?: ((payload: Event) => void) | undefined;
+        onVolumechange?: ((payload: Event) => void) | undefined;
+        onWaiting?: ((payload: Event) => void) | undefined;
+        onSelect?: ((payload: Event) => void) | undefined;
+        onScroll?: ((payload: Event) => void) | undefined;
+        onScrollend?: ((payload: Event) => void) | undefined;
+        onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+        onTouchend?: ((payload: TouchEvent) => void) | undefined;
+        onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+        onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+        onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+        onClick?: ((payload: PointerEvent) => void) | undefined;
+        onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+        onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+        onPointermove?: ((payload: PointerEvent) => void) | undefined;
+        onPointerup?: ((payload: PointerEvent) => void) | undefined;
+        onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+        onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+        onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+        onPointerover?: ((payload: PointerEvent) => void) | undefined;
+        onPointerout?: ((payload: PointerEvent) => void) | undefined;
+        onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+        onToggle?: ((payload: ToggleEvent) => void) | undefined;
+        onWheel?: ((payload: WheelEvent) => void) | undefined;
+        onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+        onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+        onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+        align?: "left" | "center" | "right" | "justify" | "char" | undefined;
+        colspan?: number | undefined;
+        headers?: string | undefined;
+        rowspan?: number | undefined;
+        scope?: string | undefined;
+        abbr?: string | undefined;
+        height?: (string | number) | undefined;
+        width?: (string | number) | undefined;
+        valign?: "top" | "middle" | "bottom" | "baseline" | undefined;
+        colSpan?: number;
+        rowSpan?: number;
+        className?: string;
+    };
     hoverRowSpan: number | undefined;
 };
 declare const BodyRow: import('vue').DefineComponent<BodyRowProps<any>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BodyRowProps<any>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Body/BodyRow.js

@@ -24,7 +24,7 @@ function getCellProps(rowInfo, record, column, colIndex, indent, index, rowKeys
 		record,
 		onExpand: onTriggerExpand
 	})]);
-	const additionalCellProps = column.onCell?.(record, index) || {};
+	const additionalCellProps = { ...column.onCell?.(record, index) };
 	let hoverRowSpan;
 	if (expandedRowOffset && expandable.value && colIndex < expandedRowOffset) {
 		const { rowSpan = 1 } = additionalCellProps;
@@ -75,6 +75,7 @@ var BodyRow = /* @__PURE__ */ defineComponent({
 			const flattenColumns = tableContext.flattenColumns;
 			const expandedRowClassName = tableContext.expandedRowClassName;
 			const expandedRowRender = tableContext.expandedRowRender;
+			const forceRender = tableContext.forceRender;
 			const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 			const rowPropsStyle = rowProps.value?.style;
 			const mergedRowStyle = {
@@ -116,7 +117,7 @@ var BodyRow = /* @__PURE__ */ defineComponent({
 				}), null);
 			})) ? _slot : { default: () => [_slot] });
 			let expandRowNode;
-			if (rowSupportExpand.value && (expandedRef.value || expanded.value)) {
+			if (rowSupportExpand.value && (forceRender || expandedRef.value || expanded.value)) {
 				const expandContent = expandedRowRender(record, index, indent + 1, expanded.value);
 				const computedExpandedRowClassName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 				expandRowNode = createVNode(ExpandedRow, {

package/dist/Cell/index.d.ts

@@ -17,6 +17,7 @@ export interface CellProps<RecordType extends DefaultRecordType> {
     children?: any;
     colSpan?: number;
     rowSpan?: number;
+    /** @private Original rowSpan before patching it for expanded rows */
     hoverRowSpan?: number;
     scope?: ScopeType;
     ellipsis?: CellEllipsisType;

package/dist/Table.js

@@ -86,7 +86,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 	});
 	const customizeScrollBody = computed(() => getComponent(["body"]));
 	const [startRow, endRow, onHover] = useHover();
-	const [expandableConfig, expandableType, mergedExpandedKeys, mergedExpandIcon, mergedChildrenColumnName, onTriggerExpand] = useExpand(props, mergedData, getRowKey);
+	const [expandableConfig, expandableType, mergedExpandedKeys, mergedExpandIcon, mergedChildrenColumnName, onTriggerExpand, expandAllInfo] = useExpand(props, mergedData, getRowKey);
 	const componentWidth = ref(0);
 	const slotChildren = shallowRef(null);
 	const [columns, flattenColumns, flattenScrollX] = useColumns({
@@ -99,6 +99,8 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 		getRowKey,
 		onTriggerExpand,
 		expandIcon: mergedExpandIcon,
+		ExpandIcon: computed(() => props.components?.ExpandIcon),
+		expandAllInfo,
 		rowExpandable: computed(() => expandableConfig.value.rowExpandable),
 		expandIconColumnIndex: computed(() => expandableConfig.value.expandIconColumnIndex),
 		expandedRowOffset: expandableConfig.value.expandedRowOffset,
@@ -337,6 +339,7 @@ var ImmutableTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, exp
 		tableContext.expandableType = expandableType.value;
 		tableContext.expandRowByClick = expandableConfig.value.expandRowByClick;
 		tableContext.expandedRowRender = expandableConfig.value.expandedRowRender;
+		tableContext.forceRender = expandableConfig.value.forceRender ?? false;
 		tableContext.expandedRowOffset = expandableConfig.value.expandedRowOffset;
 		tableContext.onTriggerExpand = onTriggerExpand;
 		tableContext.expandIconColumnIndex = expandableConfig.value.expandIconColumnIndex;

package/dist/VirtualTable/BodyLine.js

@@ -33,14 +33,18 @@ var BodyLine = /* @__PURE__ */ defineComponent({
 			const { rowSupportExpand, expanded, rowProps } = rowInfo;
 			const expandedRowRender = tableContext.expandedRowRender;
 			const expandedRowClassName = tableContext.expandedRowClassName;
+			const forceRender = tableContext.forceRender;
 			let expandRowNode;
-			if (rowSupportExpand.value && expanded.value) {
+			if (!extra && rowSupportExpand.value && (forceRender || expanded.value)) {
 				const expandContent = expandedRowRender(record, index, indent + 1, expanded.value);
 				const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 				let additionalProps = {};
 				if (tableContext.fixColumn) additionalProps = { style: { ["--virtual-width"]: `${tableContext.componentWidth}px` } };
 				const rowCellCls = `${tableContext.prefixCls}-expanded-row-cell`;
-				expandRowNode = createVNode(RowComponent, { "class": clsx(`${tableContext.prefixCls}-expanded-row`, `${tableContext.prefixCls}-expanded-row-level-${indent + 1}`, expandedClsName) }, { default: () => [createVNode(Cell, {
+				expandRowNode = createVNode(RowComponent, {
+					"class": clsx(`${tableContext.prefixCls}-expanded-row`, `${tableContext.prefixCls}-expanded-row-level-${indent + 1}`, expandedClsName),
+					"style": { display: expanded.value ? void 0 : "none" }
+				}, { default: () => [createVNode(Cell, {
 					"component": CellComponent,
 					"prefixCls": tableContext.prefixCls,
 					"className": clsx(rowCellCls, { [`${rowCellCls}-fixed`]: tableContext.fixColumn }),

package/dist/context/TableContext.d.ts

@@ -28,6 +28,7 @@ export interface TableContextProps<RecordType = any> {
     expandableType: ExpandableType;
     expandRowByClick: boolean;
     expandedRowRender: ExpandedRowRender<RecordType>;
+    forceRender: boolean;
     expandIcon: RenderExpandIcon<RecordType>;
     onTriggerExpand: TriggerEventHandler<RecordType>;
     expandIconColumnIndex: number;

package/dist/hooks/useColumns/index.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'vue';
-import { ColumnsType, ColumnType, Direction, FixedType, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../../interface';
+import { ColumnsType, ColumnType, Direction, ExpandColumnTitle, ExpandIconComponent, ExpandIconProps, FixedType, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../../interface';
 export declare function convertChildrenToColumns<RecordType>(children: any): ColumnsType<RecordType>;
 export default function useColumns<RecordType>(options: {
     prefixCls?: Ref<string> | string;
@@ -7,10 +7,12 @@ export default function useColumns<RecordType>(options: {
     children?: any;
     expandable: Ref<boolean> | boolean;
     expandedKeys: Ref<Set<Key>> | Set<Key>;
-    columnTitle?: Ref<any> | any;
+    columnTitle?: Ref<ExpandColumnTitle | undefined> | ExpandColumnTitle;
     getRowKey: Ref<GetRowKey<RecordType>> | GetRowKey<RecordType>;
     onTriggerExpand: TriggerEventHandler<RecordType>;
     expandIcon?: Ref<RenderExpandIcon<RecordType> | undefined> | RenderExpandIcon<RecordType>;
+    ExpandIcon?: Ref<ExpandIconComponent<RecordType> | undefined> | ExpandIconComponent<RecordType>;
+    expandAllInfo?: Ref<Pick<ExpandIconProps<RecordType>, 'expanded' | 'expandable' | 'onClick'> | undefined>;
     rowExpandable?: Ref<((record: RecordType) => boolean) | undefined> | ((record: RecordType) => boolean) | undefined;
     expandIconColumnIndex?: Ref<number | undefined> | number;
     expandedRowOffset?: number;

package/dist/hooks/useColumns/index.js

@@ -1,10 +1,19 @@
 import { INTERNAL_COL_DEFINE } from "../../utils/legacyUtil.js";
+import { DefaultExpandIcon } from "../../utils/expandUtil.js";
 import { EXPAND_COLUMN } from "../../constant.js";
 import useWidthColumns from "./useWidthColumns.js";
-import { computed, createVNode, isVNode, unref } from "vue";
+import { computed, createVNode, h, isVNode, toRaw, unref } from "vue";
 import { warning } from "@v-c/util";
 import { flattenChildren } from "@v-c/util/dist/props-util";
 //#region src/hooks/useColumns/index.tsx
+/**
+* `EXPAND_COLUMN` is a sentinel matched by reference. When `columns` comes from a deep
+* reactive source (component props, `reactive()` or `ref()`), every entry is handed out
+* as a proxy, so the raw value must be unwrapped before comparing identity.
+*/
+function isExpandColumn(column) {
+	return toRaw(column) === EXPAND_COLUMN;
+}
 function convertChildrenToColumns(children) {
 	return flattenChildren(children).filter((node) => isVNode(node)).map((node) => {
 		const { key, props, children: nodeChildren } = node;
@@ -52,27 +61,36 @@ function useColumns(options, transformColumns) {
 			let cloneColumns = baseColumns.value.slice();
 			const expandIconColumnIndex = unref(options.expandIconColumnIndex);
 			if (process.env.NODE_ENV !== "production" && expandIconColumnIndex !== void 0) warning(false, "`expandIconColumnIndex` is deprecated. Please use `Table.EXPAND_COLUMN` in `columns` instead.");
-			if (!cloneColumns.includes(EXPAND_COLUMN)) {
+			if (!cloneColumns.some(isExpandColumn)) {
 				const expandColIndex = expandIconColumnIndex || 0;
 				const fixed = unref(options.fixed);
 				const insertIndex = expandColIndex === 0 && (fixed === "right" || fixed === "end") ? baseColumns.value.length : expandColIndex;
 				if (insertIndex >= 0) cloneColumns.splice(insertIndex, 0, EXPAND_COLUMN);
 			}
-			if (process.env.NODE_ENV !== "production" && cloneColumns.filter((c) => c === EXPAND_COLUMN).length > 1) warning(false, "There exist more than one `EXPAND_COLUMN` in `columns`.");
-			const expandColumnIndex = cloneColumns.indexOf(EXPAND_COLUMN);
-			cloneColumns = cloneColumns.filter((column, index) => column !== EXPAND_COLUMN || index === expandColumnIndex);
+			if (process.env.NODE_ENV !== "production" && cloneColumns.filter((c) => isExpandColumn(c)).length > 1) warning(false, "There exist more than one `EXPAND_COLUMN` in `columns`.");
+			const expandColumnIndex = cloneColumns.findIndex(isExpandColumn);
+			cloneColumns = cloneColumns.filter((column, index) => !isExpandColumn(column) || index === expandColumnIndex);
 			const prevColumn = baseColumns.value[expandColumnIndex];
 			let fixedColumn;
 			const fixed = unref(options.fixed);
 			if (fixed) fixedColumn = fixed;
 			else fixedColumn = prevColumn?.fixed;
 			const prefixCls = unref(options.prefixCls) || "";
+			const MergedExpandIcon = unref(options.ExpandIcon) || DefaultExpandIcon;
+			const expandAllInfo = unref(options.expandAllInfo);
+			const expandAllNode = expandAllInfo ? h(MergedExpandIcon, {
+				type: "all",
+				prefixCls,
+				...expandAllInfo
+			}) : void 0;
+			const columnTitle = unref(options.columnTitle);
+			const mergedColumnTitle = typeof columnTitle === "function" ? columnTitle({ expandIcon: expandAllNode }) : columnTitle ?? expandAllNode;
 			const expandColumn = {
 				[INTERNAL_COL_DEFINE]: {
 					className: `${prefixCls}-expand-icon-col`,
 					columnType: "EXPAND_COLUMN"
 				},
-				title: unref(options.columnTitle),
+				title: mergedColumnTitle,
 				fixed: fixedColumn,
 				className: `${prefixCls}-row-expand-icon-cell`,
 				width: unref(options.columnWidth),
@@ -94,7 +112,7 @@ function useColumns(options, transformColumns) {
 				}
 			};
 			return cloneColumns.map((col, index) => {
-				const column = col === EXPAND_COLUMN ? expandColumn : col;
+				const column = isExpandColumn(col) ? expandColumn : col;
 				if ((options.expandedRowOffset || 0) && index < (options.expandedRowOffset || 0)) return {
 					...column,
 					fixed: column.fixed || "start"
@@ -102,8 +120,8 @@ function useColumns(options, transformColumns) {
 				return column;
 			});
 		}
-		if (process.env.NODE_ENV !== "production" && baseColumns.value.includes(EXPAND_COLUMN)) warning(false, "`expandable` is not config but there exist `EXPAND_COLUMN` in `columns`.");
-		return baseColumns.value.filter((col) => col !== EXPAND_COLUMN);
+		if (process.env.NODE_ENV !== "production" && baseColumns.value.some(isExpandColumn)) warning(false, "`expandable` is not config but there exist `EXPAND_COLUMN` in `columns`.");
+		return baseColumns.value.filter((col) => !isExpandColumn(col));
 	});
 	const mergedColumns = computed(() => {
 		let finalColumns = withExpandColumns.value;

package/dist/hooks/useExpand.d.ts

@@ -1,11 +1,14 @@
 import { Ref } from 'vue';
-import { ExpandableConfig, ExpandableType, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../interface';
+import { ExpandableConfig, ExpandableType, ExpandIconProps, GetRowKey, Key, RenderExpandIcon, TriggerEventHandler } from '../interface';
 import { TableProps } from '../Table';
+type ExpandAllInfo<RecordType> = Pick<ExpandIconProps<RecordType>, 'expanded' | 'expandable' | 'onClick'>;
 export default function useExpand<RecordType>(props: TableProps<RecordType>, mergedData: Ref<readonly RecordType[]> | readonly RecordType[], getRowKey: Ref<GetRowKey<RecordType>> | GetRowKey<RecordType>): [
     expandableConfig: Ref<ExpandableConfig<RecordType>>,
     expandableType: Ref<ExpandableType>,
     expandedKeys: Ref<Set<Key>>,
     expandIcon: Ref<RenderExpandIcon<RecordType>>,
     childrenColumnName: Ref<string>,
-    onTriggerExpand: TriggerEventHandler<RecordType>
+    onTriggerExpand: TriggerEventHandler<RecordType>,
+    expandAllInfo: Ref<ExpandAllInfo<RecordType> | undefined>
 ];
+export {};

package/dist/hooks/useExpand.js

@@ -1,12 +1,16 @@
 import { getExpandableProps } from "../utils/legacyUtil.js";
-import { findAllChildrenKeys, renderExpandIcon } from "../utils/expandUtil.js";
+import { findAllChildrenKeys, renderExpandIcon, renderRowExpandIcon } from "../utils/expandUtil.js";
 import "../constant.js";
 import { computed, ref, unref } from "vue";
 import { warning } from "@v-c/util";
 //#region src/hooks/useExpand.ts
 function useExpand(props, mergedData, getRowKey) {
 	const expandableConfig = computed(() => getExpandableProps(props));
-	const mergedExpandIcon = computed(() => expandableConfig.value.expandIcon || renderExpandIcon);
+	const mergedExpandIcon = computed(() => {
+		const customizeExpandIcon = props.components?.ExpandIcon;
+		if (customizeExpandIcon) return (iconProps) => renderRowExpandIcon(customizeExpandIcon, iconProps);
+		return expandableConfig.value.expandIcon || renderExpandIcon;
+	});
 	const mergedChildrenColumnName = computed(() => expandableConfig.value.childrenColumnName || "children");
 	const expandableType = computed(() => {
 		if (expandableConfig.value.expandedRowRender) return "row";
@@ -37,6 +41,38 @@ function useExpand(props, mergedData, getRowKey) {
 		props["onUpdate:expandedRowKeys"]?.(Array.from(newExpandedKeys));
 		event?.stopPropagation?.();
 	};
+	const expandableRows = computed(() => {
+		if (!expandableConfig.value.showExpandAll || expandableType.value !== "row") return [];
+		const rowExpandable = expandableConfig.value.rowExpandable;
+		return (unref(mergedData) || []).reduce((rows, record, index) => {
+			if (!rowExpandable || rowExpandable(record)) rows.push({
+				key: unref(getRowKey)(record, index),
+				record
+			});
+			return rows;
+		}, []);
+	});
+	const allExpanded = computed(() => expandableRows.value.length > 0 && expandableRows.value.every(({ key }) => mergedExpandedKeys.value.has(key)));
+	const onTriggerExpandAll = (event) => {
+		event.stopPropagation();
+		if (!expandableRows.value.length) return;
+		const nextExpanded = !allExpanded.value;
+		const nextExpandedKeys = new Set(mergedExpandedKeys.value);
+		expandableRows.value.forEach(({ key }) => {
+			if (nextExpanded) nextExpandedKeys.add(key);
+			else nextExpandedKeys.delete(key);
+		});
+		const keys = [...nextExpandedKeys];
+		innerExpandedKeys.value = keys;
+		expandableConfig.value.onExpandAll?.(nextExpanded);
+		expandableConfig.value.onExpandedRowsChange?.(keys);
+		props["onUpdate:expandedRowKeys"]?.(keys);
+	};
+	const expandAllInfo = computed(() => expandableConfig.value.showExpandAll && expandableType.value === "row" ? {
+		expanded: allExpanded.value,
+		expandable: expandableRows.value.length > 0,
+		onClick: onTriggerExpandAll
+	} : void 0);
 	if (process.env.NODE_ENV !== "production" && expandableConfig.value.expandedRowRender && (unref(mergedData) || []).some((record) => {
 		return Array.isArray(record?.[mergedChildrenColumnName.value]);
 	})) warning(false, "`expandedRowRender` should not use with nested Table");
@@ -46,7 +82,8 @@ function useExpand(props, mergedData, getRowKey) {
 		mergedExpandedKeys,
 		mergedExpandIcon,
 		mergedChildrenColumnName,
-		onTriggerExpand
+		onTriggerExpand,
+		expandAllInfo
 	];
 }
 //#endregion

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ColumnsType, ColumnType, DataIndex, ExpandableConfig, FixedType, GetComponentProps, GetRowKey, Reference, RenderedCell } from './interface';
+import { ColumnsType, ColumnType, DataIndex, ExpandableConfig, ExpandIconComponent, ExpandIconProps, FixedType, GetComponentProps, GetRowKey, Reference, RenderedCell } from './interface';
 import { TableProps, default as Table } from './Table';
 import { VirtualTableProps, default as VirtualTable } from './VirtualTable';
 import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant';
@@ -6,6 +6,6 @@ import { FooterComponents as Summary, SummaryCell, SummaryRow } from './Footer';
 import { default as Column } from './sugar/Column';
 import { default as ColumnGroup } from './sugar/ColumnGroup';
 import { INTERNAL_COL_DEFINE } from './utils/legacyUtil';
-export type { DataIndex, ExpandableConfig, FixedType, GetComponentProps, GetRowKey, RenderedCell, };
+export type { DataIndex, ExpandableConfig, ExpandIconComponent, ExpandIconProps, FixedType, GetComponentProps, GetRowKey, RenderedCell, };
 export { Column, ColumnGroup, type ColumnsType, type ColumnType, EXPAND_COLUMN, INTERNAL_COL_DEFINE, INTERNAL_HOOKS, type Reference, Summary, SummaryCell, SummaryRow, type TableProps, VirtualTable, type VirtualTableProps, };
 export default Table;

package/dist/interface.d.ts

@@ -1,5 +1,5 @@
 import { VueNode } from '@v-c/util';
-import { CSSProperties, HTMLAttributes, Ref, TdHTMLAttributes } from 'vue';
+import { CSSProperties, HTMLAttributes, Ref, TdHTMLAttributes, Component as VueComponent } from 'vue';
 import { DeepNamePath } from './namePathType';
 export type Key = string | number;
 /**
@@ -118,6 +118,7 @@ export type CustomizeScrollBody<RecordType = Record<string, any>> = (data: reado
     onScroll: OnCustomizeScroll;
 }) => any;
 export interface TableComponents<RecordType> {
+    ExpandIcon?: ExpandIconComponent<RecordType>;
     table?: CustomizeComponent;
     header?: {
         table?: CustomizeComponent;
@@ -169,20 +170,41 @@ export interface RenderExpandIconProps<RecordType> {
     onExpand: TriggerEventHandler<RecordType>;
 }
 export type RenderExpandIcon<RecordType> = (props: RenderExpandIconProps<RecordType>) => any;
+export type ExpandIconProps<RecordType> = {
+    prefixCls: string;
+    expanded: boolean;
+    expandable: boolean;
+    onClick: (event: MouseEvent) => void;
+} & ({
+    type: 'row';
+    record: RecordType;
+} | {
+    type: 'all';
+    record?: never;
+});
+export type ExpandIconComponent<RecordType> = VueComponent<ExpandIconProps<RecordType>>;
+export interface ExpandColumnTitleProps {
+    expandIcon: VueNode;
+}
+export type ExpandColumnTitle = VueNode | ((props: ExpandColumnTitleProps) => VueNode);
 export interface ExpandableConfig<RecordType> {
     expandedRowKeys?: readonly Key[];
     defaultExpandedRowKeys?: readonly Key[];
     expandedRowRender?: ExpandedRowRender<RecordType>;
-    columnTitle?: VueNode;
+    forceRender?: boolean;
+    columnTitle?: ExpandColumnTitle;
     expandRowByClick?: boolean;
+    /** @deprecated Please use `components.ExpandIcon` instead. This only customizes row icons. */
     expandIcon?: RenderExpandIcon<RecordType>;
     onExpand?: (expanded: boolean, record: RecordType) => void;
+    onExpandAll?: (expanded: boolean) => void;
     onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
     defaultExpandAllRows?: boolean;
     indentSize?: number;
     /** @deprecated Please use `EXPAND_COLUMN` in `columns` directly */
     expandIconColumnIndex?: number;
     showExpandColumn?: boolean;
+    showExpandAll?: boolean;
     expandedRowClassName?: string | RowClassName<RecordType>;
     childrenColumnName?: string;
     rowExpandable?: (record: RecordType) => boolean;

package/dist/utils/expandUtil.d.ts

@@ -1,4 +1,8 @@
-import { ExpandableConfig, GetRowKey, Key, RenderExpandIconProps } from '../interface';
+import { ExpandableConfig, ExpandIconComponent, ExpandIconProps, GetRowKey, Key, RenderExpandIconProps } from '../interface';
+export declare function DefaultExpandIcon<RecordType>({ prefixCls, type, onClick, expanded, expandable, }: ExpandIconProps<RecordType>): import("vue/jsx-runtime").JSX.Element;
 export declare function renderExpandIcon<RecordType>({ prefixCls, record, onExpand, expanded, expandable, }: RenderExpandIconProps<RecordType>): import("vue/jsx-runtime").JSX.Element;
+export declare function renderRowExpandIcon<RecordType>(ExpandIcon: ExpandIconComponent<RecordType>, props: RenderExpandIconProps<RecordType>): import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
 export declare function computedExpandedClassName<RecordType>(cls: ExpandableConfig<RecordType>['expandedRowClassName'], record: RecordType, index: number, indent: number): string;

package/dist/utils/expandUtil.js

@@ -1,21 +1,54 @@
-import { createVNode } from "vue";
+import { createVNode, h } from "vue";
 import { clsx } from "@v-c/util";
 //#region src/utils/expandUtil.tsx
-function renderExpandIcon({ prefixCls, record, onExpand, expanded, expandable }) {
+function DefaultExpandIcon({ prefixCls, type, onClick, expanded, expandable }) {
 	const expandClassName = `${prefixCls}-row-expand-icon`;
 	if (!expandable) return createVNode("span", { "class": clsx(expandClassName, `${prefixCls}-row-spaced`) }, null);
+	const className = clsx(expandClassName, {
+		[`${prefixCls}-row-expanded`]: expanded,
+		[`${prefixCls}-row-collapsed`]: !expanded
+	});
+	if (type === "all") return createVNode("button", {
+		"type": "button",
+		"aria-expanded": expanded,
+		"aria-label": expanded ? "Collapse all rows" : "Expand all rows",
+		"class": className,
+		"onClick": onClick
+	}, null);
+	return createVNode("span", {
+		"class": className,
+		"onClick": onClick
+	}, null);
+}
+function renderExpandIcon({ prefixCls, record, onExpand, expanded, expandable }) {
 	const onClick = (event) => {
 		onExpand(record, event);
 		event.stopPropagation();
 	};
-	return createVNode("span", {
-		"class": clsx(expandClassName, {
-			[`${prefixCls}-row-expanded`]: expanded,
-			[`${prefixCls}-row-collapsed`]: !expanded
-		}),
+	return createVNode(DefaultExpandIcon, {
+		"type": "row",
+		"prefixCls": prefixCls,
+		"record": record,
+		"expanded": expanded,
+		"expandable": !!expandable,
 		"onClick": onClick
 	}, null);
 }
+function renderRowExpandIcon(ExpandIcon, props) {
+	const { prefixCls, record, onExpand, expanded, expandable } = props;
+	const onClick = (event) => {
+		onExpand(record, event);
+		event.stopPropagation();
+	};
+	return h(ExpandIcon, {
+		type: "row",
+		prefixCls,
+		record,
+		expanded,
+		expandable: !!expandable,
+		onClick
+	});
+}
 function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
 	const keys = [];
 	function dig(list) {
@@ -33,4 +66,4 @@ function computedExpandedClassName(cls, record, index, indent) {
 	return "";
 }
 //#endregion
-export { computedExpandedClassName, findAllChildrenKeys, renderExpandIcon };
+export { DefaultExpandIcon, computedExpandedClassName, findAllChildrenKeys, renderExpandIcon, renderRowExpandIcon };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/table",
   "type": "module",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "license": "MIT",
   "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/table",
   "repository": {
@@ -28,7 +28,7 @@
   "dependencies": {
     "@v-c/resize-observer": "^1.1.3",
     "@v-c/util": "^1.1.0",
-    "@v-c/virtual-list": "^1.1.0"
+    "@v-c/virtual-list": "^1.1.1"
   },
   "publishConfig": {
     "access": "public"