Untitled

import React, { useState } from "react";
import { Pagination } from "antd";


const OrganizationTable = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  // Mock data
  const organizations = Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    name: `Organization ${i + 1}`,
    email: `organization${i + 1}@example.com`,
  }));

  // Paginated data
  const indexOfLastItem = currentPage * pageSize;
  const indexOfFirstItem = indexOfLastItem - pageSize;
  const currentItems = organizations.slice(indexOfFirstItem, indexOfLastItem);

  // Handle page change
  const onChange = (page, size) => {
    setCurrentPage(page);
    setPageSize(size);
  };



  return (
    <div className=" bg-white  border border-[#D9DFE2] rounded-lg p-3">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold text-[#1E2227]">Organisations Account</h2>
        <div className="flex items-center border border-[#D9DFE2] justify-end relative rounded-[4px] w-[244px] h-9 shadow-sm">
          <input
            type="text"
            placeholder="Search"
            className="px-4 h-full w-full rounded texy-sm placeholder:text-sm overflow-hidden text-[#6D7886] border-none shadow-none focus:outline-none"
          />
          <button
            className="px-4 py-2.5 absolute right-0 bg-transparent bordetr-0  text-white focus:outline-none"
          >
            <img src="/images/search.png" className="w-4 h-4 " />
          </button>
        </div>
      </div>


      <div className="flex justify-start gap-4 mb-2">
        <span className="text-sm text-[#6D7886] font-normal">
          Approved Organizations: <b>0</b>
        </span>
        <span className="text-sm border-l-2 border-[#D9D9D9] pl-4 text-[#6D7886] font-normal">
          Pending Organizations: <b>0</b>
        </span>
      </div>

      <table className="w-full rounded-lg overflow-hidden border-0">
        <thead className="bg-[#F5F7F8] border-b border-[#A1AEB5]">
          <tr>
            <th className="pl-4 py-2 !w-4 text-left">
              <input type="checkbox" className="w-4 h-4" />
            </th>
            <th className="pr-4 pl-2 py-2 text-left text-xs font-medium text-[#6D7886]">Organization Name</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-[#6D7886]">Organization Email</th>
            <th className="px-4 py-2 text-xs text-end font-medium text-[#6D7886]">Action</th>
          </tr>
        </thead>
        <tbody>
          {currentItems.map((organization) => (
            <tr key={organization.id} className="hover:bg-gray-50 border-b ">
              <td className="py-2.5 pl-4 !w-4">
                <input type="checkbox" className="w-4 h-4" />
              </td>
              <td className="pr-4 pl-2 py-2.5 text-[#1E2227] text-sm font-normal">{organization.name}</td>
              <td className="px-4 py-2.5 text-[#1E2227] text-sm font-normal">{organization.email}</td>
              <td className="px-4 py-2.5 text-[#1E2227] flex justify-end items-center text-sm font-normal">
                <button className="text-blue-500 hover:underline mr-2">
                  <img src="/images/edit.svg" />
                </button>
                <button className="text-red-500 hover:underline">
                  <img src="/images/delete.svg" />
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Pagination */}
      <div className="flex items-center pagination-div justify-between mt-4">
        <span className="text-xs font-medium text-[#6D7886]">
          {organizations.length} records
        </span>
        <Pagination
          className="custom-pagination"
          current={currentPage}
          total={organizations.length}
          pageSize={pageSize}
          showSizeChanger
          onChange={onChange}
          showQuickJumper
          hideOnSinglePage={false} // Ensure pagination is always visible
          pageSizeOptions={["5", "10", "20", "50"]}
          showLessItems={false} // Ensures all pages are shown
        />

      </div>
    </div>
  );
};

export default OrganizationTable;




style css

.pagination-div .ant-select-selector {
  border: none !important;
  outline: none !important;
}

.custom-pagination .anticon svg {
  color: #1C7DFF !important;

}

.custom-pagination {
  align-items: center !important;
}

.custom-pagination .ant-pagination-item-active {
  border-radius: 2px !important;
  width: 32px;
  height: 32px;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.custom-pagination .ant-pagination-item {
  font-size: 12px !important;
  color: #6D7886 !important;
  font-weight: 400 !important;
  width: 32px;
  height: 32px;
  border-radius: 2px !important;

}

.custom-pagination .ant-pagination-item a {
  color: #6D7886 !important;
  font-weight: 400 !important;
  ;

}

.custom-pagination .ant-select-item-option , .custom-pagination
 .ant-select-selection-search, 
  .custom-pagination .ant-select-selection-search-input,
 .custom-pagination .ant-pagination-options-quick-jumper,
 .custom-pagination .ant-select-selection-wrap,
.custom-pagination .ant-select-item-option-active{
  color: #6D7886 !important;
  font-size: 12px !important;
}