Data Table Created

package.json

@@ -13,7 +13,10 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.6",
+    "@mui/material": "^5.16.6",
     "@mui/material-nextjs": "^5.16.6",
+    "@tanstack/react-table": "^8.20.1",
+    "axios": "^1.7.3",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",

src/app/(dashboard)/home/page.tsx

@@ -1,7 +1,12 @@
+import TanStackTable from "@/components/table/TanStackTable";
 import React from "react";
 
 const HomePage = () => {
-  return <div>Home page 1</div>;
+  return (
+    <div>
+      <TanStackTable />
+    </div>
+  );
 };
 
 export default HomePage;

src/components/table/TanStackTable.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+} from "@tanstack/react-table";
+import styles from "./TanStackTable.module.scss";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+const TanStackTable = () => {
+  const [tableData, setTableData] = useState([]);
+  const columns: any = [
+    {
+      header: "ID",
+      accessorKey: "id",
+    },
+    {
+      header: "Title",
+      accessorKey: "title",
+    },
+    {
+      header: "Description",
+      accessorKey: "description",
+    },
+    {
+      header: "Category",
+      accessorKey: "category",
+    },
+    {
+      header: "Price",
+      accessorKey: "price",
+    },
+    {
+      header: "Discount Percentage",
+      accessorKey: "discountPercentage",
+    },
+    {
+      header: "Rating",
+      accessorKey: "rating",
+    },
+    {
+      header: "Stock",
+      accessorKey: "stock",
+    },
+    {
+      header: "Tags",
+      accessorKey: "tags",
+    },
+    {
+      header: "Brand",
+      accessorKey: "brand",
+    },
+    {
+      header: "Reviews",
+      accessorKey: "reviews",
+      cell: ({ row }: any) => (
+        <>
+          {/* {row.original.reviews.length} Reviews */}
+          <button onClick={() => handleButtonClick(row.original)}>
+            View Reviews ({row.original.reviews.length})
+          </button>
+        </>
+      ),
+    },
+  ];
+
+  const handleButtonClick = (rowData: any) => {
+    console.log("Button clicked for row:", rowData?.reviews);
+  };
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  useEffect(() => {
+    (async () => {
+      const tableData = await axios.get("https://dummyjson.com/products");
+      console.log("tableData", tableData);
+      setTableData(tableData?.data?.products);
+    })();
+  }, []);
+
+  return (
+    <div className="w3-container">
+      <table className="w3-table-all">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup: any) => (
+            <tr key={headerGroup?.id}>
+              {headerGroup.headers.map((header: any) => (
+                <th key={header?.id}>
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row: any) => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell: any) => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default TanStackTable;