Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
8.0 kB
3
Indexable
Never
import React from "react";

export default function Table() {
  return (
    <div className="relative overflow-x-auto shadow-md sm:rounded-lg m-20">
      <table className="w-full text-sm text-left text-gray-500">
        <thead className="text-xs text-gray-700 uppercase bg-gray-300">
          <tr>
            <th scope="col" className="px-6 py-3">
              Id.
            </th>
            <th scope="col" className="px-6 py-3">
              AC Number
            </th>
            <th scope="col" className="px-6 py-3">
              Part Number
            </th>
            <th scope="col" className="px-6 py-3">
              Alternative Part Number
            </th>
            <th scope="col" className="px-6 py-3">
              Description
            </th>
            <th scope="col" className="px-6 py-3">
              UOM
            </th>
            <th scope="col" className="px-6 py-3">
              Add to Chart
            </th>
          </tr>
        </thead>
        <tbody>
          <tr className="bg-white border-b hover:bg-gray-100">
            <th
              scope="row"
              className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              1
            </th>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">INCONEL625-AMS5666-HEX19X2400MM</td>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">INCONEL HEX</td>
            <td className="px-6 py-4">MM</td>
            <td className="px-6 py-4 flex justify-center items-center">
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                ></path>
              </svg>
            </td>
          </tr>
          <tr className="bg-gray-100 border-b hover:bg-gray-200">
            <th
              scope="row"
              className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              2
            </th>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">C64200-ASTM-B150HR50-DIA32X2400MM</td>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">COPPER ROD</td>
            <td className="px-6 py-4">MM</td>
            <td className="px-6 py-4 flex justify-center items-center">
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                ></path>
              </svg>
            </td>
          </tr>
          <tr className="bg-white border-b hover:bg-gray-100">
            <th
              scope="row"
              className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              3
            </th>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">PURE-COPPER-WW-T-775-0.188X0.035X144IN</td>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">COPPER TUBE</td>
            <td className="px-6 py-4">MM</td>
            <td className="px-6 py-4 flex justify-center items-center">
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                ></path>
              </svg>
            </td>
          </tr>
          <tr className="bg-gray-100 border-b hover:bg-gray-200">
            <th
              scope="row"
              className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              4
            </th>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">M27500A16TA1N06</td>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">CABLE</td>
            <td className="px-6 py-4">MM</td>
            <td className="px-6 py-4 flex justify-center items-center">
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                ></path>
              </svg>
            </td>
          </tr>
          <tr className="bg-white border-b hover:bg-gray-100">
            <th
              scope="row"
              className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              5
            </th>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">M22759/8-12-9</td>
            <td className="px-6 py-4 text-center">-</td>
            <td className="px-6 py-4">CABLE</td>
            <td className="px-6 py-4">MM</td>
            <td className="px-6 py-4 flex justify-center items-center">
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                ></path>
              </svg>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}