marco.pms.web/src/pages/master/MasterTable.jsx

import React, { useEffect,useState } from "react";
import { useSelector } from "react-redux";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {MANAGE_MASTER} from "../../utils/constants";

const MasterTable = ( {data, columns, loading, handleModalData} ) =>
{    
    const hasMasterPermission = useHasUserPermission(MANAGE_MASTER)   
    const selectedMaster = useSelector((store)=>store.localVariables.selectedMaster)
    const hiddenColumns = ["id", "featurePermission","tenant","tenantId"];

    const safeData = Array.isArray(data) ? data : [];
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage] = useState(10);
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = safeData.slice( indexOfFirstItem, indexOfLastItem );
  
    useEffect(() => {
      setCurrentPage(1);
    }, [ safeData ] )
  
    const paginate = (pageNumber) => setCurrentPage(pageNumber);
    const totalPages = Math.ceil(safeData.length / itemsPerPage);

    const updatedColumns = columns
    .filter((col) => !hiddenColumns.includes(col.key))
    .map((col) => ({
      ...col,
      label:
        col.key === "role" || col.key === "module" || col.key === "status" ? "Name" : col.label,
    }));

  return (
    <div className="table-responsive">
    {loading ? (
      <p>Loading...</p>
    ) : (
      <table
        className="datatables-users table border-top dataTable no-footer dtr-column"
        id="DataTables_Table_0"
        aria-describedby="DataTables_Table_0_info"
        style={{ width: "100%" }}
      >
        <thead>
          <tr>
            <th></th>
                <th>{ selectedMaster} Name</th>
                <th>{selectedMaster } Description</th>
                <th className={` ${!hasMasterPermission && 'd-none'}`}>Actions</th>
          </tr>
        </thead>
        <tbody>
          {currentItems.length > 0 ? (
            currentItems.map((item, index) => (
              <tr key={index}>
                <td></td>
                {updatedColumns.map( ( col ) => (
                  <td className="text-start mx-2" key={col.key}>
                  {col.key === "description" ? (
                    item[col.key] !== undefined && item[col.key] !== null ? (
                      item[col.key].length > 80 ? (
                        <>
                          {item[col.key].slice(0, 80)}...
                        </>
                      ) : (
                        item[col.key]
                      )
                    ) : (
                      " --- "
                    )
                  ) : (
                    item[col.key] !== undefined && item[col.key] !== null ? item[col.key] : " --- "
                  )}
                </td>                 
                ))}
                <td className={`${!hasMasterPermission && 'd-none'}`} >
                  <button
                    aria-label="Modify"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#master-modal"
                    className="btn p-0 dropdown-toggle hide-arrow"
                    onClick={() => handleModalData(`Edit-${selectedMaster}`, item)}
                  >
                    <i className="bx bxs-edit me-2 text-primary"></i>
                  </button>

                  <button
                    aria-label="Delete"
                    type="button"
                    className="btn p-0 dropdown-toggle hide-arrow"
                    data-bs-toggle="modal"
                    data-bs-target="#master-modal"
                    onClick={() => handleModalData("delete", item)}
                  >

                    <i className="bx bx-trash me-1 text-danger"></i>
                  </button>
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={updatedColumns.length + 4}>No results found.</td>
            </tr>
          )}
        </tbody>
      </table>
    )}

    {/* Pagination */}
    {!loading && (
      <nav aria-label="Page ">
        <ul className="pagination pagination-sm justify-content-end py-1">
          <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
            <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
              &laquo;
            </button>
          </li>
          {[...Array(totalPages)].map((_, index) => (
            <li key={index} className={`page-item ${currentPage === index + 1 ? "active" : ""}`}>
              <button className="page-link" onClick={() => paginate(index + 1)}>
                {index + 1}
              </button>
            </li>
          ))}
          <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
            <button className="page-link" onClick={() => paginate(currentPage + 1)}>
              &raquo;
            </button>
          </li>
        </ul>
      </nav>
    )}
  </div>
  );
};

export default MasterTable;