Untitled
plain_text
2 months ago
6.7 kB
9
Indexable
Never
"use client" import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table' import { useState } from 'react' const Tables1 = () => { const tableData=[ { "order_id": 121221, "date": "02-03-2023", "customer_name": "Dhanush Saji", "order_price": 500, "payment": "UPI", "status": "Confirmed" }, { "order_id": 121222, "date": "03-03-2023", "customer_name": "John Doe", "order_price": 750, "payment": "Master card", "status": "Processing" }, { "order_id": 121223, "date": "04-03-2023", "customer_name": "Jane Smith", "order_price": 1000, "payment": "Visa card", "status": "Pending" }, { "order_id": 121224, "date": "05-03-2023", "customer_name": "Michael Johnson", "order_price": 200, "payment": "Paypal", "status": "Cancelled" }, { "order_id": 121225, "date": "06-03-2023", "customer_name": "Emily Brown", "order_price": 300, "payment": "UPI", "status": "Confirmed" }, { "order_id": 121226, "date": "07-03-2023", "customer_name": "Robert Lee", "order_price": 800, "payment": "Master card", "status": "Confirmed" }, { "order_id": 121227, "date": "08-03-2023", "customer_name": "Emma Davis", "order_price": 600, "payment": "Visa card", "status": "Processing" }, { "order_id": 121228, "date": "09-03-2023", "customer_name": "James Wilson", "order_price": 450, "payment": "Paypal", "status": "Pending" }, { "order_id": 121229, "date": "10-03-2023", "customer_name": "Sophia Thomas", "order_price": 550, "payment": "UPI", "status": "Cancelled" }, { "order_id": 121230, "date": "11-03-2023", "customer_name": "William Harris", "order_price": 900, "payment": "Master card", "status": "Confirmed" }, { "order_id": 121231, "date": "12-03-2023", "customer_name": "Olivia Martin", "order_price": 250, "payment": "Visa card", "status": "Processing" }, { "order_id": 121232, "date": "13-03-2023", "customer_name": "Liam Anderson", "order_price": 350, "payment": "Paypal", "status": "Pending" }, { "order_id": 121233, "date": "14-03-2023", "customer_name": "Ava Wilson", "order_price": 700, "payment": "UPI", "status": "Confirmed" }, { "order_id": 121234, "date": "15-03-2023", "customer_name": "Noah Thompson", "order_price": 400, "payment": "Master card", "status": "Cancelled" }, { "order_id": 121235, "date": "16-03-2023", "customer_name": "Isabella Walker", "order_price": 300, "payment": "Visa card", "status": "Confirmed" }, { "order_id": 121236, "date": "17-03-2023", "customer_name": "Mason Evans", "order_price": 500, "payment": "Paypal", "status": "Processing" }, { "order_id": 121237, "date": "18-03-2023", "customer_name": "Mia Green", "order_price": 200, "payment": "UPI", "status": "Pending" }, { "order_id": 121238, "date": "19-03-2023", "customer_name": "Ethan Martinez", "order_price": 800, "payment": "Master card", "status": "Cancelled" }, { "order_id": 121239, "date": "20-03-2023", "customer_name": "Scarlett Perez", "order_price": 600, "payment": "Visa card", "status": "Confirmed" }, { "order_id": 121240, "date": "21-03-2023", "customer_name": "Lucas Campbell", "order_price": 700, "payment": "Paypal", "status": "Confirmed" } ] const columns = [ { header:'ID', accessorKey:'order_id' }, { header:'Date', accessorKey:'date' }, { header:'Customer Name', accessorKey:'customer_name' }, { header:'Order Price', accessorKey:'order_price' }, { header:'Payment', accessorKey:'payment' }, { header:'Status', accessorKey:'status' }, ] const table = useReactTable({ tableData, columns,getCoreRowModel:getCoreRowModel() }); return ( <div> <table> { table.getHeaderGroups().map(headerGroup =>( <tr key={headerGroup.id}> { headerGroup.headers.map(header =>( <th key={header.id}> {flexRender(header.column.columnDef.header,header.getContext())} </th> )) } </tr> )) } <tbody> { table.getRowModel().rows.map(row=>( <tr key={row.id}> { row.getVisibleCells().map(cell=>( <td key={cell.id}> {flexRender(cell.column.columnDef.cell,cell.getContext())} </td> )) } </tr> )) } </tbody> </table> </div> ) } export default Tables1