fix: clean up type & misc errors

examples/view/base/table-v2.vue

@@ -445,8 +445,8 @@ const headerColumns = [
         debug
       >
         <template #status="{ row }">
-          <el-tag :type="row.status === 'active' ? 'success' : 'warning'" size="small">
-            {{ row.status }}
+          <el-tag :type="row?.status === 'active' ? 'success' : 'warning'" size="small">
+            {{ row?.status }}
           </el-tag>
         </template>
         <template #actions="{ row }">
@@ -538,7 +538,7 @@ const i18nColumns = [
         debug
       >
         <template #combinedStatus="{ row }">
-          <el-tag :type="getStatusType(row.status)" size="small">{{ row.status }}</el-tag>
+          <el-tag :type="getStatusType(row?.status)" size="small">{{ row?.status }}</el-tag>
         </template>
         <template #combinedActions="{ row }">
           <el-button link type="primary" size="small">View</el-button>
@@ -615,7 +615,7 @@ import {
   HeaderCellRenderer,
   HeaderCellRendererParams,
 } from "element-plus/es/components/table-v2/src/types.mjs";
-import type { ListTableColumn } from "../../../packages/base/data/list-table-v2.vue";
+import { type ListTableColumn } from "../../../packages/base/data/list-table-v2";
 
 // --- Data Generator ---
 const generateRows = (count: number) => {
@@ -752,7 +752,7 @@ const formatColumns = [
 // ================================================================
 // SECTION 5: Custom Cell Renderer
 // ================================================================
-const statusRenderer: CellRenderer<T> = ({ cellData }) => {
+const statusRenderer: CellRenderer<any> = ({ cellData }) => {
   testResults.cellRenderer = true;
   const status = cellData as string;
   const type =
@@ -764,7 +764,7 @@ const statusRenderer: CellRenderer<T> = ({ cellData }) => {
   );
 };
 
-const actionRenderer: CellRenderer<T> = ({ rowData }) => {
+const actionRenderer: CellRenderer<any> = ({ rowData }) => {
   return (
     <div style="display: flex; gap: 4px;">
       <ElButton size="small" link type="primary">
@@ -777,8 +777,8 @@ const actionRenderer: CellRenderer<T> = ({ rowData }) => {
   );
 };
 
-const rendererData = allRows.slice(0, 20);
-const rendererColumns: ListTableColumn<T>[] = [
+const rendererData = ref(allRows.slice(0, 20));
+const rendererColumns: ListTableColumn<any>[] = [
   { key: "id", name: "ID" },
   { key: "caseName", name: "Case Name" },
   { key: "status", name: "Status", cellRenderer: statusRenderer },
@@ -786,7 +786,7 @@ const rendererColumns: ListTableColumn<T>[] = [
     key: "priority",
     name: "Priority",
     cellRenderer: ({ cellData }) => {
-      const colors: Record<string, string> = { high: "danger", medium: "warning", low: "info" };
+      const colors = { high: "danger" as const, medium: "warning" as const, low: "info" as const };
       return (
         <ElTag type={colors[cellData] || "info"} size="small">
           {cellData}
@@ -800,13 +800,13 @@ const rendererColumns: ListTableColumn<T>[] = [
 const testCellRendererResize = () => {
   testResults.cellRendererMini = true;
   // Force re-render by toggling data
-  rendererData = [...allRows.slice(0, 20)];
+  rendererData.value = allRows.slice(0, 20);
 };
 
 // ================================================================
 // SECTION 6: Custom Header Renderer
 // ================================================================
-const headerRenderer: HeaderCellRenderer<T> = ({ column }) => {
+const headerRenderer: HeaderCellRenderer<any> = ({ column }) => {
   testResults.headerRenderer = true;
   return (
     <span>
@@ -816,7 +816,7 @@ const headerRenderer: HeaderCellRenderer<T> = ({ column }) => {
 };
 
 const headerData = allRows.slice(0, 20);
-const headerColumns: ListTableColumn<T>[] = [
+const headerColumns: ListTableColumn<any>[] = [
   { key: "id", name: "ID", headerCellRenderer: headerRenderer },
   { key: "caseName", name: "Case Name", headerCellRenderer: headerRenderer },
   { key: "taskName", name: "Task Name", headerCellRenderer: headerRenderer },
@@ -842,7 +842,7 @@ const handleDynamicQuery = () => {
 };
 
 const testResize = () => {
-  dynamicData.data = [...allRows.slice(0, 10)];
+  dynamicData.data = allRows.slice(0, 10);
   testResults.dynamicHeight = true;
 };
 
@@ -954,12 +954,12 @@ const runCombinedTest = () => {
   combinedExample.page = 1;
   handleCombinedQuery();
   setTimeout(() => {
-    combinedData.data = [...allRows.slice(0, 10)];
+    combinedData.data = allRows.slice(0, 10);
     testResults.combined.renderer = true;
   }, 100);
 };
 const reloadCombinedData = () => {
-  combinedData.data = [...allRows.slice(0, 10)];
+  combinedData.data = allRows.slice(0, 10);
 };
 
 // ================================================================
@@ -969,19 +969,19 @@ const rendererType = ref<"jsx" | "simple">("jsx");
 const edgeExample = reactive({ page: 1, size: 10 });
 const edgeData = reactive({ data: allRows.slice(0, 10), total: allRows.length });
 
-const edgeIdRenderer: CellRenderer<T> = ({ cellData }) => {
+const edgeIdRenderer: CellRenderer<any> = ({ cellData }) => {
   return <span style="font-weight: bold; color: var(--el-color-primary)">#{cellData}</span>;
 };
 
-const edgeNameRenderer: CellRenderer<T> = ({ cellData }) => {
+const edgeNameRenderer: CellRenderer<any> = ({ cellData }) => {
   if (rendererType.value === "jsx") {
     return <span style="font-style: italic">{cellData}</span>;
   }
   return <span>{cellData}</span>;
 };
 
-const edgePriorityRenderer: CellRenderer<T> = ({ cellData }) => {
-  const colors: Record<string, string> = { high: "danger", medium: "warning", low: "success" };
+const edgePriorityRenderer: CellRenderer<any> = ({ cellData }) => {
+  const colors = { high: "danger" as const, medium: "warning" as const, low: "success" as const };
   return (
     <ElTag type={colors[cellData]} size="small">
       {cellData}
@@ -989,7 +989,7 @@ const edgePriorityRenderer: CellRenderer<T> = ({ cellData }) => {
   );
 };
 
-const edgeActionsRenderer: CellRenderer<T> = () => {
+const edgeActionsRenderer: CellRenderer<any> = () => {
   return (
     <div style="display: flex; gap: 4px;">
       <ElButton size="small" type="primary">
@@ -999,7 +999,7 @@ const edgeActionsRenderer: CellRenderer<T> = () => {
   );
 };
 
-const edgeColumns: ListTableColumn<T>[] = [
+const edgeColumns: ListTableColumn<any>[] = [
   { key: "id", name: "ID", fixed: "left" as const, width: 80, cellRenderer: edgeIdRenderer },
   { key: "caseName", name: "Case Name", cellRenderer: edgeNameRenderer },
   { key: "priority", name: "Priority", cellRenderer: edgePriorityRenderer },
@@ -1020,7 +1020,7 @@ const changePageRenderer = () => {
 
 const toggleRendererType = () => {
   rendererType.value = rendererType.value === "jsx" ? "simple" : "jsx";
-  edgeData.data = [...allRows.slice(0, 10)];
+  edgeData.data = allRows.slice(0, 10);
 };
 
 onMounted(() => {

packages/base/data/list-table-v2/list-table-v2.vue

@@ -67,24 +67,25 @@
         :page-sizes="[10, 20, 50, 100, 200]"
         :page-size="example.size"
         layout="total, sizes, prev, pager, next, jumper"
-        :total="data.total"
+        :total="paginationTotal"
       />
     </div>
   </div>
 </template>
 
 <script lang="tsx" setup generic="T">
-import { ref, computed, onMounted, onUnmounted, toRef, CSSProperties, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, toRef, CSSProperties } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue3-i18n";
 import * as lodash from "lodash-es";
-import type { ListTableColumn, PageResponse } from "./types";
+import type { ListTableColumn } from "./types";
 import { usePretextColumnWidths } from "./usePretextColumnWidths";
 import { resolveRowHeights } from "./usePretextRowHeights";
 import { useVirtualRows } from "./useVirtualRows";
 import { formatTimestampFromValue } from "../../../../plugs/composables";
 import { match } from "ts-pattern";
 import { JsonView } from "noob-mengyxu";
+import { ListTableProps } from "./types";
 
 const DEFAULT_FONT = "14px Microsoft YaHei, sans-serif";
 const DEFAULT_HEADER_FONT = "bold 16px Microsoft YaHei, sans-serif";
@@ -108,31 +109,11 @@ let resizeObserver: ResizeObserver | null = null;
 // =============================================================================
 // Props - same interface as original list-table-v2.vue
 // =============================================================================
-interface Props {
-  data?: T[] | PageResponse<T>;
-  columns?: ListTableColumn<T>[];
-  page?: boolean;
-  height?: number | string;
-  minHeight?: number | string;
-  maxHeight?: number | string;
-  example?: { page?: number; size?: number };
-  rowKey?: string;
-  selectKey?: string;
-  treeProps?: any;
-  lazy?: boolean;
-  border?: boolean;
-  rowHeight?: number;
-  estimatedRowHeight?: number;
-  headerHeight?: number;
-  font?: string;
-  headerFont?: string;
-  debug?: boolean;
-}
+
+type Props = ListTableProps<T>;
 
 const props = withDefaults(defineProps<Props>(), {
-  data: () => [],
   columns: () => [],
-  page: false,
   height: undefined,
   minHeight: 300,
   maxHeight: undefined,
@@ -143,7 +124,6 @@ const props = withDefaults(defineProps<Props>(), {
   lazy: false,
   border: false,
   rowHeight: undefined,
-  estimatedRowHeight: undefined,
   headerHeight: 44,
   font: DEFAULT_FONT,
   debug: false,
@@ -159,15 +139,17 @@ const emit = defineEmits<{
 // =============================================================================
 // Data and columns as computed refs for hooks
 // =============================================================================
+
 const pageData = computed<T[]>(() => {
-  if (!props.data) return [];
-  if (props.page && (props.data as PageResponse<T>).data) {
-    return (props.data as PageResponse<T>).data;
+  if (props.page) {
+    return props.data.data;
   }
-  if (Array.isArray(props.data)) {
-    return props.data;
-  }
-  return [];
+  return props.data ?? [];
+});
+
+const paginationTotal = computed(() => {
+  if (!props.page) return 0;
+  return props.data.total ?? 0;
 });
 
 // Helper function for template to safely access row data

packages/base/data/list-table-v2/types.ts

@@ -84,16 +84,28 @@ export type TzDateTimeConfig = TimestampDisplayConfig;
 // Table Props
 // =============================================================================
 
-export interface ListTableProps<T = any> {
+export type ListTableProps<T> = (ListTableDataPaged<T> | ListTableDataUnpaged<T>) & ListTableOptions<T>;
+
+export interface ListTableDataUnpaged<T = any> {
+  data?: T[];
+  page?: false;
+}
+
+export interface ListTableDataPaged<T = any> {
+  data: PageResponse<T>;
+  page: true;
+}
+
+export interface ListTableOptions<T = any> {
   /** Table data (array or page response) */
-  data?: T[] | PageResponse<T>;
+  // data?: T[] | PageResponse<T>;
+
+  /** Enable pagination */
+  // page?: boolean;
 
   /** Column definitions */
   columns?: ListTableColumn<T>[];
 
-  /** Enable pagination */
-  page?: boolean;
-
   /** Fixed table height */
   height?: number | string;
 
@@ -130,6 +142,12 @@ export interface ListTableProps<T = any> {
   /** Header height (measured if not set) */
   headerHeight?: number;
 
+  /** Table Font */
+  font?: string;
+
+  /** Header Font (bold table font if undefined) */
+  headerFont?: string;
+
   /** Debug mode */
   debug?: boolean;
 }