@deepnoid/ui 0.1.91 → 0.1.93

package/dist/components/table/table.js

@@ -695,15 +695,11 @@ var TableHead = ({
   color,
   size,
   rowCheckbox = false,
-  isCheckedAll,
+  hasCheckedRows,
   isLoading = false,
   classNames,
   onCheckAll
 }) => {
-  const handleClickCheckAll = (e) => {
-    e.preventDefault();
-    onCheckAll(!isCheckedAll);
-  };
   const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "th",
     {
@@ -729,11 +725,11 @@ var TableHead = ({
   const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
     rowCheckbox && renderTh(
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         checkbox_default,
         {
           size,
-          checked: isCheckedAll,
+          checked: hasCheckedRows,
           onChange: (e) => onCheckAll(e.target.checked)
         }
       ) }),
@@ -757,6 +753,7 @@ var TableBody = ({
   rowCheckbox = false,
   checkedRows,
   onCheckRow,
+  onRowClick,
   isLoading = false,
   emptyContent,
   skeletonRow,
@@ -765,67 +762,54 @@ var TableBody = ({
 }) => {
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "td",
-      {
-        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
-        style: isCheckbox ? {
-          width: "40px",
-          minWidth: "40px",
-          maxWidth: "40px",
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : column ? getCellStyle(column) : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
-      },
-      key
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   };
   const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "td",
     {
       className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
-      style: {
-        width: "40px",
-        minWidth: "40px",
-        maxWidth: "40px",
-        flexShrink: 0,
-        flexGrow: 0,
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
-    }
+      style: { width: "40px", minWidth: "40px", textAlign: "center" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+    },
+    `checkbox-${rowId}`
   );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
     rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
-  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => {
-      var _a;
-      const value = row[column.field];
-      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
-      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "td",
-        {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
-          style: getCellStyle(column),
-          children: content
-        },
-        `${rowIndex}-${colIdx}`
-      );
-    }),
-    rowCheckbox && renderCheckboxCell(row.id)
-  ] }, rowIndex);
+  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "tr",
+    {
+      className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
+      onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
+      children: [
+        columns.map((column, colIdx) => {
+          var _a;
+          const value = row[column.field];
+          const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+          const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "td",
+            {
+              className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
+              style: getCellStyle(column),
+              children: content
+            },
+            `${row.id}-${column.field}-${colIdx}`
+          );
+        }),
+        rowCheckbox && renderCheckboxCell(row.id)
+      ]
+    },
+    row.id
+  );
   const renderRows = () => {
     if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
     if (!rows.length && emptyContent) return renderEmptyRow();
     return rows.map((row, index) => renderDataRow(row, index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
 };
 var table_body_default = TableBody;
 
@@ -6168,10 +6152,12 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
     emptyContent,
     isLoading = false,
     classNames,
+    variant,
     color,
     size,
     skeletonRow,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    onRowClick
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0 && !isLoading;
@@ -6215,8 +6201,18 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
       return updated;
     });
   };
+  const handleRowClick = (row, index, event) => {
+    const target = event.target;
+    if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
+      return;
+    }
+    onRowClick == null ? void 0 : onRowClick(row, index, event);
+  };
   const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
