New Changes with Table

src/components/Table.astro

@@ -200,6 +200,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
             tbody.innerHTML = "";
             mobileBody.innerHTML = "";
 
+            if (dataset.length > 0) {
                 dataset.forEach((row, i) => {
                     const rowCls = resolveClasses(classNames?.row, row, i);
 
@@ -221,7 +222,8 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                             ? window[columnsRendererKey]
                             : {};
                         columns.forEach((col) => {
-                        if (renderers[col.key]) col.render = renderers[col.key];
+                            if (renderers[col.key])
+                                col.render = renderers[col.key];
                         });
 
                         if (col.render) {
@@ -300,6 +302,20 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                         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() {

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}