Basic data binding with columns, pagination, and event handling.
// Columns definition
const basicColumns = [
{ key: 'id', name: 'ID' },
{ key: 'caseName', name: 'Case Name' },
{ key: 'taskName', name: 'Task Name' },
{ key: 'userId', name: 'User ID' },
{ key: 'createTime', name: 'Create Time', timestamp: 'unix' },
];
Table borders and column content alignment via border and align props.
// Alignment options: 'left' | 'center' | 'right'
const styleColumns = [
{ key: 'id', name: 'ID', align: 'center' },
{ key: 'caseName', name: 'Case Name', align: 'left' },
{ key: 'userId', name: 'User ID', align: 'right' },
];
Fix columns to left or right using fixed: "left" or fixed: "right".
const fixedColumns = [
{ key: 'id', name: 'ID', fixed: 'left', width: 80 },
{ key: 'caseName', name: 'Case Name', fixed: 'left', width: 200 },
{ key: 'taskName', name: 'Task Name' },
{ key: 'userId', name: 'User ID' },
{ key: 'content', name: 'Content' },
{ key: 'createTime', name: 'Create Time', timestamp: 'unix' },
{ key: 'actions', name: 'Actions', fixed: 'right', width: 120 },
];Built-in formatting for timestamps, dictionaries, and file sizes.
const formatColumns = [
{ key: 'id', name: 'ID' },
{ key: 'caseName', name: 'Case Name' },
// timestamp: 'unix' formats Unix timestamp (seconds)
{ key: 'createTime', name: 'Create Time', timestamp: 'unix' },
// filesize: true formats bytes to K/M/G
{ key: 'fileSize', name: 'File Size', filesize: true },
// dict uses state.dict for lookup
{ key: 'status', name: 'Status', dict: 'test' },
];
Custom cell content via cellRenderer function. Returns JSX. Critical: must work correctly with the
mini-table probe row for dynamic height measurement.
import { CellRenderer, CellRendererParams } from 'element-plus';
import { ElTag } from 'element-plus';
// Custom cellRenderer returning JSX
const statusRenderer: CellRenderer<T> = ({ cellData }) => {
const status = cellData as string;
const type = status === 'active' ? 'success' : status === 'pending' ? 'warning' : 'info';
return <ElTag type={type}>{status}</ElTag>;
};
const rendererColumns = [
{ key: 'id', name: 'ID' },
{ key: 'caseName', name: 'Case Name' },
{ key: 'status', name: 'Status', cellRenderer: statusRenderer },
{ key: 'actions', name: 'Actions', cellRenderer: actionRenderer },
];
Custom header content via headerCellRenderer function. Must also sync with mini-table header probe.
import { HeaderCellRenderer, HeaderCellRendererParams } from 'element-plus';
// Custom headerCellRenderer returning JSX
const headerRenderer: HeaderCellRenderer<T> = ({ column }) => {
const col: ListTableColumn<T> = column._listTableColumn;
return (
<span>
<span style="color: var(--el-color-primary)">*</span> {col.title}
</span>
);
};
const headerColumns = [
{ key: 'id', name: 'ID', headerCellRenderer },
{ key: 'caseName', name: 'Case Name', headerCellRenderer },
{ key: 'taskName', name: 'Task Name', headerCellRenderer },
];
Dynamic height mode uses a hidden mini-table to probe actual row and header heights.
debug shows estimated values. No rowHeight or estimatedRowHeight needed —
it measures automatically.
// Dynamic height mode (no rowHeight set)
// Mini-table probe automatically measures row height
// ResizeObserver debounces at 50ms to prevent flicker
// Fixed height mode (rowHeight set) - disables probe
// <ListTableV2 :row-height="60" ...> // No probe needed
// Manual estimate mode
// <ListTableV2 :estimated-row-height="50" ...> // Uses this as starting estimate
Fixed height mode via :row-height="60". Disables the mini-table probe. Better performance for large
datasets since no measurement needed.
// Fixed row height - no mini-table probe needed
// Better performance for large datasets
<ListTableV2
:data="data"
:columns="columns"
:row-key="'id'"
:row-height="60"
:border="true"
debug
/>
Control column widths with width (fixed) and minWidth (flexible). Columns without
explicit width use flexGrow: 1 to fill remaining space.
const widthColumns = [
{ key: 'id', name: 'ID', width: 80 }, // Fixed 80px
{ key: 'caseName', name: 'Case Name', minWidth: 200 }, // Min 200px, grows
{ key: 'taskName', name: 'Task Name', minWidth: 150 }, // Min 150px, grows
{ key: 'userId', name: 'User ID', width: 120 }, // Fixed 120px
// Remaining space distributed proportionally
];
Control table dimensions with height, maxHeight, and headerHeight.
Auto-resizer handles width automatically.
// Fixed height with scrolling internally
<ListTableV2 :height="400" ...>
// Max height - table grows but caps at max
<ListTableV2 :max-height="300" ...>
// Custom header height (default is auto-probed)
<ListTableV2 :header-height="60" ...>
Custom cell content via Vue template slots. Use slot: true on column and define
#columnKey template in parent.
// In template
<ListTableV2 :columns="slotColumns" ...>
<template #status="{ row }">
<el-tag>{row.status}</el-tag>
</template>
<template #actions="{ row }">
<el-button>Edit</el-button>
</template>
</ListTableV2>
// In script
const slotColumns = [
{ key: 'id', name: 'ID', slot: true },
{ key: 'caseName', name: 'Case Name' },
{ key: 'status', name: 'Status', slot: true },
{ key: 'actions', name: 'Actions', slot: true },
];Column headers support i18n via i18n key (uses vue3-i18n).
// The component uses t() from vue3-i18n internally
// Column with i18n key:
const i18nColumns = [
{ key: 'id', name: 'ID' },
{ key: 'caseName', i18n: 'table.props.0' }, // Uses t('table.props.0')
{ key: 'taskName', i18n: 'table.props.1' },
];All features working together: fixed columns + custom renderers + pagination + dynamic height probe + events. This is the stress test.
// Combined: fixed columns + custom renderers + pagination + i18n
const combinedColumns = [
{ key: 'id', name: 'ID', fixed: 'left', width: 80 },
{ key: 'caseName', i18n: 'table.props.0', fixed: 'left' },
{ key: 'taskName', i18n: 'table.props.1' },
{ key: 'userId', name: 'User', dict: 'test' },
{ key: 'createTime', name: 'Time', timestamp: 'unix', minWidth: 180 },
{ key: 'combinedStatus', name: 'Status', slot: true },
{ key: 'combinedActions', name: 'Actions', fixed: 'right', slot: true, width: 140 },
];
Edge case: custom cellRenderer combined with fixed columns and
pagination. Verifies mini-table probe handles custom renderers correctly across page changes.
// Edge case: cellRenderer + fixed columns + pagination
// Must verify mini-table probe renders custom JSX correctly
const edgeColumns = [
{ key: 'id', fixed: 'left', cellRenderer: edgeIdRenderer },
{ key: 'caseName', cellRenderer: edgeNameRenderer },
{ key: 'priority', cellRenderer: edgePriorityRenderer },
{ key: 'actions', fixed: 'right', cellRenderer: edgeActionsRenderer },
];