-  const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
+  const slots = (0, import_react5.useMemo)(
+    () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
+    [variantProps, onRowClick]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "table",
@@ -6235,7 +6231,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
               size,
               color,
               rowCheckbox,
-              isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
+              hasCheckedRows: checkedRows.size > 0,
               onCheckAll: handleAllRowCheck,
               isLoading,
               classNames,
@@ -6253,8 +6249,9 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
               rowCheckbox,
               checkedRows,
               onCheckRow: handleRowCheck,
-              emptyContent,
+              onRowClick: handleRowClick,
               isLoading,
+              emptyContent,
               skeletonRow,
               className: clsx(
                 "transition-all duration-150 ease-out",
@@ -6269,6 +6266,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
     showPagination && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       pagination_default,
       {
+        variant: variant === "outline" ? "solid" : variant,
         color,
         currentPage: page,
         totalPage: Math.ceil(totalData / perPage),
@@ -6363,6 +6361,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
     height: {
       narrow: {},
       wide: {}
+    },
+    rowClickable: {
+      true: {
+        tr: ["cursor-pointer"]
+      }
     }
   },
   compoundVariants: [

package/dist/components/table/table.mjs

@@ -2,24 +2,24 @@
 import {
   getCellStyle,
   table_default
-} from "../../chunk-XVV6JM5I.mjs";
+} from "../../chunk-LYAPVC26.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-DQRAFUDA.mjs";
 import "../../chunk-M37VBNB3.mjs";
 import "../../chunk-7B7LRG5J.mjs";
-import "../../chunk-LMHSWLH2.mjs";
+import "../../chunk-CTEQVIV4.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-MVL7HJSH.mjs";
+import "../../chunk-I4NXNQWS.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
-import "../../chunk-XZ5DXOJQ.mjs";
+import "../../chunk-36SVU53P.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-RRONV7YA.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   table_default as default,

package/dist/components/textarea/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-RRAZM5D3.mjs";
 import {
   textarea_default
-} from "../../chunk-6Q2BXHJL.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+} from "../../chunk-4EIGHKUO.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   textarea_default as Textarea

package/dist/components/textarea/textarea.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   textarea_default
-} from "../../chunk-6Q2BXHJL.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+} from "../../chunk-4EIGHKUO.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   textarea_default as default

package/dist/components/toast/index.mjs

@@ -3,17 +3,17 @@ import "../../chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
   useToast
-} from "../../chunk-D3HZG3CH.mjs";
+} from "../../chunk-XK4JSX7G.mjs";
 import "../../chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "../../chunk-4BJPJ54Q.mjs";
+} from "../../chunk-JI3IYCXH.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-RRONV7YA.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   toast_default as Toast,

package/dist/components/toast/toast.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   toast_default
-} from "../../chunk-4BJPJ54Q.mjs";
+} from "../../chunk-JI3IYCXH.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-RRONV7YA.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   toast_default as default

package/dist/components/toast/use-toast.mjs

@@ -2,15 +2,15 @@
 import {
   ToastProvider,
   useToast
-} from "../../chunk-D3HZG3CH.mjs";
+} from "../../chunk-XK4JSX7G.mjs";
 import "../../chunk-ZOTHPHXA.mjs";
-import "../../chunk-4BJPJ54Q.mjs";
+import "../../chunk-JI3IYCXH.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-RRONV7YA.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   ToastProvider,

package/dist/components/tree/index.mjs

@@ -2,12 +2,12 @@
 import "../../chunk-MBLZYQCN.mjs";
 import {
   tree_default
-} from "../../chunk-Y5QV7T6D.mjs";
+} from "../../chunk-MUNZ6PTR.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-RRONV7YA.mjs";
 import "../../chunk-CDXBML6O.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   tree_default as Tree

package/dist/components/tree/tree.mjs

@@ -2,12 +2,12 @@
 import {
   Tree,
   tree_default
-} from "../../chunk-Y5QV7T6D.mjs";
+} from "../../chunk-MUNZ6PTR.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-RRONV7YA.mjs";
 import "../../chunk-CDXBML6O.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   Tree,

package/dist/index.js

