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);
+                };
             });
         }
 

src/global.d.ts

@@ -13,6 +13,7 @@ declare global {
         hls: typeof Hls,
         flvjs: typeof FlvJs
         classNames: any;
+        checkDetails: any;
     }
 }
 

src/pages/table.astro

@@ -279,6 +279,7 @@ const studentColumns = [
             pagignations
             classInfos="classNames"
             tableClassNames="wr:rounded-2xl wr:border-2 wr:border-red-500"
+            rowClick="checkDetails"
         />
     </div>
 </ComponentLayout>
@@ -423,7 +424,7 @@ const studentColumns = [
 
     window.classNames = {
         row: (_row: any, idx: number) => ({
-            "wr:!bg-gray-50 wr:text-black": _row.role === "Engineer",
+            "wr:!bg-gray-50 wr:!text-black": _row.role === "Engineer",
         }),
 
         column: (col: any) =>
@@ -436,4 +437,10 @@ const studentColumns = [
                 ? "wr:text-green-600"
                 : "",
     };
+
+    window.checkDetails = (row: any) => {
+        alert(
+            `Student Details:\n\nName: ${row.name}\nAge: ${row.age}\nRole: ${row.role}`,
+        );
+    };
 </script>

src/types/table/types.ts

@@ -34,4 +34,5 @@ export interface TableProps<T> {
     classInfos?: string;
     tableClassNames?: string;
     hideHeader?: boolean;
+    rowClick?: string;
 }