From 1b4f928bcd009e51481f543bd8a24d9959df4e08 Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Sat, 8 Nov 2025 19:45:00 +0530
Subject: [PATCH] New Changes with Table

---
 src/components/Table.astro | 186 ++++++++++++++++++++-----------------
 src/pages/table.astro      |   8 ++
 2 files changed, 109 insertions(+), 85 deletions(-)

diff --git a/src/components/Table.astro b/src/components/Table.astro
index 7f4ba71..2c0ed34 100644
--- a/src/components/Table.astro
+++ b/src/components/Table.astro
@@ -200,106 +200,122 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
             tbody.innerHTML = "";
             mobileBody.innerHTML = "";
 
-            dataset.forEach((row, i) => {
-                const rowCls = resolveClasses(classNames?.row, row, i);
+            if (dataset.length > 0) {
+                dataset.forEach((row, i) => {
+                    const rowCls = resolveClasses(classNames?.row, row, i);
 
-                // 🖥️ Desktop
-                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",
-                    rowCls,
-                    rowClickFn ? "wr:cursor-pointer" : "",
-                ]
-                    .filter(Boolean)
-                    .join(" ")}">`;
+                    // 🖥️ Desktop
+                    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",
+                        rowCls,
+                        rowClickFn ? "wr:cursor-pointer" : "",
+                    ]
+                        .filter(Boolean)
+                        .join(" ")}">`;
 
-                columns.forEach((col, colIndex) => {
-                    let value = row[col.key] ?? "";
+                    columns.forEach((col, colIndex) => {
+                        let value = row[col.key] ?? "";
 
-                    const renderers = columnsRendererKey
-                        ? window[columnsRendererKey]
-                        : {};
-                    columns.forEach((col) => {
-                        if (renderers[col.key]) col.render = renderers[col.key];
+                        const renderers = columnsRendererKey
+                            ? window[columnsRendererKey]
+                            : {};
+                        columns.forEach((col) => {
+                            if (renderers[col.key])
+                                col.render = renderers[col.key];
+                        });
+
+                        if (col.render) {
+                            value = col.render(value, row);
+                        }
+
+                        const columnCls = resolveClasses(
+                            classNames?.column,
+                            col,
+                            colIndex,
+                        );
+                        const cellCls = resolveClasses(classNames?.cell, {
+                            row,
+                            value,
+                            col,
+                            i,
+                            colIndex,
+                        });
+
+                        tr += `<td class="wr:px-4 wr:py-3 ${columnCls} ${cellCls}">${value}</td>`;
                     });
+                    tr += `</tr>`;
+                    tbody.insertAdjacentHTML("beforeend", tr);
 
-                    if (col.render) {
-                        value = col.render(value, row);
-                    }
+                    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);
+                    };
 
-                    const columnCls = resolveClasses(
-                        classNames?.column,
-                        col,
-                        colIndex,
-                    );
-                    const cellCls = resolveClasses(classNames?.cell, {
-                        row,
-                        value,
-                        col,
-                        i,
-                        colIndex,
-                    });
+                    // 📱 Mobile
+                    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 ${rowClickFn ? "wr:cursor-pointer" : ""}">`;
+                    columns.forEach((col, colIndex) => {
+                        let value = row[col.key] ?? "";
 
-                    tr += `<td class="wr:px-4 wr:py-3 ${columnCls} ${cellCls}">${value}</td>`;
-                });
-                tr += `</tr>`;
-                tbody.insertAdjacentHTML("beforeend", tr);
+                        const renderers = columnsRendererKey
+                            ? window[columnsRendererKey]
+                            : {};
+                        columns.forEach((c) => {
+                            if (renderers[c.key]) c.render = renderers[c.key];
+                        });
 
-                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);
-                };
+                        if (col.render) value = col.render(value, row);
 
-                // 📱 Mobile
-                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 ${rowClickFn ? "wr:cursor-pointer" : ""}">`;
-                columns.forEach((col, colIndex) => {
-                    let value = row[col.key] ?? "";
+                        const columnCls = resolveClasses(
+                            classNames?.column,
+                            col,
+                            colIndex,
+                        );
+                        const cellCls = resolveClasses(classNames?.cell, {
+                            row,
+                            value,
+                            col,
+                            i,
+                            colIndex,
+                        });
 
-                    const renderers = columnsRendererKey
-                        ? window[columnsRendererKey]
-                        : {};
-                    columns.forEach((c) => {
-                        if (renderers[c.key]) c.render = renderers[c.key];
-                    });
-
-                    if (col.render) value = col.render(value, row);
-
-                    const columnCls = resolveClasses(
-                        classNames?.column,
-                        col,
-                        colIndex,
-                    );
-                    const cellCls = resolveClasses(classNames?.cell, {
-                        row,
-                        value,
-                        col,
-                        i,
-                        colIndex,
-                    });
-
-                    card += `
+                        card += `
                         <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 ${cellCls}">${value}</div>
                         </div>`;
-                });
-                card += `</div>`;
-                mobileBody.insertAdjacentHTML("beforeend", card);
+                    });
+                    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);
-                };
-            });
+                    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);
+                    };
+                });
+            } else {
+                const noDataRow = `<tr><td class="${[
+                    "wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:p-4",
+                    "wr:border-gray-300 wr:dark:border-neutral-800 wr:text-center",
+                ]
+                    .filter(Boolean)
+                    .join(
+                        " ",
+                    )}" colspan="${columns.length}">No data available</td></tr>`;
+                tbody.insertAdjacentHTML("beforeend", noDataRow);
+
+                const noDataCard = `<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">No data available</div>`;
+                mobileBody.insertAdjacentHTML("beforeend", noDataCard);
+            }
         }
 
         async function loadData() {
diff --git a/src/pages/table.astro b/src/pages/table.astro
index 923c23b..fdedf8c 100644
--- a/src/pages/table.astro
+++ b/src/pages/table.astro
@@ -255,6 +255,14 @@ const studentColumns = [
 
 <ComponentLayout>
     <div class="wr:p-4">
+        <Table
+            columns={columns}
+            data={[]}
+            columnsRendererKey="columnsRenderer"
+        />
+
+        <br />
+
         <Table
             columns={columns}
             data={data}