UI.js

import React, { useState } from "react";
import { data } from "./Data";
export const App = () => {
  return (
    <>
      <div className="container-fluid">
        <div className="row pt-5">
          <form>
            <table className="table table-striped table-primary table-hover text-center fs-5 table-bordered border-dark">
              <thead>
                <tr>
                  <th id="tr" onClick={() => Sort("fullName")}>
                    Name
                  </th>
                  <th id="tr" onClick={() => Sort("userName")}>
                    User Name
                  </th>
                  <th id="tr" onClick={() => Sort("phoneNumber")}>
                    Phone Number
                  </th>
                  <th id="tr" onClick={() => Sort("website")}>
                    Website
                  </th>
                  <th id="tr" onClick={() => Sort("companyName")}>
                    Company Name
                  </th>
                  <th id="tr" onClick={() => Sort("email")}>
                    Email
                  </th>
                  <th id="tr">Action</th>
                </tr>
              </thead>
              <tbody>
                {data.map((data) => {
                  return (
                    <>
                      <tr>
                        <td>{data.fullName}</td>
                        <td>{data.userName}</td>
                        <td>{data.phoneNumber}</td>
                        <td>{data.website}</td>
                        <td>{data.companyName}</td>
                        <td>{data.email}</td>
                        <td className="d-flex p-4">
                          <button className="btn btn-dark me-3">
                            <i class="fa-solid fa-pen-to-square"></i>
                          </button>
                          <button className="btn btn-danger">
                            <i class="fa-solid fa-trash"></i>
                          </button>
                        </td>
                      </tr>
                    </>
                  );
                })}
              </tbody>
            </table>
          </form>
        </div>
      </div>
    </>
  );
};