@geomak/ui 1.7.2 → 1.7.3

package/dist/index.d.cts

@@ -885,11 +885,34 @@ interface WizardProps {
 declare function Wizard({ children, steps, storageKey }: WizardProps): react_jsx_runtime.JSX.Element;
 
 /** ─────────────────── types ─────────────────── */
-interface TableColumn {
-    key: string | number;
+/**
+ * Column descriptor for the Table.
+ *
+ * The generic `T` is the shape of a row — `keyBind` must be one of T's
+ * string-keyed properties, and `component(cellValue, row)` receives the
+ * matching value with full type inference. When used without a generic
+ * (`TableColumn[]`), `T` falls back to `Record<string, any>` for backwards
+ * compatibility — narrower typing is preferred whenever possible:
+ *
+ * ```ts
+ * type Vessel = { id: number; name: string; status: 'At Sea' | 'In Port' }
+ * const cols: TableColumn<Vessel>[] = [
+ *   { key: 'name', label: 'Name', keyBind: 'name' }, // cellValue inferred as string
+ * ]
+ * ```
+ */
+interface TableColumn<T extends Record<string, any> = Record<string, any>> {
+    /** React reconciliation key for the column itself. */
+    key: React$1.Key;
     label: React$1.ReactNode;
-    keyBind: string;
-    component?: (cellValue: any, row: any) => React$1.ReactNode;
+    /** Property on the row to read for this column. */
+    keyBind: keyof T & string;
+    /** Custom cell renderer. Receives the cell value and the full row. */
+    component?: (cellValue: T[keyof T], row: T) => React$1.ReactNode;
+    /** Explicit column width (CSS length or px number). Optional — defaults to auto. */
+    width?: string | number;
+    /** Text alignment for both header and cells. Defaults to `'center'`. */
+    align?: 'left' | 'center' | 'right';
 }
 interface PaginationOptions {
     enabled?: boolean;
@@ -910,36 +933,70 @@ interface PaginationOptions {
     onPageChange?: (page: number) => void;
     onPerPageChange?: (perPage: number) => void;
 }
-interface ExpandRowOptions {
+interface ExpandRowOptions<T extends Record<string, any> = Record<string, any>> {
     enabled?: boolean;
     expandIcon?: React$1.ReactNode;
-    expandComponent?: (row: any) => React$1.ReactNode;
+    expandComponent?: (row: T) => React$1.ReactNode;
 }
-interface TableProps {
-    columns?: TableColumn[];
-    rows?: any[];
+interface TableProps<T extends Record<string, any> = Record<string, any>> {
+    columns?: TableColumn<T>[];
+    rows?: T[];
+    /**
+     * Returns a stable key for each row, used for React reconciliation AND
+     * for tracking expanded state when `expandRow.enabled` is true.
+     * Defaults to the row index — fine for static lists, but pass an
+     * explicit getter (e.g. `(row) => row.id`) if rows can be reordered or
+     * filtered while expand state should persist.
+     */
+    getRowKey?: (row: T, index: number) => React$1.Key;
     pagination?: PaginationOptions;
-    expandRow?: ExpandRowOptions;
+    expandRow?: ExpandRowOptions<T>;
     hasSearch?: boolean;
     footer?: React$1.ReactNode;
     header?: React$1.ReactNode;
-    tableRef?: React$1.Ref<any>;
-    [key: string]: any;
 }
 /** ─────────────────── main component ─────────────────── */
 /**
  * Data table with optional search, pagination, and expandable rows.
  *
- * Supports both client-side and server-side pagination.
+ * - **Typed rows**: pass a generic `T` for full type inference on columns
+ *   and cell renderers (`<Table<Vessel> ... />`).
+ * - **Real `<table>` semantics**: keeps row / col / cell context intact for
+ *   screen readers and lets the browser handle column sizing natively.
+ *   Per-column widths via `column.width`.
+ * - **Search**: client-side filter across ALL row values; result is
+ *   memoized so each keystroke costs O(n) once per term change, not per
+ *   render. Set `pagination.serverSide` to skip client-side filter and
+ *   pagination entirely.
+ * - **Expand**: each row gets a real `<button>` with `aria-expanded`.
+ *   Expand state is keyed by `getRowKey(row, i)` so it survives reorders.
+ *
+ * @example Static, fully typed
+ * ```tsx
+ * type Vessel = { id: number; name: string; status: string }
+ * <Table<Vessel>
+ *   columns={[
+ *     { key: 'name', label: 'Name', keyBind: 'name' },
+ *     { key: 'status', label: 'Status', keyBind: 'status', width: 120 },
+ *   ]}
+ *   rows={vessels}
+ *   getRowKey={(row) => row.id}
+ * />
+ * ```
  *
- * @example
+ * @example Server-side pagination
+ * ```tsx
  * <Table
- *   columns={[{ key: 'name', label: 'Name', keyBind: 'name' }]}
- *   rows={data}
- *   pagination={{ enabled: true, perPage: 15 }}
+ *   columns={cols}
+ *   rows={pageRows}
+ *   pagination={{
+ *     enabled: true, serverSide: true, perPage: 20,
+ *     page: currentPage, totalCount, onPageChange, onPerPageChange,
+ *   }}
  * />
+ * ```
  */
-declare function Table({ columns, rows, pagination, expandRow, hasSearch, footer, header, }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;

package/dist/index.d.ts

@@ -885,11 +885,34 @@ interface WizardProps {
 declare function Wizard({ children, steps, storageKey }: WizardProps): react_jsx_runtime.JSX.Element;
 
 /** ─────────────────── types ─────────────────── */
-interface TableColumn {
-    key: string | number;
+/**
+ * Column descriptor for the Table.
+ *
+ * The generic `T` is the shape of a row — `keyBind` must be one of T's
+ * string-keyed properties, and `component(cellValue, row)` receives the
+ * matching value with full type inference. When used without a generic
+ * (`TableColumn[]`), `T` falls back to `Record<string, any>` for backwards
+ * compatibility — narrower typing is preferred whenever possible:
+ *
+ * ```ts
+ * type Vessel = { id: number; name: string; status: 'At Sea' | 'In Port' }
+ * const cols: TableColumn<Vessel>[] = [
+ *   { key: 'name', label: 'Name', keyBind: 'name' }, // cellValue inferred as string
+ * ]
+ * ```
+ */
+interface TableColumn<T extends Record<string, any> = Record<string, any>> {
+    /** React reconciliation key for the column itself. */
+    key: React$1.Key;
     label: React$1.ReactNode;
-    keyBind: string;
-    component?: (cellValue: any, row: any) => React$1.ReactNode;
+    /** Property on the row to read for this column. */
+    keyBind: keyof T & string;
+    /** Custom cell renderer. Receives the cell value and the full row. */
+    component?: (cellValue: T[keyof T], row: T) => React$1.ReactNode;
+    /** Explicit column width (CSS length or px number). Optional — defaults to auto. */
+    width?: string | number;
+    /** Text alignment for both header and cells. Defaults to `'center'`. */
+    align?: 'left' | 'center' | 'right';
 }
 interface PaginationOptions {
     enabled?: boolean;
@@ -910,36 +933,70 @@ interface PaginationOptions {
     onPageChange?: (page: number) => void;
     onPerPageChange?: (perPage: number) => void;
 }
-interface ExpandRowOptions {
+interface ExpandRowOptions<T extends Record<string, any> = Record<string, any>> {
     enabled?: boolean;
     expandIcon?: React$1.ReactNode;
-    expandComponent?: (row: any) => React$1.ReactNode;
+    expandComponent?: (row: T) => React$1.ReactNode;
 }
-interface TableProps {
-    columns?: TableColumn[];
-    rows?: any[];
+interface TableProps<T extends Record<string, any> = Record<string, any>> {
+    columns?: TableColumn<T>[];
+    rows?: T[];
+    /**
+     * Returns a stable key for each row, used for React reconciliation AND
+     * for tracking expanded state when `expandRow.enabled` is true.
+     * Defaults to the row index — fine for static lists, but pass an
+     * explicit getter (e.g. `(row) => row.id`) if rows can be reordered or
+     * filtered while expand state should persist.
+     */
+    getRowKey?: (row: T, index: number) => React$1.Key;
     pagination?: PaginationOptions;
-    expandRow?: ExpandRowOptions;
+    expandRow?: ExpandRowOptions<T>;
     hasSearch?: boolean;
     footer?: React$1.ReactNode;
     header?: React$1.ReactNode;
-    tableRef?: React$1.Ref<any>;
-    [key: string]: any;
 }
 /** ─────────────────── main component ─────────────────── */
 /**
  * Data table with optional search, pagination, and expandable rows.
  *
- * Supports both client-side and server-side pagination.
+ * - **Typed rows**: pass a generic `T` for full type inference on columns
+ *   and cell renderers (`<Table<Vessel> ... />`).
+ * - **Real `<table>` semantics**: keeps row / col / cell context intact for
+ *   screen readers and lets the browser handle column sizing natively.
+ *   Per-column widths via `column.width`.
+ * - **Search**: client-side filter across ALL row values; result is
+ *   memoized so each keystroke costs O(n) once per term change, not per
+ *   render. Set `pagination.serverSide` to skip client-side filter and
+ *   pagination entirely.
+ * - **Expand**: each row gets a real `<button>` with `aria-expanded`.
+ *   Expand state is keyed by `getRowKey(row, i)` so it survives reorders.
+ *
+ * @example Static, fully typed
+ * ```tsx
+ * type Vessel = { id: number; name: string; status: string }
+ * <Table<Vessel>
+ *   columns={[
+ *     { key: 'name', label: 'Name', keyBind: 'name' },
+ *     { key: 'status', label: 'Status', keyBind: 'status', width: 120 },
+ *   ]}
+ *   rows={vessels}
+ *   getRowKey={(row) => row.id}
+ * />
+ * ```
  *
- * @example
+ * @example Server-side pagination
+ * ```tsx
  * <Table
- *   columns={[{ key: 'name', label: 'Name', keyBind: 'name' }]}
- *   rows={data}
- *   pagination={{ enabled: true, perPage: 15 }}
+ *   columns={cols}
+ *   rows={pageRows}
+ *   pagination={{
+ *     enabled: true, serverSide: true, perPage: 20,
+ *     page: currentPage, totalCount, onPageChange, onPerPageChange,
+ *   }}
  * />
+ * ```
  */
-declare function Table({ columns, rows, pagination, expandRow, hasSearch, footer, header, }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;

package/dist/index.js

@@ -1691,9 +1691,7 @@ var DEFAULT_PAGINATION = {
   pickerOptions: DEFAULT_PICKER
 };
 var DEFAULT_EXPAND = {
-  enabled: false,
-  expandIcon: /* @__PURE__ */ jsx(Fragment, {}),
-  expandComponent: () => /* @__PURE__ */ jsx(Fragment, {})
+  enabled: false
 };
 function createDatasets(rows, perPage) {
   if (!perPage) return [rows.slice()];
@@ -1703,78 +1701,95 @@ function createDatasets(rows, perPage) {
   }
   return all;
 }
-function TableHeader({ columns }) {
-  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-raised min-h-[50px] border-b border-b-border flex items-center", children: /* @__PURE__ */ jsx("tr", { className: "flex w-full items-center justify-center", children: columns.map((col) => /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: "text-center w-full text-[13px] text-foreground",
-      children: col.label
-    },
-    col.key
-  )) }) });
+var defaultGetRowKey = (_row, index) => index;
+var cellAlign = (align) => align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center";
+function TableHeader({
+  columns,
+  hasExpand
+}) {
+  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-raised border-b border-border", children: /* @__PURE__ */ jsxs("tr", { children: [
+    hasExpand && /* @__PURE__ */ jsx("th", { "aria-hidden": "true", className: "w-9" }),
+    columns.map((col) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        className: `${cellAlign(col.align)} text-sm font-semibold text-foreground py-3 px-3`,
+        style: col.width != null ? { width: col.width } : void 0,
+        children: col.label
+      },
+      col.key
+    ))
+  ] }) });
 }