@@ -8034,15 +8034,11 @@ var TableHead = ({
   color,
   size,
   rowCheckbox = false,
-  isCheckedAll,
+  hasCheckedRows,
   isLoading = false,
   classNames,
   onCheckAll
 }) => {
-  const handleClickCheckAll = (e) => {
-    e.preventDefault();
-    onCheckAll(!isCheckedAll);
-  };
   const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "th",
     {
@@ -8068,11 +8064,11 @@ var TableHead = ({
   const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
     rowCheckbox && renderTh(
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         checkbox_default,
         {
           size,
-          checked: isCheckedAll,
+          checked: hasCheckedRows,
           onChange: (e) => onCheckAll(e.target.checked)
         }
       ) }),
@@ -8096,6 +8092,7 @@ var TableBody = ({
   rowCheckbox = false,
   checkedRows,
   onCheckRow,
+  onRowClick,
   isLoading = false,
   emptyContent,
   skeletonRow,
@@ -8104,67 +8101,54 @@ var TableBody = ({
 }) => {
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "td",
-      {
-        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
-        style: isCheckbox ? {
-          width: "40px",
-          minWidth: "40px",
-          maxWidth: "40px",
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : column ? getCellStyle(column) : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
-      },
-      key
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   };
   const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "td",
     {
       className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
-      style: {
-        width: "40px",
-        minWidth: "40px",
-        maxWidth: "40px",
-        flexShrink: 0,
-        flexGrow: 0,
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
-    }
+      style: { width: "40px", minWidth: "40px", textAlign: "center" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+    },
+    `checkbox-${rowId}`
   );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
     rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
-  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => {
-      var _a;
-      const value = row[column.field];
-      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
-      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "td",
-        {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
-          style: getCellStyle(column),
-          children: content
-        },
-        `${rowIndex}-${colIdx}`
-      );
-    }),
-    rowCheckbox && renderCheckboxCell(row.id)
-  ] }, rowIndex);
+  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "tr",
+    {
+      className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
+      onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
+      children: [
+        columns.map((column, colIdx) => {
+          var _a;
+          const value = row[column.field];
+          const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+          const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "td",
+            {
+              className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
+              style: getCellStyle(column),
+              children: content
+            },
+            `${row.id}-${column.field}-${colIdx}`
+          );
+        }),
+        rowCheckbox && renderCheckboxCell(row.id)
+      ]
+    },
+    row.id
+  );
   const renderRows = () => {
     if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
     if (!rows.length && emptyContent) return renderEmptyRow();
     return rows.map((row, index) => renderDataRow(row, index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
 };
 var table_body_default = TableBody;
 
@@ -8504,10 +8488,12 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     emptyContent,
     isLoading = false,
     classNames,
+    variant,
     color,
     size,
     skeletonRow,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    onRowClick
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0 && !isLoading;
@@ -8551,8 +8537,18 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
       return updated;
     });
   };
+  const handleRowClick = (row, index, event) => {
+    const target = event.target;
+    if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
+      return;
+    }
+    onRowClick == null ? void 0 : onRowClick(row, index, event);
+  };
   const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
-  const slots = (0, import_react17.useMemo)(() => tableStyle(variantProps), [variantProps]);
+  const slots = (0, import_react17.useMemo)(
+    () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
+    [variantProps, onRowClick]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "table",
@@ -8571,7 +8567,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
               size,
               color,
               rowCheckbox,
-              isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
+              hasCheckedRows: checkedRows.size > 0,
               onCheckAll: handleAllRowCheck,
               isLoading,
               classNames,
@@ -8589,8 +8585,9 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
               rowCheckbox,
               checkedRows,
               onCheckRow: handleRowCheck,
-              emptyContent,
+              onRowClick: handleRowClick,
               isLoading,
+              emptyContent,
               skeletonRow,
               className: clsx(
                 "transition-all duration-150 ease-out",
@@ -8605,6 +8602,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     showPagination && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       pagination_default,
       {
+        variant: variant === "outline" ? "solid" : variant,
         color,
         currentPage: page,
         totalPage: Math.ceil(totalData / perPage),
@@ -8699,6 +8697,11 @@ var tableStyle = (0, import_tailwind_variants18.tv)({
     height: {
       narrow: {},
       wide: {}
+    },
+    rowClickable: {
+      true: {
+        tr: ["cursor-pointer"]
+      }
     }
   },
   compoundVariants: [