@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/{chunk-XWE54AWW.mjs → chunk-NMVKDWMK.mjs}

@@ -1,7 +1,20 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount, h, computed, watch } from 'vue';
-import { getSpinnerSVG, createTableResizeObserverController, getTableVirtualRecommendation, classNames, tableBaseClasses, getTableWrapperClasses, tableExportButtonClasses, tableLoadingOverlayClasses, getFixedColumnOffsets, filterDataAdvanced, filterData, sortData, paginateData, createTableRowKeyCache, calculatePagination, groupDataByColumn, getExpandIconCellClasses, getCheckboxCellClasses, getTableHeaderCellClasses, getTableHeaderClasses, tableEmptyStateClasses, tableGroupHeaderClasses, getGroupHeaderCellClasses, getTableCellClasses, tableSummaryRowClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getLoadingOverlaySpinnerClasses, normalizeSvgAttrs, exportTableToCsv, downloadCsv, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, editableCellInputClasses, getEditableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, getExpandIconClasses, expandChevronIcon16PathD } from '@expcat/tigercat-core';
-
 // src/components/Table.ts
+import { defineComponent, h as h6, onBeforeUnmount, onMounted, ref as ref2 } from "vue";
+import {
+  classNames as classNames3,
+  createTableResizeObserverController,
+  getTableWrapperClasses,
+  getTableResponsiveTableClasses,
+  getTableVirtualRecommendation,
+  tableBaseClasses,
+  tableResponsiveCardClasses,
+  tableResponsiveCardLabelClasses,
+  tableResponsiveCardListClasses,
+  tableResponsiveCardRowClasses,
+  tableResponsiveCardValueClasses,
+  tableLoadingOverlayClasses
+} from "@expcat/tigercat-core";
+import { tableExportButtonClasses } from "@expcat/tigercat-core";
 
 // src/components/Table/props.ts
 var tableProps = {
@@ -93,19 +106,27 @@ var tableProps = {
     type: String,
     default: "auto"
   },
+  responsiveMode: {
+    type: String,
+    default: "scroll"
+  },
   // --- v0.6.0 props ---
   virtual: { type: Boolean, default: false },
+  autoVirtual: { type: Boolean, default: true },
   virtualHeight: { type: Number, default: 400 },
   virtualItemHeight: { type: Number, default: 40 },
+  autoVirtualThreshold: { type: Number, default: 1e4 },
   virtualThreshold: { type: Number, default: 1e3 },
   editable: { type: Boolean, default: false },
   editableCells: { type: Object },
   filterMode: { type: String, default: "basic" },
   advancedFilterRules: { type: Array, default: () => [] },
   columnDraggable: { type: Boolean, default: false },
+  rowDraggable: { type: Boolean, default: false },
   summaryRow: { type: Object },
   groupBy: { type: String },
   exportable: { type: Boolean, default: false },
+  exportFormat: { type: String, default: "csv" },
   exportFilename: { type: String, default: "export" }
 };
 var tableEmits = [
@@ -118,8 +139,24 @@ var tableEmits = [
   "expand-change",
   "cell-change",
   "column-order-change",
+  "row-order-change",
   "export"
 ];
+
+// src/components/Table/state.ts
+import { computed, ref, watch } from "vue";
+import {
+  sortData,
+  filterData,
+  paginateData,
+  calculatePagination,
+  createTableRowKeyCache,
+  filterDataAdvanced,
+  groupDataByColumn,
+  getFixedColumnOffsets,
+  getFixedVirtualRange
+} from "@expcat/tigercat-core";
+import { exportTableData, downloadTableExport } from "@expcat/tigercat-core";
 function useTableState(props, emit, measuredColumnWidths) {
   const paginationConfig = computed(() => {
     return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
@@ -430,9 +467,9 @@ function useTableState(props, emit, measuredColumnWidths) {
     editingCell.value = null;
   }
   function handleExport() {
-    const csv = exportTableToCsv(displayColumns.value, processedData.value);
-    downloadCsv(csv, props.exportFilename);
-    emit("export", csv);
+    const content = exportTableData(displayColumns.value, processedData.value, props.exportFormat);
+    downloadTableExport(content, props.exportFilename, props.exportFormat);
+    emit("export", content);
   }
   const dragColumnKey = ref(null);
   function handleDragStart(columnKey) {
@@ -450,7 +487,24 @@ function useTableState(props, emit, measuredColumnWidths) {
     }
     dragColumnKey.value = null;
   }
+  const dragRowKey = ref(null);
+  function handleRowDragStart(rowKeyValue) {
+    dragRowKey.value = rowKeyValue;
+  }
+  function handleRowDrop(targetKey) {
+    if (dragRowKey.value === null || dragRowKey.value === targetKey) return;
+    const rows = [...paginatedData.value];
+    const fromIdx = paginatedRowKeys.value.findIndex((key) => key === dragRowKey.value);
+    const toIdx = paginatedRowKeys.value.findIndex((key) => key === targetKey);
+    if (fromIdx >= 0 && toIdx >= 0) {
+      const [moved] = rows.splice(fromIdx, 1);
+      rows.splice(toIdx, 0, moved);
+      emit("row-order-change", rows);
+    }
+    dragRowKey.value = null;
+  }
   const virtualScrollTop = ref(0);
+  void getFixedVirtualRange;
   const groupedData = computed(() => {
     if (!props.groupBy) return null;
     return groupDataByColumn(paginatedData.value, props.groupBy);
@@ -494,9 +548,29 @@ function useTableState(props, emit, measuredColumnWidths) {
     cancelEdit,
     handleExport,
     handleDragStart,
-    handleDrop
+    handleDrop,
+    handleRowDragStart,
+    handleRowDrop
   };
 }
+
+// src/components/Table/icons.ts
+import { h } from "vue";
+import {
+  getSortIconClasses,
+  getExpandIconClasses,
+  getSpinnerSVG,
+  normalizeSvgAttrs,
+  getLoadingOverlaySpinnerClasses,
+  icon16ViewBox,
+  icon24ViewBox,
+  sortAscIcon16PathD,
+  sortDescIcon16PathD,
+  sortBothIcon16PathD,
+  expandChevronIcon16PathD,
+  lockClosedIcon24PathD,
+  lockOpenIcon24PathD
+} from "@expcat/tigercat-core";
 var spinnerSvg = getSpinnerSVG("spinner");
 var SortIcon = (direction) => {
   const active = direction !== null;
@@ -552,11 +626,21 @@ var LoadingSpinner = () => {
     spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
   );
 };
+
+// src/components/Table/render-header.ts
+import { h as h2 } from "vue";
+import {
+  classNames,
+  getTableHeaderClasses,
+  getTableHeaderCellClasses,
+  getCheckboxCellClasses,
+  getExpandIconCellClasses
+} from "@expcat/tigercat-core";
 function renderTableHeader(ctx, props, slots) {
   const headerCells = [];
   const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
   const expandAtEnd = props.expandable && props.expandable.expandIconPosition === "end";
-  const expandHeaderTh = props.expandable ? h("th", {
+  const expandHeaderTh = props.expandable ? h2("th", {
     class: getExpandIconCellClasses(props.size),
     "aria-label": "Expand"
   }) : null;
@@ -565,13 +649,13 @@ function renderTableHeader(ctx, props, slots) {
   }
   if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
     headerCells.push(
-      h(
+      h2(
         "th",
         {
           class: getCheckboxCellClasses(props.size)
         },
         [
-          h("input", {
+          h2("input", {
             type: "checkbox",
             class: "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
             checked: ctx.allSelected.value,
@@ -612,7 +696,7 @@ function renderTableHeader(ctx, props, slots) {
     }
     if (props.columnLockable) {
       headerContent.push(
-        h(
+        h2(
           "button",
           {
             type: "button",
@@ -634,7 +718,7 @@ function renderTableHeader(ctx, props, slots) {
       headerContent.push(SortIcon(sortDirection));
     }
     headerCells.push(
-      h(
+      h2(
         "th",
         {
           key: column.key,
@@ -657,10 +741,10 @@ function renderTableHeader(ctx, props, slots) {
           onClick: column.sortable ? () => ctx.handleSort(column.key) : void 0
         },
         [
-          h("div", { class: "flex items-center gap-2" }, headerContent),
+          h2("div", { class: "flex items-center gap-2" }, headerContent),
           ...column.filter ? [
-            h("div", { class: "mt-2" }, [
-              column.filter.type === "select" && column.filter.options ? h(
+            h2("div", { class: "mt-2" }, [
+              column.filter.type === "select" && column.filter.options ? h2(
                 "select",
                 {
                   class: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
@@ -668,12 +752,12 @@ function renderTableHeader(ctx, props, slots) {
                   onClick: (e) => e.stopPropagation()
                 },
                 [
-                  h("option", { value: "" }, "All"),
+                  h2("option", { value: "" }, "All"),
                   ...column.filter.options.map(
-                    (opt) => h("option", { value: opt.value }, opt.label)
+                    (opt) => h2("option", { value: opt.value }, opt.label)
                   )
                 ]
-              ) : h("input", {
+              ) : h2("input", {
                 type: "text",
                 class: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
                 placeholder: column.filter.placeholder || "Filter...",
@@ -689,23 +773,40 @@ function renderTableHeader(ctx, props, slots) {
   if (expandAtEnd && expandHeaderTh) {
     headerCells.push(expandHeaderTh);
   }
-  return h("thead", { class: getTableHeaderClasses(props.stickyHeader) }, [h("tr", headerCells)]);
+  return h2("thead", { class: getTableHeaderClasses(props.stickyHeader) }, [h2("tr", headerCells)]);
 }
+
+// src/components/Table/render-body.ts
+import { h as h3 } from "vue";
+import {
+  classNames as classNames2,
+  getTableRowClasses,
+  getTableCellClasses,
+  getCheckboxCellClasses as getCheckboxCellClasses2,
+  getExpandIconCellClasses as getExpandIconCellClasses2,
+  getExpandedRowClasses,
+  getExpandedRowContentClasses,
+  tableEmptyStateClasses,
+  getEditableCellClasses,
+  editableCellInputClasses,
+  tableGroupHeaderClasses,
+  getGroupHeaderCellClasses
+} from "@expcat/tigercat-core";
 function renderTableBody(ctx, props, slots) {
   if (props.loading) {
     return null;
   }
   if (ctx.paginatedData.value.length === 0) {
-    return h("tbody", [
-      h("tr", [
-        h(
+    return h3("tbody", [
+      h3("tr", [
+        h3(
           "td",
           {
             colspan: ctx.totalColumnCount.value,
             class: tableEmptyStateClasses
           },
           [
-            h(
+            h3(
               "div",
               {
                 role: "status",
@@ -718,6 +819,45 @@ function renderTableBody(ctx, props, slots) {
       ])
     ]);
   }
+  function getDelegatedRow(event) {
+    const row = event.target?.closest(
+      "tr[data-tiger-table-row-index]"
+    );
+    if (!row) return null;
+    const index = Number(row.dataset.tigerTableRowIndex);
+    if (!Number.isInteger(index)) return null;
+    const record = ctx.paginatedData.value[index];
+    const key = ctx.paginatedRowKeys.value[index];
+    if (!record || key === void 0) return null;
+    return { key, record, index };
+  }
+  function handleBodyClick(event) {
+    const row = getDelegatedRow(event);
+    if (!row) return;
+    ctx.handleRowClick(row.record, row.index, row.key);
+  }
+  function handleBodyDragStart(event) {
+    if (!props.rowDraggable) return;
+    const row = getDelegatedRow(event);
+    if (!row) return;
+    ctx.handleRowDragStart(row.key);
+  }
+  function handleBodyDragOver(event) {
+    if (!props.rowDraggable) return;
+    event.preventDefault();
+  }
+  function handleBodyDrop(event) {
+    if (!props.rowDraggable) return;
+    const row = getDelegatedRow(event);
+    if (!row) return;
+    ctx.handleRowDrop(row.key);
+  }
+  const delegatedBodyHandlers = {
+    onClick: handleBodyClick,
+    onDragstart: props.rowDraggable ? handleBodyDragStart : void 0,
+    onDragover: props.rowDraggable ? handleBodyDragOver : void 0,
+    onDrop: props.rowDraggable ? handleBodyDrop : void 0
+  };
   function renderDataRow(record, index) {
     const key = ctx.paginatedRowKeys.value[index];
     const isSelected = ctx.selectedRowKeySet.value.has(key);
@@ -726,13 +866,13 @@ function renderTableBody(ctx, props, slots) {
     const rowClass = typeof props.rowClassName === "function" ? props.rowClassName(record, index) : props.rowClassName;
     const cells = [];
     const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
-    const expandToggleCell = props.expandable ? h(
+    const expandToggleCell = props.expandable ? h3(
       "td",
       {
-        class: getExpandIconCellClasses(props.size)
+        class: getExpandIconCellClasses2(props.size)
       },
       isRowExpandable ? [
-        h(
+        h3(
           "button",
           {
             type: "button",
@@ -754,13 +894,13 @@ function renderTableBody(ctx, props, slots) {
     if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
       const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
       cells.push(
-        h(
+        h3(
           "td",
           {
-            class: getCheckboxCellClasses(props.size)
+            class: getCheckboxCellClasses2(props.size)
           },
           [
-            h("input", {
+            h3("input", {
               type: props.rowSelection?.type === "radio" ? "radio" : "checkbox",
               class: props.rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
               checked: isSelected,
@@ -791,13 +931,13 @@ function renderTableBody(ctx, props, slots) {
       } : void 0;
       const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
       const stickyBgClass = props.striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
-      const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
+      const stickyCellClass = isFixedLeft || isFixedRight ? classNames2(
         stickyBgClass,
         props.hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
       ) : void 0;
       const isEditing = ctx.editingCell.value?.rowIndex === index && ctx.editingCell.value?.columnKey === column.key;
       const isEditableCell = ctx.isCellEditable(column.key, index);
-      const cellContent = isEditing ? h("input", {
+      const cellContent = isEditing ? h3("input", {
         type: "text",
         class: editableCellInputClasses,
         value: ctx.editingValue.value,
@@ -812,11 +952,11 @@ function renderTableBody(ctx, props, slots) {
         }
       }) : slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue);
       cells.push(
-        h(
+        h3(
           "td",
           {
             key: column.key,
-            class: classNames(
+            class: classNames2(
               getTableCellClasses(props.size, column.align || "left", column.className),
               stickyCellClass,
               isEditableCell && !isEditing && getEditableCellClasses(false)
@@ -831,29 +971,29 @@ function renderTableBody(ctx, props, slots) {
     if (!expandAtStart && expandToggleCell) {
       cells.push(expandToggleCell);
     }
-    const rowNode = h(
+    const rowNode = h3(
       "tr",
       {
         key,
         "data-tiger-table-row-index": index,
-        class: classNames(
+        class: classNames2(
           getTableRowClasses(props.hoverable, props.striped, index % 2 === 0, rowClass),
           ctx.fixedColumnsInfo.value.hasFixedColumns && "group"
         ),
-        onClick: () => ctx.handleRowClick(record, index, key)
+        draggable: props.rowDraggable ? "true" : void 0
       },
       cells
     );
     if (props.expandable && isExpanded && isRowExpandable) {
       const expandedContent = slots["expanded-row"]?.({ record, index }) || (props.expandable.expandedRowRender ? props.expandable.expandedRowRender(record, index) : null);
-      const expandedRow = h(
+      const expandedRow = h3(
         "tr",
         {
           key: `${key}-expanded`,
           class: getExpandedRowClasses()
         },
         [
-          h(
+          h3(
             "td",
             {
               colspan: ctx.totalColumnCount.value,
@@ -871,8 +1011,8 @@ function renderTableBody(ctx, props, slots) {
     const groupRows = [];
     for (const [groupKey, groupItems] of ctx.groupedData.value) {
       groupRows.push(
-        h("tr", { key: `group-${groupKey}`, class: tableGroupHeaderClasses }, [
-          h(
+        h3("tr", { key: `group-${groupKey}`, class: tableGroupHeaderClasses }, [
+          h3(
             "td",
             {
               colspan: ctx.totalColumnCount.value,
@@ -892,34 +1032,50 @@ function renderTableBody(ctx, props, slots) {
         }
       });
     }
-    return h("tbody", groupRows);
+    return h3("tbody", delegatedBodyHandlers, groupRows);
   }
   const rows = ctx.paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
-  return h("tbody", rows);
+  return h3("tbody", delegatedBodyHandlers, rows);
 }
+
+// src/components/Table/render-summary.ts
+import { h as h4 } from "vue";
+import { getTableCellClasses as getTableCellClasses2, tableSummaryRowClasses } from "@expcat/tigercat-core";
 function renderSummaryRow(ctx, props) {
   if (!props.summaryRow?.show) return null;
   const emptyCells = [];
   if (props.rowSelection) {
-    emptyCells.push(h("td", { class: getTableCellClasses(props.size, "left") }));
+    emptyCells.push(h4("td", { class: getTableCellClasses2(props.size, "left") }));
   }
   if (props.expandable) {
-    emptyCells.push(h("td", { class: getTableCellClasses(props.size, "left") }));
+    emptyCells.push(h4("td", { class: getTableCellClasses2(props.size, "left") }));
   }
   const dataCells = ctx.displayColumns.value.map((col) => {
     const dataKey = col.dataKey || col.key;
     const val = props.summaryRow.data[dataKey];
-    return h(
+    return h4(
       "td",
       {
         key: col.key,
-        class: getTableCellClasses(props.size, col.align || "left", col.className)
+        class: getTableCellClasses2(props.size, col.align || "left", col.className)
       },
       val != null ? String(val) : ""
     );
   });
-  return h("tfoot", [h("tr", { class: tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
+  return h4("tfoot", [h4("tr", { class: tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
 }
+
+// src/components/Table/render-pagination.ts
+import { h as h5 } from "vue";
+import {
+  getSimplePaginationContainerClasses,
+  getSimplePaginationTotalClasses,
+  getSimplePaginationControlsClasses,
+  getSimplePaginationSelectClasses,
+  getSimplePaginationButtonClasses,
+  getSimplePaginationPageIndicatorClasses,
+  getSimplePaginationButtonsWrapperClasses
+} from "@expcat/tigercat-core";
 function renderPagination(ctx, props) {
   if (props.pagination === false || !ctx.paginationInfo.value) {
     return null;
@@ -927,14 +1083,14 @@ function renderPagination(ctx, props) {
   const { totalPages, startIndex, endIndex, hasNext, hasPrev } = ctx.paginationInfo.value;
   const paginationConfig = props.pagination;
   const total = paginationConfig.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : ctx.processedData.value.length;
-  return h("div", { class: getSimplePaginationContainerClasses() }, [
-    paginationConfig.showTotal !== false && h(
+  return h5("div", { class: getSimplePaginationContainerClasses() }, [
+    paginationConfig.showTotal !== false && h5(
       "div",
       { class: getSimplePaginationTotalClasses() },
       paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results`
     ),
-    h("div", { class: getSimplePaginationControlsClasses() }, [
-      paginationConfig.showSizeChanger !== false && h(
+    h5("div", { class: getSimplePaginationControlsClasses() }, [
+      paginationConfig.showSizeChanger !== false && h5(
         "select",
         {
           class: getSimplePaginationSelectClasses(),
@@ -942,11 +1098,11 @@ function renderPagination(ctx, props) {
           onChange: (e) => ctx.handlePageSizeChange(Number(e.target.value))
         },
         (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(
-          (size) => h("option", { value: size }, `${size} / page`)
+          (size) => h5("option", { value: size }, `${size} / page`)
         )
       ),
-      h("div", { class: getSimplePaginationButtonsWrapperClasses() }, [
-        h(
+      h5("div", { class: getSimplePaginationButtonsWrapperClasses() }, [
+        h5(
           "button",
           {
             class: getSimplePaginationButtonClasses(!hasPrev),
@@ -955,12 +1111,12 @@ function renderPagination(ctx, props) {
           },
           "Previous"
         ),
-        h(
+        h5(
           "span",
           { class: getSimplePaginationPageIndicatorClasses() },
           `Page ${ctx.currentPage.value} of ${totalPages}`
         ),
-        h(
+        h5(
           "button",
           {
             class: getSimplePaginationButtonClasses(!hasNext),
@@ -980,10 +1136,10 @@ var Table = defineComponent({
   props: tableProps,
   emits: tableEmits,
   setup(props, { emit, slots }) {
-    const wrapperRef = ref(null);
-    const tableRef = ref(null);
-    const measuredColumnWidths = ref({});
-    const measuredRowHeights = ref([]);
+    const wrapperRef = ref2(null);
+    const tableRef = ref2(null);
+    const measuredColumnWidths = ref2({});
+    const measuredRowHeights = ref2([]);
     const ctx = useTableState(props, emit, measuredColumnWidths);
     const resizeController = createTableResizeObserverController({
       onResize: (snapshot) => {
@@ -1005,9 +1161,12 @@ var Table = defineComponent({
       const resolvedProps = props;
       const virtualRecommendation = getTableVirtualRecommendation({
         virtual: resolvedProps.virtual,
+        autoVirtual: resolvedProps.autoVirtual,
         dataLength: resolvedProps.dataSource.length,
-        threshold: resolvedProps.virtualThreshold
+        threshold: resolvedProps.virtualThreshold,
+        autoThreshold: resolvedProps.autoVirtualThreshold
       });
+      const effectiveVirtual = virtualRecommendation.enabled;
       const wrapperStyle = resolvedProps.maxHeight ? {
         maxHeight: typeof resolvedProps.maxHeight === "number" ? `${resolvedProps.maxHeight}px` : resolvedProps.maxHeight
       } : void 0;
@@ -1016,19 +1175,20 @@ var Table = defineComponent({
         renderTableBody(ctx, resolvedProps, slots),
         renderSummaryRow(ctx, resolvedProps)
       ];
-      const tableInner = h(
+      const tableInner = h6(
         "table",
         {
           ref: tableRef,
-          class: classNames(
+          class: classNames3(
             tableBaseClasses,
+            getTableResponsiveTableClasses(resolvedProps.responsiveMode),
             resolvedProps.tableLayout === "fixed" ? "table-fixed" : "table-auto"
           ),
           style: ctx.fixedColumnsInfo.value.hasFixedColumns && ctx.fixedColumnsInfo.value.minTableWidth ? { minWidth: `${ctx.fixedColumnsInfo.value.minTableWidth}px` } : void 0
         },
         tableChildren
       );
-      const tableContent = resolvedProps.virtual ? h(
+      const tableContent = effectiveVirtual ? h6(
         "div",
         {
           style: { height: `${resolvedProps.virtualHeight}px`, overflow: "auto" },
@@ -1038,33 +1198,101 @@ var Table = defineComponent({
         },
         [tableInner]
       ) : tableInner;
-      return h(
+      const cardContent = resolvedProps.responsiveMode === "card" ? h6(
+        "div",
+        { class: tableResponsiveCardListClasses, "data-tiger-table-mobile": "card" },
+        ctx.paginatedData.value.length === 0 ? [h6("div", { class: tableResponsiveCardClasses }, resolvedProps.emptyText)] : ctx.paginatedData.value.map((record, index) => {
+          const key = ctx.paginatedRowKeys.value[index];
+          const isExpanded = ctx.expandedRowKeySet.value.has(key);
+          const isRowExpandable = resolvedProps.expandable ? resolvedProps.expandable.rowExpandable ? resolvedProps.expandable.rowExpandable(record) : true : false;
+          const rows = ctx.displayColumns.value.map((column) => {
+            const dataKey = column.dataKey || column.key;
+            const cellValue = record[dataKey];
+            const cellContent = slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue);
+            return h6("div", { key: column.key, class: tableResponsiveCardRowClasses }, [
+              h6("div", { class: tableResponsiveCardLabelClasses }, column.title),
+              h6("div", { class: tableResponsiveCardValueClasses }, [cellContent])
+            ]);
+          });
+          const controls = [];
+          if (resolvedProps.rowSelection && resolvedProps.rowSelection.showCheckbox !== false) {
+            const checkboxProps = resolvedProps.rowSelection.getCheckboxProps?.(record) || {};
+            controls.push(
+              h6("input", {
+                type: resolvedProps.rowSelection.type === "radio" ? "radio" : "checkbox",
+                checked: ctx.selectedRowKeySet.value.has(key),
+                disabled: checkboxProps.disabled,
+                onClick: (event) => event.stopPropagation(),
+                onChange: (event) => ctx.handleSelectRow(key, event.target.checked)
+              })
+            );
+          }
+          if (resolvedProps.expandable && isRowExpandable) {
+            controls.push(
+              h6(
+                "button",
+                {
+                  type: "button",
+                  class: "text-sm text-[var(--tiger-primary,#2563eb)]",
+                  "aria-expanded": isExpanded,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    ctx.handleToggleExpand(key, record);
+                  }
+                },
+                isExpanded ? "Collapse" : "Expand"
+              )
+            );
+          }
+          const expandedContent = resolvedProps.expandable && isExpanded && isRowExpandable ? slots["expanded-row"]?.({ record, index }) ?? resolvedProps.expandable.expandedRowRender?.(record, index) : null;
+          return h6(
+            "div",
+            {
+              key,
+              class: tableResponsiveCardClasses,
+              onClick: () => ctx.handleRowClick(record, index, key)
+            },
+            [
+              controls.length ? h6("div", { class: "mb-2 flex items-center gap-3" }, controls) : null,
+              ...rows,
+              expandedContent ? h6(
+                "div",
+                { class: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3" },
+                [expandedContent]
+              ) : null
+            ]
+          );
+        })
+      ) : null;
+      return h6(
         "div",
         {
           ref: wrapperRef,
           class: getTableWrapperClasses(resolvedProps.bordered, resolvedProps.maxHeight),
           style: wrapperStyle,
           "data-tiger-virtual": virtualRecommendation.enabled ? "enabled" : void 0,
+          "data-tiger-virtual-auto": virtualRecommendation.autoEnabled ? "true" : void 0,
           "data-tiger-virtual-recommended": virtualRecommendation.recommended ? "true" : void 0,
           "data-tiger-virtual-threshold": virtualRecommendation.recommended ? virtualRecommendation.threshold : void 0,
           "data-tiger-measured-row-height": measuredRowHeights.value[0] || void 0,
           "aria-busy": resolvedProps.loading
         },
         [
-          resolvedProps.exportable && h("div", { class: "flex justify-end p-2" }, [
-            h(
+          resolvedProps.exportable && h6("div", { class: "flex justify-end p-2" }, [
+            h6(
               "button",
               {
                 type: "button",
                 class: tableExportButtonClasses,
                 onClick: ctx.handleExport,
-                "aria-label": "Export to CSV"
+                "aria-label": resolvedProps.exportFormat === "excel" ? "Export to Excel" : "Export to CSV"
               },
-              "Export CSV"
+              resolvedProps.exportFormat === "excel" ? "Export Excel" : "Export CSV"
             )
           ]),
           tableContent,
-          resolvedProps.loading && h(
+          cardContent,
+          resolvedProps.loading && h6(
             "div",
             {
               class: tableLoadingOverlayClasses,
@@ -1072,7 +1300,7 @@ var Table = defineComponent({
               "aria-live": "polite",
               "aria-label": "Loading"
             },
-            [LoadingSpinner(), h("span", { class: "sr-only" }, "Loading")]
+            [LoadingSpinner(), h6("span", { class: "sr-only" }, "Loading")]
           ),
           renderPagination(ctx, resolvedProps)
         ]
@@ -1090,4 +1318,7 @@ function areNumberArraysEqual(current, next) {
   return current.length === next.length && next.every((value, index) => current[index] === value);
 }
 
-export { Table, Table_default };
+export {
+  Table,
+  Table_default
+};