Make a Reusable Table Component

[pruthvi2103]

As Discussed on Discord

• Make a HTML Table
• Add CSS to make it look better
• Make It Dynamic by making use of These Vars (shown Below)

Example variables for table

const columns=[
    {
        name:"Name",
        acessor:"name"
    },
    {
        name:"email",
        acessor:"email"
    },
    {
        name:"Ticket ID",
        acessor:"ticketId"
    }
]
const data=[
    {
       name:"Pruthvi Shetty" ,
       email:"email@email.com",
       ticketId:"1234"
    },

    {
        name:"Pruthvi Shetty" ,
        email:"email@email.com",
        ticketId:"1234"
     },    {
        name:"Pruthvi Shetty" ,
        email:"email@email.com",
        ticketId:"1234"
     },    {
        name:"Pruthvi Shetty" ,
        email:"email@email.com",
        ticketId:"1234"
     },
]

• Create a map function that renders Columns (TH) and then Data (TD)

Example of map fn

renderheading= ()=>{
    return columns.map((column)=>{
        return<th>{column.name}</th>
    })
}

How it should look in html part

.
.
<thead>
    {renderheading()}

</thead>>
.
.
.