New Changes with table Classes and Modification

src/components/Table.astro

@@ -15,6 +15,7 @@ const {
     classInfos = "",
     tableClassNames = "",
     hideHeader = false,
+    rowClick = "",
 } = Astro.props as TableProps<any>;
 
 const id = `table-${Math.random().toString(36).slice(2, 9)}`;
@@ -140,6 +141,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
         data,
         columnsRendererKey,
         classInfos,
+        rowClick,
     }}
 >
     const start = () => {
@@ -173,6 +175,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
 </svg>`;
 
         const fetchDataFn = fetchData ? window[fetchData] : null;
+        const rowClickFn = rowClick ? window[rowClick] : null;
         const classNames = classInfos ? window[classInfos] : {};
 
         const resolveClasses = (input, ...ctx) => {
@@ -197,7 +200,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                 const rowCls = resolveClasses(classNames?.row, row, i);
 
                 // 🖥️ Desktop
-                let tr = `<tr class="${[
+                let tr = `<tr data-row-idx="${i}" class="${[
                     "wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700",
                     dataset.length - 1 != i ? "wr:border-b" : "",
                     "wr:border-gray-300 wr:dark:border-neutral-800",
@@ -238,8 +241,17 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                 tr += `</tr>`;
                 tbody.insertAdjacentHTML("beforeend", tr);
 
+                tbody.onclick = (e) => {
+                    if (!rowClickFn) return;
+                    const tr = e.target.closest("tr[data-row-idx]");
+                    if (!tr) return;
+                    const idx = Number(tr.dataset.rowIdx);
+                    const row = dataset[idx];
+                    rowClickFn(row);
+                };
+
                 // 📱 Mobile
-                let card = `<div class="wr:rounded-lg wr:border wr:border-gray-300 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">`;
+                let card = `<div data-row-idx="${i}" class="wr:rounded-lg wr:border wr:border-gray-300 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">`;
                 columns.forEach((col, colIndex) => {
                     let value = row[col.key] ?? "";
 
@@ -266,13 +278,22 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                     });
 
                     card += `
-                        <div class="wr:flex wr:justify-between wr:items-start wr:gap-4 ${columnCls} ${cellCls}">
+                        <div class="wr:flex wr:justify-between wr:items-start wr:gap-4">
                         <div class="wr:text-sm wr:font-medium wr:text-gray-600 wr:dark:text-gray-300">${col.label}</div>
-                        <div class="wr:text-sm wr:text-gray-800 wr:dark:text-gray-100 wr:text-right wr:max-w-[60%] wr:break-words">${value}</div>
+                        <div class="wr:text-sm wr:text-gray-800 wr:dark:text-gray-100 wr:text-right wr:max-w-[60%] wr:break-words ${cellCls}">${value}</div>
                         </div>`;
                 });
                 card += `</div>`;
                 mobileBody.insertAdjacentHTML("beforeend", card);
+
+                mobileBody.onclick = (e) => {
+                    if (!rowClickFn) return;
+                    const tr = e.target.closest("div[data-row-idx]");
+                    if (!tr) return;
+                    const idx = Number(tr.dataset.rowIdx);
+                    const row = dataset[idx];
+                    rowClickFn(row);
+                };
             });
         }