# list-table-v2.vue - el-table-v2 Migration

## Goal

Create `packages/base/data/list-table-v2.vue` - a new table component using Element Plus `el-table-v2` (virtual table) with auto-resizer support, while keeping `list-table.vue` unchanged for backward compatibility.

## Requirements

### 1. Use el-table-v2 (virtual scrolling)
- Use `el-table-v2` from Element Plus instead of `el-table`
- Enable virtual scrolling for performance with large datasets
- Support auto-resizer via `autosize` prop

### 2. Auto-fill Container Height
- Use el-table-v2's `autosize` prop for automatic height sizing
- Flexbox fallback if autosize insufficient (avoid hacks from original)
- Component should fill available space in flex containers

### 3. Maintain API Compatibility with list-table.vue

**Props to support:**
| Prop | Type | Description |
|------|------|-------------|
| `data` | `any` | Table data (array or PageResponse) |
| `columns` | `TableColumn[]` | Column definitions |
| `page` | `boolean` | Enable pagination |
| `height` | `number \| string` | Optional explicit height (falls back to auto if undefined) |
| `maxHeight` | `number \| string` | Max height constraint |
| `example` | `any` | Pagination state object |
| `rowKey` | `string` | Row key for selections |
| `selectKey` | `string` | Key for pre-selecting rows |
| `border` | `boolean` | Show border |
| `lazy` | `boolean` | Lazy loading for tree data |
| `treeProps` | `any` | Tree data configuration |

**Events to emit:**
- `query` - pagination changed
- `selection-change` - selection changed
- `row-click` - row clicked
- `cell-click` - cell clicked

**Column features:**
- `code` - property name
- `name` / `i18n` - label
- `type` - column type (selection, index, etc.)
- `width` / `minWidth` - column width
- `fixed` - fixed column (left/right)
- `align` - text alignment
- `slot` - custom slot for rendering
- `dict` - dictionary lookup for value formatting
- `timestamp` - format as datetime
- `filesize` - format as file size

### 4. Keep list-table.vue Unchanged
- Existing component remains for backward compatibility
- No breaking changes to existing usage

### 5. Theming Compatibility
- Use Vuex store for theme values (style, size)
- Same CSS variable overrides for colors, backgrounds

## Technical Notes

### el-table-v2 Key Differences
- Uses `columns` prop instead of scoped slots for header
- `cellRenderer` for custom cell rendering
- `headerCellRenderer` for custom header rendering
- `autosize` accepts `{ minHeight: number, maxHeight: number }`
- Virtual scrolling is always on (no separate prop)

### TableColumn Type (from useListTable.ts)
```typescript
export interface TableColumn {
  code: string;
  name?: string;
  i18n?: string;
  type?: string;
  width?: string | number;
  fixed?: boolean | "left" | "right";
  align?: "left" | "center" | "right";
  slot?: boolean;
  dict?: string;
  timestamp?: boolean;
  filesize?: boolean;
  [others: string]: any;
}
```

## Acceptance Criteria
- [ ] `list-table-v2.vue` created in `packages/base/data/`
- [ ] Uses `el-table-v2` with virtual scrolling
- [ ] Auto-fills container height (autosize or flex)
- [ ] All column features work (dict, timestamp, filesize, slot, etc.)
- [ ] Pagination support via `page` prop
- [ ] Theme/styling compatible with existing list-table
- [ ] No breaking changes to existing `list-table.vue`
- [ ] TypeScript compilation passes