135 lines
3.2 KiB
TypeScript
135 lines
3.2 KiB
TypeScript
"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";
|
|
import ReviewModal from "../reviewModal/ReviewModal";
|
|
|
|
const TanStackTable = () => {
|
|
const [tableData, setTableData] = useState([]);
|
|
const [open, setOpen] = useState(false);
|
|
const [reviewModalData, setReviewModalData] = useState([]);
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
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) => {
|
|
setReviewModalData(rowData?.reviews);
|
|
handleOpen();
|
|
// 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>
|
|
<ReviewModal
|
|
open={open}
|
|
handleClose={handleClose}
|
|
reviewModalData={reviewModalData}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TanStackTable;
|