Create Next App

Table

Avatar This is a guideline for you on how to create you first product in your store

Table

This is a guideline for you on how to create you first product in your store

Default

Name	Age	City	Status	Country	Occupation	Email	Phone
John Doe	25	New York	Paid	USA	Engineer	john@example.com	123-456-7890
Jane Doe	30	San Francisco	Paid	USA	Designer	jane@example.com	987-654-3210
Bob Smith	28	Los Angeles	Unpaid	USA	Developer	bob@example.com	555-123-4567
Timothy Okoduwa	22	Lagos	Unpaid	Nigeria	Developer	Timmyleeokoduwa4@gmail.com	23490-4533-98-20

React js


 import React, { useState, useEffect } from 'react';
import Tables from './Tables';


const TableComponent = () => {
  const columns = [
    'Images',
    'Name',
    'Age',
    'City',
    'Status',
    'Country',
    'Occupation',
    'Email',
    'Phone',
    'Action',
  ];

  const data = [
    {
      Images: <Avatar size="size32" presence="online" />,
      Name: 'John Doe',
      Age: 25,
      City: 'New York',
      Country: 'USA',

      Status: <Badges status="success" size="xsmall" label="Paid" />,
      Occupation: 'Engineer',
      Email: 'john@example.com',
      Phone: '123-456-7890',
    },
    {
      Images: <Avatar size="size32" presence="online" />,
      Name: 'Jane Doe',
      Age: 30,
      City: 'San Francisco',
      Country: 'USA',
      Status: <Badges status="success" size="xsmall" label="Paid" />,
      Occupation: 'Designer',
      Email: 'jane@example.com',
      Phone: '987-654-3210',
    },
    {
      Images: <Avatar size="size32" presence="online" />,
      Name: 'Bob Smith',
      Age: 28,
      City: 'Los Angeles',
      Country: 'USA',
      Status: <Badges status="error" size="xsmall" label="Unpaid" />,
      Occupation: 'Developer',
      Email: 'bob@example.com',
      Phone: '555-123-4567',
    },
    {
      Images: <Avatar size="size32" presence="online" />,
      Name: 'Timothy Okoduwa',
      Age: 22,
      City: 'Lagos',
      Country: 'Nigeria',
      Status: <Badges status="error" size="xsmall" label="Unpaid" />,
      Occupation: 'Developer',
      Email: 'Timmyleeokoduwa4@gmail.com',
      Phone: '23490-4533-98-20',
    },
    // Add more rows as needed
  ];
  const handleDeleteClick = (index) => {
    // Implement your delete logic here
    alert('Delete action for row index + 1');
  };
  const EditClick = (index) => {
    // Implement your delete logic here
    alert('Edit action index + 1');
  };

  return (

<div>

 <Tables
 columns={columns}
 data={data}
 onDeleteClick={handleDeleteClick}
 editClick={EditClick}
/>

   
</div>
 

  );
};

export default TableComponent;

