116 lines
4.2 KiB
JavaScript
116 lines
4.2 KiB
JavaScript
import React, { useEffect,useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
|
|
|
|
const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
|
const selectedMaster = useSelector((store)=>store.localVariables.selectedMaster)
|
|
const hiddenColumns = ["id", "featurePermission"];
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [itemsPerPage] = useState(10);
|
|
const indexOfLastItem = currentPage * itemsPerPage;
|
|
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
|
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
|
|
|
|
|
|
const paginate = (pageNumber) => setCurrentPage(pageNumber);
|
|
const totalPages = Math.ceil(data.length / itemsPerPage);
|
|
|
|
const updatedColumns = columns
|
|
.filter((col) => !hiddenColumns.includes(col.key))
|
|
.map((col) => ({
|
|
...col,
|
|
label: col.key === "role" || "module" || "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>
|
|
{/* {updatedColumns.map((col) => (
|
|
<th key={col.key}>{col.label}</th>
|
|
))} */}
|
|
<th></th>
|
|
<th>Name</th>
|
|
<th>Description</th>
|
|
<th>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}>{item[col.key] || " --- "}</td>
|
|
))}
|
|
<td>
|
|
|
|
<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)}>«</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)}>»</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MasterTable;
|