Untitled

"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