HTMLCSSJS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
            rel="stylesheet">
        <style>
           
        </style>
    </head>

    <body>
        <div class="search-holder">
            <div class="diamond_eyes">
                <input type="text" placeholder="Search by invoice number, name, amount..." value="" />
            </div>
            <div>
                <button type="button" onclick="handleFilterClick()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path
                            d="M8.00004 2C9.8365 2 11.6368 2.1547 13.3887 2.45178C13.7439 2.51202 14 2.82237 14 3.18268V3.87868C14 4.2765 13.842 4.65803 13.5607 4.93934L9.93934 8.56066C9.65804 8.84196 9.5 9.2235 9.5 9.62132V11.5729C9.5 12.1411 9.179 12.6605 8.67082 12.9146L6.5 14V9.62132C6.5 9.2235 6.34196 8.84196 6.06066 8.56066L2.43934 4.93934C2.15804 4.65804 2 4.2765 2 3.87868V3.1827C2 2.82238 2.25605 2.51203 2.61129 2.45179C4.3632 2.1547 6.16355 2 8.00004 2Z"
                            stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <span>Filter</span>
                </button>
                <div class="filter-options">
                    <div class="filter-holder">
                        <div class="ffill" onclick="handleFilterClick('A-Z')">A-Z</div>
                        <div class="ffill" onclick="handleFilterClick('Z-A')">Z-A</div>
                        <div class="ffill" onclick="handleFilterClick('Ac Date/Age')">Ac Date/Age</div>
                        <div class="ffill" onclick="handleFilterClick('Dc Date/Age')">Dc Date/Age</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="whewww">
            <table class="table-container">
                <thead class="table-head">
                    <tr class="table-row">
                        <th class="table-header-cell">Images</th>
                        <th class="table-header-cell">Name</th>
                        <th class="table-header-cell">Age</th>
                        <th class="table-header-cell">City</th>
                        <th class="table-header-cell">Status</th>
                        <th class="table-header-cell">Country</th>
                        <th class="table-header-cell">Occupation</th>
                        <th class="table-header-cell">Email</th>
                        <th class="table-header-cell">Phone</th>
                        <th class="table-header-cell">Action</th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    <!-- Data Rows -->
                    <tr class="table-row">
                        <td class="table-cell">
                            <div class="avatar"></div>
                        </td>
                        <td class="table-cell">John Doe</td>
                        <td class="table-cell">25</td>
                        <td class="table-cell">New York</td>
                        <td class="table-cell">
                            <span class="badges success">Paid</span>
                        </td>
                        <td class="table-cell">USA</td>
                        <td class="table-cell">Engineer</td>
                        <td class="table-cell">john@example.com</td>
                        <td class="table-cell">123-456-7890</td>
                        <td class="table-cell">Action Buttons</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-cell">
                            <div class="avatar"></div>
                        </td>
                        <td class="table-cell">John Doe</td>
                        <td class="table-cell">25</td>
                        <td class="table-cell">New York</td>
                        <td class="table-cell">
                            <span class="badges success">Paid</span>
                        </td>
                        <td class="table-cell">USA</td>
                        <td class="table-cell">Engineer</td>
                        <td class="table-cell">john@example.com</td>
                        <td class="table-cell">123-456-7890</td>
                        <td class="table-cell">Action Buttons</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-cell">
                            <div class="avatar"></div>
                        </td>
                        <td class="table-cell">John Doe</td>
                        <td class="table-cell">25</td>
                        <td class="table-cell">New York</td>
                        <td class="table-cell">
                            <span class="badges success">Paid</span>
                        </td>
                        <td class="table-cell">USA</td>
                        <td class="table-cell">Engineer</td>
                        <td class="table-cell">john@example.com</td>
                        <td class="table-cell">123-456-7890</td>
                        <td class="table-cell">Action Buttons</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-cell">
                            <div class="avatar"></div>
                        </td>
                        <td class="table-cell">John Doe</td>
                        <td class="table-cell">25</td>
                        <td class="table-cell">New York</td>
                        <td class="table-cell">
                            <span class="badges success">Paid</span>
                        </td>
                        <td class="table-cell">USA</td>
                        <td class="table-cell">Engineer</td>
                        <td class="table-cell">john@example.com</td>
                        <td class="table-cell">123-456-7890</td>
                        <td class="table-cell">Action Buttons</td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-cell">
                            <div class="avatar"></div>
                        </td>
                        <td class="table-cell">John Doe</td>
                        <td class="table-cell">25</td>
                        <td class="table-cell">New York</td>
                        <td class="table-cell">
                            <span class="badges success">Paid</span>
                        </td>
                        <td class="table-cell">USA</td>
                        <td class="table-cell">Engineer</td>
                        <td class="table-cell">john@example.com</td>
                        <td class="table-cell">123-456-7890</td>
                        <td class="table-cell">Action Buttons</td>
                    </tr>
                    <!-- Repeat the above structure for each data row -->
                </tbody>
            </table>
        </div>

        <script>
       
        </script>
    </body>

</html>