New Changes with Column Type

src/components/Table.astro

@@ -302,7 +302,8 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                         .join(" ")}">`;
 
                     columns.forEach((col, colIndex) => {
-                        let value = row[col.key] ?? "";
+                        let data = col.path ? row[col.path] : row;
+                        let value = data[col.key] ?? "";
 
                         const renderers = columnsRendererKey
                             ? window[columnsRendererKey]
@@ -346,7 +347,8 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                     // 📱 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] ?? "";
+                        let data = col.path ? row[col.path] : row;
+                        let value = data[col.key] ?? "";
 
                         const renderers = columnsRendererKey
                             ? window[columnsRendererKey]

src/pages/table.astro

@@ -298,6 +298,8 @@ const studentColumns = [
             "button[id^='view-'], button[id^='edit-'], button[id^='delete-']",
         );
 
+        console.log(buttons);
+
         buttons.forEach((button) => {
             const id = button.getAttribute("data-id");
 

src/types/table/types.ts

@@ -14,6 +14,7 @@ export type ClassNames = {
 export interface Column<T> {
     key: keyof T | string;
     label: string;
+    path?: string;
     sortable?: boolean;
     searchable?: boolean;
     render?: (value: any, row: T) => string;