+var DefaultExpandIcon = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: "w-5 h-5 text-foreground-muted",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
 function TableBody({
   columns,
   rows,
-  expandRow
+  expandRow,
+  getRowKey
 }) {
-  const [visibleRows, setVisibleRows] = useState({});
+  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
   const toggleRow = (rowKey) => {
-    setVisibleRows((prev) => ({
-      ...prev,
-      [rowKey]: { visible: !prev[rowKey]?.visible }
-    }));
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowKey)) next.delete(rowKey);
+      else next.add(rowKey);
+      return next;
+    });
   };
-  useEffect(() => {
-    if (rows.length && Object.keys(visibleRows).length === 0) {
-      const initial = {};
-      rows.forEach((row) => {
-        initial[row.key] = { visible: false };
-      });
-      setVisibleRows(initial);
-    }
-  }, [rows]);
-  return /* @__PURE__ */ jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "tr",
-      {
-        className: `border-b border-b-border flex min-w-max hover:bg-surface-raised transition-all duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
-        children: [
-          expandRow.enabled && /* @__PURE__ */ jsx("td", { className: "flex items-center", children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              onClick: () => toggleRow(row.key),
-              className: `p-2 cursor-pointer origin-center transition-all duration-200 ${visibleRows[row.key]?.visible ? "rotate-180" : "rotate-0"}`,
-              children: expandRow.expandIcon ?? /* PlusCircle */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z", clipRule: "evenodd" }) })
-            }
-          ) }),
-          columns.map((col, index) => /* @__PURE__ */ jsx(
-            "td",
-            {
-              className: `text-center min-h-[40px] w-full flex items-center justify-center p-1 border-border ${index !== columns.length - 1 ? "border-r-2" : ""}`,
-              children: "component" in col && col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
-            },
-            index
-          ))
-        ]
-      }
-    ),
-    expandRow.enabled && /* @__PURE__ */ jsx(
-      "tr",
-      {
-        className: `overflow-hidden w-full transition-all duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-        children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0 pb-1", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `overflow-hidden w-full transition-[max-height] duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-            children: expandRow.expandComponent?.(row)
-          }
-        ) })
-      },
-      `extra-${i}`
-    )
-  ] }, row.key)) });
+  const hasExpand = !!expandRow.enabled;
+  const expandColCount = columns.length + (hasExpand ? 1 : 0);
+  return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
+    const rowKey = getRowKey(row, i);
+    const isExpanded = expanded.has(rowKey);
+    return /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: `border-b border-border hover:bg-surface-raised transition-colors duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
+          children: [
+            hasExpand && /* @__PURE__ */ jsx("td", { className: "p-0 align-middle w-9", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleRow(rowKey),
+                "aria-expanded": isExpanded,
+                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                className: `w-9 h-9 inline-flex items-center justify-center rounded-md hover:bg-surface/80 transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded ? "rotate-180" : ""}`,
+                children: expandRow.expandIcon ?? DefaultExpandIcon
+              }
+            ) }),
+            columns.map((col) => /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: `${cellAlign(col.align)} text-sm text-foreground py-2 px-3 align-middle`,
+                children: col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
+              },
+              col.key
+            ))
+          ]
+        }
+      ),
+      hasExpand && isExpanded && /* @__PURE__ */ jsx("tr", { className: "bg-surface", children: /* @__PURE__ */ jsx("td", { colSpan: expandColCount, className: "p-0 border-b border-border", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: expandRow.expandComponent?.(row) }) }) })
+    ] }, rowKey);
+  }) });
 }
 function Pagination({
   activePage,
@@ -1797,29 +1812,27 @@ function Pagination({
     }
   }, [serverSide, options.perPage, picker]);
   const navBtn = (icon, disabled, onClick) => /* @__PURE__ */ jsx(IconButton, { disabled, onClick, icon });
-  const chevronRight = (color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-  const doubleChevronRight = (color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
-  const disabledColor = "var(--color-foreground-muted)";
-  const enabledColor = "var(--color-foreground)";
+  const chevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
   return /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end pt-2", children: [
     navBtn(
-      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight }),
       activePage === 0,
       () => onPageChange(0)
     ),
     navBtn(
-      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: chevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: chevronRight }),
       activePage === 0,
       () => activePage > 0 && onPageChange(activePage - 1)
     ),
     /* @__PURE__ */ jsx("span", { className: "bg-surface-raised rounded-lg ml-2 mr-2 shadow-sm p-2 w-10 text-center select-none text-foreground", children: activePage + 1 }),
     navBtn(
-      chevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      chevronRight,
       activePage === maxPage,
       () => activePage < maxPage && onPageChange(activePage + 1)
     ),
     navBtn(
-      doubleChevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      doubleChevronRight,
       activePage === maxPage,
       () => onPageChange(maxPage)
     ),
@@ -1844,6 +1857,7 @@ function Pagination({
 function Table({
   columns = [],
   rows = [],
+  getRowKey = defaultGetRowKey,
   pagination = DEFAULT_PAGINATION,
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
@@ -1856,8 +1870,20 @@ function Table({
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
   const [activePage, setActivePage] = useState(0);
-  const [datasets, setDatasets] = useState([]);
   const isServerSide = !!(pagination.enabled && pagination.serverSide);
+  const filteredRows = useMemo(() => {
+    if (isServerSide || !searchTerm) return rows;
+    const term = searchTerm.toLowerCase();
+    return rows.filter(
+      (row) => Object.values(row).some(
+        (v) => v != null && String(v).toLowerCase().includes(term)
+      )
+    );
+  }, [rows, searchTerm, isServerSide]);
+  const datasets = useMemo(() => {
+    if (isServerSide) return [rows];
+    return createDatasets(filteredRows, pagination.enabled ? perPage : null);
+  }, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
   const MAX_PAGE = useMemo(() => {
     if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
     if (isServerSide && typeof pagination.totalCount === "number")
@@ -1866,32 +1892,22 @@ function Table({
   }, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
   const currentPageRows = useMemo(() => {
     if (isServerSide) return rows;
-    return datasets.length ? datasets[activePage] ?? [] : [];
+    return datasets[activePage] ?? [];
   }, [isServerSide, rows, datasets, activePage]);
   useEffect(() => {
-    if (pagination.enabled && !isServerSide) setPerPage(pagination.perPage ?? 15);
-  }, [pagination, isServerSide]);
+    if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
+      setPerPage(pagination.perPage);
+    }
+  }, [pagination.enabled, pagination.perPage, isServerSide]);
   useEffect(() => {
     if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
   }, [isServerSide, pagination.perPage]);
-  useEffect(() => {
-    if (isServerSide) return;
-    setDatasets(createDatasets(rows, pagination.enabled ? perPage : null));
-  }, [rows, perPage, pagination, isServerSide]);
   useEffect(() => {
     if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
       setActivePage(pagination.page - 1);
   }, [isServerSide, pagination.page]);
   const onSearchChange = (e) => {
-    const term = e.target.value;
-    setSearchTerm(term);
-    if (isServerSide) return;
-    const filtered = rows.filter(
-      (row) => Object.values(row).some(
-        (v) => !!v && String(v).toLowerCase().includes(term.toLowerCase())
-      )
-    );
-    setDatasets(createDatasets(filtered, pagination.enabled ? perPage : null));
+    setSearchTerm(e.target.value);
     setActivePage(0);
   };
   const onPaginationChange = (perPageValue) => {
@@ -1930,9 +1946,17 @@ function Table({
       )
     ] }),
     /* @__PURE__ */ jsx("div", { children: header }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsx(TableHeader, { columns }),
-      /* @__PURE__ */ jsx(TableBody, { columns, rows: currentPageRows, expandRow })
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
+      /* @__PURE__ */ jsx(
+        TableBody,
+        {
+          columns,
+          rows: currentPageRows,
+          expandRow,
+          getRowKey
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsx("div", { children: footer })
   ] });