New Changes with table Classes and Modification

src/pages/table.astro

@@ -239,6 +239,18 @@ const data = [
         avatar: "https://i.pravatar.cc/40?img=25",
     },
 ];
+
+const studentData = [
+    { id: 1, name: "Alice", age: 24, role: "Engineer" },
+    { id: 2, name: "Bob", age: 29, role: "Designer" },
+    { id: 3, name: "Carol", age: 35, role: "Manager" },
+];
+
+const studentColumns = [
+    { key: "name", label: "Name", sortable: true },
+    { key: "age", label: "Age", sortable: true, align: "right" },
+    { key: "role", label: "Role" },
+];
 ---
 
 <ComponentLayout>
@@ -256,6 +268,17 @@ const data = [
             fetchData="fetchData"
             columnsRendererKey="columnsRenderer"
         />
+
+        <br />
+
+        <Table
+            data={studentData}
+            columns={studentColumns}
+            search
+            pagignations
+            classInfos="classNames"
+            tableClassNames="wr:rounded-2xl wr:border-2 wr:border-red-500"
+        />
     </div>
 </ComponentLayout>
 
@@ -396,4 +419,20 @@ const data = [
             total,
         };
     };
+
+    window.classNames = {
+        row: (_row: any, idx: number) => ({
+            "wr:!bg-gray-50 wr:text-black": _row.role === "Engineer",
+        }),
+
+        column: (col: any) =>
+            col.key === "age"
+                ? "wr:text-right wr:font-bold wr:bg-yellow-100 wr:text-black"
+                : "",
+
+        cell: ({ value, col }: { value: any; col: any }) =>
+            typeof value === "number" && col.key === "age" && value > 30
+                ? "wr:text-green-600"
+                : "",
+    };
 </script>