@expcat/tigercat-react 1.1.0 → 1.2.0

package/dist/{chunk-CBWRSICK.mjs → chunk-T7ACOL7K.mjs}

@@ -1,8 +1,37 @@
-import React, { useRef, useState, useMemo, useEffect } from 'react';
-import { getSpinnerSVG, getTableVirtualRecommendation, createTableResizeObserverController, getTableWrapperClasses, tableExportButtonClasses, classNames, tableBaseClasses, tableLoadingOverlayClasses, getFixedColumnOffsets, filterDataAdvanced, filterData, sortData, paginateData, createTableRowKeyCache, calculatePagination, groupDataByColumn, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getExpandIconCellClasses, getTableHeaderClasses, getCheckboxCellClasses, getTableHeaderCellClasses, tableEmptyStateClasses, tableGroupHeaderClasses, getGroupHeaderCellClasses, tableSummaryRowClasses, getTableCellClasses, getLoadingOverlaySpinnerClasses, exportTableToCsv, downloadCsv, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, editableCellInputClasses, getEditableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, getExpandIconClasses, expandChevronIcon16PathD } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/Table.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+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/icons.tsx
+import {
+  getSortIconClasses,
+  getExpandIconClasses,
+  getSpinnerSVG,
+  getLoadingOverlaySpinnerClasses,
+  icon16ViewBox,
+  icon24ViewBox,
+  sortAscIcon16PathD,
+  sortDescIcon16PathD,
+  sortBothIcon16PathD,
+  expandChevronIcon16PathD,
+  lockClosedIcon24PathD,
+  lockOpenIcon24PathD
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var spinnerSvg = getSpinnerSVG("spinner");
 var SortIcon = ({ direction }) => {
   const active = direction !== null;
@@ -50,6 +79,20 @@ var LoadingSpinner = () => /* @__PURE__ */ jsx(
     })
   }
 );
+
+// src/components/Table/state.ts
+import { useEffect, useMemo, useState } from "react";
+import {
+  sortData,
+  filterData,
+  paginateData,
+  calculatePagination,
+  createTableRowKeyCache,
+  filterDataAdvanced,
+  groupDataByColumn,
+  getFixedColumnOffsets
+} from "@expcat/tigercat-core";
+import { exportTableData, downloadTableExport } from "@expcat/tigercat-core";
 function useTableState(input) {
   const {
     columns,
@@ -67,6 +110,7 @@ function useTableState(input) {
     filterMode,
     advancedFilterRules,
     groupBy,
+    exportFormat,
     exportFilename,
     measuredColumnWidths,
     onChange,
@@ -78,6 +122,7 @@ function useTableState(input) {
     onExpandChange,
     onCellChange,
     onColumnOrderChange,
+    onRowOrderChange,
     onExport
   } = input;
   const isSortControlled = sort !== void 0;
@@ -348,9 +393,9 @@ function useTableState(input) {
     setEditingCell(null);
   }
   function handleExport() {
-    const csv = exportTableToCsv(displayColumns, processedData);
-    downloadCsv(csv, exportFilename);
-    onExport?.(csv);
+    const content = exportTableData(displayColumns, processedData, exportFormat);
+    downloadTableExport(content, exportFilename, exportFormat);
+    onExport?.(content);
   }
   const [dragColumnKey, setDragColumnKey] = useState(null);
   function handleDragStart(columnKey) {
@@ -368,6 +413,22 @@ function useTableState(input) {
     }
     setDragColumnKey(null);
   }
+  const [dragRowKey, setDragRowKey] = useState(null);
+  function handleRowDragStart(rowKeyValue) {
+    setDragRowKey(rowKeyValue);
+  }
+  function handleRowDrop(targetKey) {
+    if (dragRowKey === null || dragRowKey === targetKey) return;
+    const rows = [...paginatedData];
+    const fromIdx = pageRowKeys.findIndex((key) => key === dragRowKey);
+    const toIdx = pageRowKeys.findIndex((key) => key === targetKey);
+    if (fromIdx >= 0 && toIdx >= 0) {
+      const [moved] = rows.splice(fromIdx, 1);
+      rows.splice(toIdx, 0, moved);
+      onRowOrderChange?.(rows);
+    }
+    setDragRowKey(null);
+  }
   const groupedData = useMemo(() => {
     if (!groupBy) return null;
     return groupDataByColumn(paginatedData, groupBy);
@@ -407,16 +468,28 @@ function useTableState(input) {
     cancelEdit,
     handleExport,
     handleDragStart,
-    handleDrop
+    handleDrop,
+    handleRowDragStart,
+    handleRowDrop
   };
 }
+
+// src/components/Table/render-header.tsx
+import {
+  classNames,
+  getTableHeaderClasses,
+  getTableHeaderCellClasses,
+  getCheckboxCellClasses,
+  getExpandIconCellClasses
+} from "@expcat/tigercat-core";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function renderTableHeader(ctx, view) {
   const { size, stickyHeader, rowSelection, expandable, columnLockable, columnDraggable } = view;
-  const expandHeaderTh = expandable ? /* @__PURE__ */ jsx("th", { className: getExpandIconCellClasses(size), "aria-label": "Expand" }) : null;
+  const expandHeaderTh = expandable ? /* @__PURE__ */ jsx2("th", { className: getExpandIconCellClasses(size), "aria-label": "Expand" }) : null;
   const expandAtStart = expandable?.expandIconPosition !== "end";
-  return /* @__PURE__ */ jsx("thead", { className: getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxs("tr", { children: [
+  return /* @__PURE__ */ jsx2("thead", { className: getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxs("tr", { children: [
     expandAtStart && expandHeaderTh,
-    rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsx("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
+    rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsx2("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx2(
       "input",
       {
         type: "checkbox",
@@ -470,7 +543,7 @@ function renderTableHeader(ctx, view) {
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               column.renderHeader ? column.renderHeader() : column.title,
-              columnLockable && /* @__PURE__ */ jsx(
+              columnLockable && /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -483,23 +556,23 @@ function renderTableHeader(ctx, view) {
                     e.stopPropagation();
                     ctx.toggleColumnLock(column.key);
                   },
-                  children: /* @__PURE__ */ jsx(LockIcon, { locked: column.fixed === "left" || column.fixed === "right" })
+                  children: /* @__PURE__ */ jsx2(LockIcon, { locked: column.fixed === "left" || column.fixed === "right" })
                 }
               ),
-              column.sortable && /* @__PURE__ */ jsx(SortIcon, { direction: sortDirection })
+              column.sortable && /* @__PURE__ */ jsx2(SortIcon, { direction: sortDirection })
             ] }),
-            column.filter && /* @__PURE__ */ jsx("div", { className: "mt-2", children: column.filter.type === "select" && column.filter.options ? /* @__PURE__ */ jsxs(
+            column.filter && /* @__PURE__ */ jsx2("div", { className: "mt-2", children: column.filter.type === "select" && column.filter.options ? /* @__PURE__ */ jsxs(
               "select",
               {
                 className: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
                 onChange: (e) => ctx.handleFilter(column.key, e.target.value),
                 onClick: (e) => e.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
-                  column.filter.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                  /* @__PURE__ */ jsx2("option", { value: "", children: "All" }),
+                  column.filter.options.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, children: opt.label }, opt.value))
                 ]
               }
-            ) : /* @__PURE__ */ jsx(
+            ) : /* @__PURE__ */ jsx2(
               "input",
               {
                 type: "text",
@@ -517,13 +590,74 @@ function renderTableHeader(ctx, view) {
     !expandAtStart && expandHeaderTh
   ] }) });
 }
+
+// src/components/Table/render-body.tsx
+import React from "react";
+import {
+  classNames as classNames2,
+  getTableRowClasses,
+  getTableCellClasses,
+  getCheckboxCellClasses as getCheckboxCellClasses2,
+  getExpandIconCellClasses as getExpandIconCellClasses2,
+  getExpandedRowClasses,
+  getExpandedRowContentClasses,
+  tableEmptyStateClasses,
+  getEditableCellClasses,
+  editableCellInputClasses,
+  tableGroupHeaderClasses,
+  getGroupHeaderCellClasses
+} from "@expcat/tigercat-core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function renderTableBody(ctx, view) {
-  const { size, hoverable, striped, loading, emptyText, rowSelection, expandable, rowClassName } = view;
+  const {
+    size,
+    hoverable,
+    striped,
+    loading,
+    emptyText,
+    rowSelection,
+    expandable,
+    rowClassName,
+    rowDraggable
+  } = view;
   if (loading) {
     return null;
   }
   if (ctx.paginatedData.length === 0) {
-    return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: ctx.totalColumnCount, className: tableEmptyStateClasses, children: /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
+    return /* @__PURE__ */ jsx3("tbody", { children: /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3("td", { colSpan: ctx.totalColumnCount, className: tableEmptyStateClasses, children: /* @__PURE__ */ jsx3("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
+  }
+  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[index];
+    const key = ctx.pageRowKeys[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 (!rowDraggable) return;
+    const row = getDelegatedRow(event);
+    if (!row) return;
+    ctx.handleRowDragStart(row.key);
+  }
+  function handleBodyDragOver(event) {
+    if (!rowDraggable) return;
+    event.preventDefault();
+  }
+  function handleBodyDrop(event) {
+    if (!rowDraggable) return;
+    const row = getDelegatedRow(event);
+    if (!row) return;
+    ctx.handleRowDrop(row.key);
   }
   function renderDataRow(record, index) {
     const key = ctx.pageRowKeys[index];
@@ -531,7 +665,7 @@ function renderTableBody(ctx, view) {
     const isExpanded = ctx.expandedRowKeySet.has(key);
     const isRowExpandable = expandable ? expandable.rowExpandable ? expandable.rowExpandable(record) : true : false;
     const rowClass = typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
-    const expandToggleCell = expandable ? /* @__PURE__ */ jsx("td", { className: getExpandIconCellClasses(size), children: isRowExpandable && /* @__PURE__ */ jsx(
+    const expandToggleCell = expandable ? /* @__PURE__ */ jsx3("td", { className: getExpandIconCellClasses2(size), children: isRowExpandable && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -542,22 +676,22 @@ function renderTableBody(ctx, view) {
           e.stopPropagation();
           ctx.handleToggleExpand(key, record);
         },
-        children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded })
+        children: /* @__PURE__ */ jsx3(ExpandIcon, { expanded: isExpanded })
       }
     ) }) : null;
     const expandAtStart = expandable?.expandIconPosition !== "end";
-    const rowNode = /* @__PURE__ */ jsxs(
+    const rowNode = /* @__PURE__ */ jsxs2(
       "tr",
       {
         "data-tiger-table-row-index": index,
-        className: classNames(
+        className: classNames2(
           getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
           ctx.fixedColumnsInfo.hasFixedColumns && "group"
         ),
-        onClick: () => ctx.handleRowClick(record, index, key),
+        draggable: rowDraggable ? true : void 0,
         children: [
           expandAtStart && expandToggleCell,
-          rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
+          rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx3("td", { className: getCheckboxCellClasses2(size), children: /* @__PURE__ */ jsx3(
             "input",
             {
               type: rowSelection?.type === "radio" ? "radio" : "checkbox",
@@ -587,23 +721,23 @@ function renderTableBody(ctx, view) {
             } : void 0;
             const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
             const stickyBgClass = 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,
               hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
             ) : void 0;
             const isEditing = ctx.editingCell?.rowIndex === index && ctx.editingCell?.columnKey === column.key;
             const cellEditable = ctx.isCellEditable(column.key, index);
-            return /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx3(
               "td",
               {
-                className: classNames(
+                className: classNames2(
                   getTableCellClasses(size, column.align || "left", column.className),
                   stickyCellClass,
                   cellEditable && getEditableCellClasses(!!isEditing)
                 ),
                 style,
                 onDoubleClick: cellEditable ? () => ctx.startEditing(index, column.key, cellValue) : void 0,
-                children: isEditing ? /* @__PURE__ */ jsx(
+                children: isEditing ? /* @__PURE__ */ jsx3(
                   "input",
                   {
                     className: editableCellInputClasses,
@@ -628,38 +762,75 @@ function renderTableBody(ctx, view) {
     );
     if (expandable && isExpanded && isRowExpandable) {
       const expandedContent = expandable.expandedRowRender ? expandable.expandedRowRender(record, index) : null;
-      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
         rowNode,
-        /* @__PURE__ */ jsx("tr", { className: getExpandedRowClasses(), children: /* @__PURE__ */ jsx("td", { colSpan: ctx.totalColumnCount, className: getExpandedRowContentClasses(size), children: expandedContent }) }, `${key}-expanded`)
+        /* @__PURE__ */ jsx3("tr", { className: getExpandedRowClasses(), children: /* @__PURE__ */ jsx3("td", { colSpan: ctx.totalColumnCount, className: getExpandedRowContentClasses(size), children: expandedContent }) }, `${key}-expanded`)
       ] }, key);
     }
     return rowNode;
   }
   if (ctx.groupedData) {
-    return /* @__PURE__ */ jsx("tbody", { children: Array.from(ctx.groupedData.entries()).map(([groupKey, groupItems]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsx("tr", { className: tableGroupHeaderClasses, children: /* @__PURE__ */ jsxs("td", { colSpan: ctx.totalColumnCount, className: getGroupHeaderCellClasses(size), children: [
-        groupKey,
-        " (",
-        groupItems.length,
-        ")"
-      ] }) }),
-      groupItems.map((record, idx) => {
-        const globalIndex = ctx.paginatedData.indexOf(record);
-        return renderDataRow(record, globalIndex >= 0 ? globalIndex : idx);
-      })
-    ] }, `group-${groupKey}`)) });
+    return /* @__PURE__ */ jsx3(
+      "tbody",
+      {
+        onClick: handleBodyClick,
+        onDragStart: rowDraggable ? handleBodyDragStart : void 0,
+        onDragOver: rowDraggable ? handleBodyDragOver : void 0,
+        onDrop: rowDraggable ? handleBodyDrop : void 0,
+        children: Array.from(ctx.groupedData.entries()).map(([groupKey, groupItems]) => /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+          /* @__PURE__ */ jsx3("tr", { className: tableGroupHeaderClasses, children: /* @__PURE__ */ jsxs2("td", { colSpan: ctx.totalColumnCount, className: getGroupHeaderCellClasses(size), children: [
+            groupKey,
+            " (",
+            groupItems.length,
+            ")"
+          ] }) }),
+          groupItems.map((record, idx) => {
+            const globalIndex = ctx.paginatedData.indexOf(record);
+            return renderDataRow(record, globalIndex >= 0 ? globalIndex : idx);
+          })
+        ] }, `group-${groupKey}`))
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("tbody", { children: ctx.paginatedData.map((record, index) => renderDataRow(record, index)) });
+  return /* @__PURE__ */ jsx3(
+    "tbody",
+    {
+      onClick: handleBodyClick,
+      onDragStart: rowDraggable ? handleBodyDragStart : void 0,
+      onDragOver: rowDraggable ? handleBodyDragOver : void 0,
+      onDrop: rowDraggable ? handleBodyDrop : void 0,
+      children: ctx.paginatedData.map((record, index) => renderDataRow(record, index))
+    }
+  );
 }
+
+// src/components/Table/render-summary.tsx
+import {
+  getTableCellClasses as getTableCellClasses2,
+  tableSummaryRowClasses
+} from "@expcat/tigercat-core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function renderSummaryRow(ctx, view) {
   const { size, rowSelection, expandable, summaryRow } = view;
   if (!summaryRow?.show) return null;
-  return /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { className: tableSummaryRowClasses, children: [
-    rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getTableCellClasses(size, "left") }),
-    expandable && /* @__PURE__ */ jsx("td", { className: getTableCellClasses(size, "left") }),
-    ctx.displayColumns.map((column) => /* @__PURE__ */ jsx("td", { className: getTableCellClasses(size, column.align || "left"), children: summaryRow.data[column.dataKey || column.key] ?? "" }, column.key))
+  return /* @__PURE__ */ jsx4("tfoot", { children: /* @__PURE__ */ jsxs3("tr", { className: tableSummaryRowClasses, children: [
+    rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx4("td", { className: getTableCellClasses2(size, "left") }),
+    expandable && /* @__PURE__ */ jsx4("td", { className: getTableCellClasses2(size, "left") }),
+    ctx.displayColumns.map((column) => /* @__PURE__ */ jsx4("td", { className: getTableCellClasses2(size, column.align || "left"), children: summaryRow.data[column.dataKey || column.key] ?? "" }, column.key))
   ] }) });
 }
+
+// src/components/Table/render-pagination.tsx
+import {
+  getSimplePaginationContainerClasses,
+  getSimplePaginationTotalClasses,
+  getSimplePaginationControlsClasses,
+  getSimplePaginationSelectClasses,
+  getSimplePaginationButtonClasses,
+  getSimplePaginationPageIndicatorClasses,
+  getSimplePaginationButtonsWrapperClasses
+} from "@expcat/tigercat-core";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function renderPagination(ctx, view) {
   const { pagination } = view;
   if (pagination === false || !ctx.paginationInfo) {
@@ -668,23 +839,23 @@ function renderPagination(ctx, view) {
   const { totalPages, startIndex, endIndex, hasNext, hasPrev } = ctx.paginationInfo;
   const paginationConfig = pagination;
   const total = paginationConfig.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : ctx.processedData.length;
-  return /* @__PURE__ */ jsxs("div", { className: getSimplePaginationContainerClasses(), children: [
-    paginationConfig.showTotal !== false && /* @__PURE__ */ jsx("div", { className: getSimplePaginationTotalClasses(), children: paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results` }),
-    /* @__PURE__ */ jsxs("div", { className: getSimplePaginationControlsClasses(), children: [
-      paginationConfig.showSizeChanger !== false && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs4("div", { className: getSimplePaginationContainerClasses(), children: [
+    paginationConfig.showTotal !== false && /* @__PURE__ */ jsx5("div", { className: getSimplePaginationTotalClasses(), children: paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results` }),
+    /* @__PURE__ */ jsxs4("div", { className: getSimplePaginationControlsClasses(), children: [
+      paginationConfig.showSizeChanger !== false && /* @__PURE__ */ jsx5(
         "select",
         {
           className: getSimplePaginationSelectClasses(),
           value: ctx.currentPageSize,
           onChange: (e) => ctx.handlePageSizeChange(Number(e.target.value)),
-          children: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
+          children: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size) => /* @__PURE__ */ jsxs4("option", { value: size, children: [
             size,
             " / page"
           ] }, size))
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: getSimplePaginationButtonsWrapperClasses(), children: [
-        /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs4("div", { className: getSimplePaginationButtonsWrapperClasses(), children: [
+        /* @__PURE__ */ jsx5(
           "button",
           {
             className: getSimplePaginationButtonClasses(!hasPrev),
@@ -693,13 +864,13 @@ function renderPagination(ctx, view) {
             children: "Previous"
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: getSimplePaginationPageIndicatorClasses(), children: [
+        /* @__PURE__ */ jsxs4("span", { className: getSimplePaginationPageIndicatorClasses(), children: [
           "Page ",
           ctx.currentPage,
           " of ",
           totalPages
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx5(
           "button",
           {
             className: getSimplePaginationButtonClasses(!hasNext),
@@ -712,6 +883,9 @@ function renderPagination(ctx, view) {
     ] })
   ] });
 }
+
+// src/components/Table.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Table({
   columns,
   columnLockable = false,
@@ -741,19 +915,24 @@ function Table({
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
+  responsiveMode = "scroll",
   // v0.6.0 props
   virtual = false,
+  autoVirtual = true,
   virtualHeight = 400,
   virtualItemHeight: _virtualItemHeight = 40,
+  autoVirtualThreshold = 1e4,
   virtualThreshold = 1e3,
   editable = false,
   editableCells,
   filterMode = "basic",
   advancedFilterRules = [],
   columnDraggable = false,
+  rowDraggable = false,
   summaryRow,
   groupBy,
   exportable = false,
+  exportFormat = "csv",
   exportFilename = "export",
   onChange,
   onRowClick,
@@ -764,14 +943,15 @@ function Table({
   onExpandChange,
   onCellChange,
   onColumnOrderChange,
+  onRowOrderChange,
   onExport,
   className,
   ...props
 }) {
   const wrapperRef = useRef(null);
   const tableRef = useRef(null);
-  const [measuredColumnWidths, setMeasuredColumnWidths] = useState({});
-  const [measuredRowHeights, setMeasuredRowHeights] = useState([]);
+  const [measuredColumnWidths, setMeasuredColumnWidths] = useState2({});
+  const [measuredRowHeights, setMeasuredRowHeights] = useState2([]);
   const internalRowSelection = rowSelection;
   const internalExpandable = expandable;
   const internalRowClassName = rowClassName;
@@ -791,6 +971,7 @@ function Table({
     filterMode,
     advancedFilterRules,
     groupBy,
+    exportFormat,
     exportFilename,
     measuredColumnWidths,
     onChange,
@@ -802,10 +983,22 @@ function Table({
     onExpandChange,
     onCellChange,
     onColumnOrderChange,
+    onRowOrderChange,
     onExport
   });
-  const wrapperStyle = useMemo(() => {
-    if (virtual) {
+  const virtualRecommendation = useMemo2(
+    () => getTableVirtualRecommendation({
+      virtual,
+      autoVirtual,
+      dataLength: dataSource.length,
+      threshold: virtualThreshold,
+      autoThreshold: autoVirtualThreshold
+    }),
+    [autoVirtual, autoVirtualThreshold, dataSource.length, virtual, virtualThreshold]
+  );
+  const effectiveVirtual = virtualRecommendation.enabled;
+  const wrapperStyle = useMemo2(() => {
+    if (effectiveVirtual) {
       return {
         height: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
         overflow: "auto"
@@ -814,16 +1007,8 @@ function Table({
     return maxHeight ? {
       maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
     } : void 0;
-  }, [maxHeight, virtual, virtualHeight]);
-  const virtualRecommendation = useMemo(
-    () => getTableVirtualRecommendation({
-      virtual,
-      dataLength: dataSource.length,
-      threshold: virtualThreshold
-    }),
-    [dataSource.length, virtual, virtualThreshold]
-  );
-  useEffect(() => {
+  }, [effectiveVirtual, maxHeight, virtualHeight]);
+  useEffect2(() => {
     const wrapper = wrapperRef.current;
     if (!wrapper) {
       return void 0;
@@ -841,7 +1026,7 @@ function Table({
     controller.observe(wrapper, tableRef.current);
     return () => controller.disconnect();
   }, [ctx.displayColumns.length, ctx.paginatedData.length]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: wrapperRef,
@@ -851,18 +1036,20 @@ function Table({
       ),
       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[0] || void 0,
       "aria-busy": loading,
       children: [
-        exportable && /* @__PURE__ */ jsx("div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ jsx("button", { type: "button", className: tableExportButtonClasses, onClick: ctx.handleExport, children: "Export CSV" }) }),
-        /* @__PURE__ */ jsxs(
+        exportable && /* @__PURE__ */ jsx6("div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ jsx6("button", { type: "button", className: tableExportButtonClasses, onClick: ctx.handleExport, children: exportFormat === "excel" ? "Export Excel" : "Export CSV" }) }),
+        /* @__PURE__ */ jsxs5(
           "table",
           {
             ref: tableRef,
-            className: classNames(
+            className: classNames3(
               tableBaseClasses,
+              getTableResponsiveTableClasses(responsiveMode),
               tableLayout === "fixed" ? "table-fixed" : "table-auto",
               className
             ),
@@ -888,7 +1075,8 @@ function Table({
                 emptyText,
                 rowSelection: internalRowSelection,
                 expandable: internalExpandable,
-                rowClassName: internalRowClassName
+                rowClassName: internalRowClassName,
+                rowDraggable
               }),
               renderSummaryRow(ctx, {
                 size,
@@ -899,7 +1087,59 @@ function Table({
             ]
           }
         ),
-        loading && /* @__PURE__ */ jsxs(
+        responsiveMode === "card" && /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardListClasses, "data-tiger-table-mobile": "card", children: ctx.paginatedData.length === 0 ? /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardClasses, children: emptyText }) : ctx.paginatedData.map((record, index) => {
+          const key = ctx.pageRowKeys[index];
+          const isExpanded = ctx.expandedRowKeySet.has(key);
+          const isRowExpandable = internalExpandable ? internalExpandable.rowExpandable ? internalExpandable.rowExpandable(record) : true : false;
+          const expandedContent = internalExpandable && isExpanded && isRowExpandable ? internalExpandable.expandedRowRender?.(record, index) : null;
+          const expandedNode = expandedContent;
+          return /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: tableResponsiveCardClasses,
+              onClick: () => ctx.handleRowClick(record, index, key),
+              children: [
+                internalRowSelection?.showCheckbox !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-3", children: [
+                  internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ jsx6(
+                    "input",
+                    {
+                      type: internalRowSelection.type === "radio" ? "radio" : "checkbox",
+                      checked: ctx.selectedRowKeySet.has(key),
+                      disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
+                      onClick: (event) => event.stopPropagation(),
+                      onChange: (event) => ctx.handleSelectRow(key, event.target.checked)
+                    }
+                  ),
+                  internalExpandable && isRowExpandable && /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-sm text-[var(--tiger-primary,#2563eb)]",
+                      "aria-expanded": isExpanded,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        ctx.handleToggleExpand(key, record);
+                      },
+                      children: isExpanded ? "Collapse" : "Expand"
+                    }
+                  )
+                ] }) : null,
+                ctx.displayColumns.map((column) => {
+                  const dataKey = column.dataKey || column.key;
+                  const cellValue = record[dataKey];
+                  const cellContent = column.render ? column.render(record, index) : cellValue;
+                  return /* @__PURE__ */ jsxs5("div", { className: tableResponsiveCardRowClasses, children: [
+                    /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardLabelClasses, children: column.title }),
+                    /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardValueClasses, children: cellContent })
+                  ] }, column.key);
+                }),
+                expandedNode && /* @__PURE__ */ jsx6("div", { className: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3", children: expandedNode })
+              ]
+            },
+            key
+          );
+        }) }),
+        loading && /* @__PURE__ */ jsxs5(
           "div",
           {
             className: tableLoadingOverlayClasses,
@@ -907,8 +1147,8 @@ function Table({
             "aria-live": "polite",
             "aria-label": "Loading",
             children: [
-              /* @__PURE__ */ jsx(LoadingSpinner, {}),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+              /* @__PURE__ */ jsx6(LoadingSpinner, {}),
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Loading" })
             ]
           }
         ),
@@ -926,4 +1166,6 @@ function areNumberArraysEqual(current, next) {
   return current.length === next.length && next.every((value, index) => current[index] === value);
 }
 
-export { Table };
+export {
+  Table
+};