Ensured all table headers and cells are left-aligned for consistent layout and better readability.

This commit is contained in:
Kartik sharma 2025-06-23 12:22:16 +05:30
parent 089bfecfd3
commit b20e6d17eb
2 changed files with 15 additions and 10 deletions

View File

@ -7,33 +7,38 @@ const DirectoryListTableHeader = ({ children }) => {
<table className="table px-2"> <table className="table px-2">
<thead> <thead>
<tr> <tr>
<th colSpan={2}> <th colSpan={2} className="text-start">
<div className="d-flex align-items-center gap-1"> <div className="d-flex align-items-center gap-1">
<span>Name</span> <span>Name</span>
</div> </div>
</th> </th>
<th className="px-2 text-start"> <th className="px-2 text-start">
<div className="d-flex text-center align-items-center gap-1 justify-content-start"> <div className="d-flex align-items-center gap-1">
<span>Email</span> <span>Email</span>
</div> </div>
</th> </th>
<th className="mx-2"> <th className="mx-2 text-start">
<div className="d-flex align-items-center m-0 p-0 gap-1"> <div className="d-flex align-items-center gap-1">
<span>Phone</span> <span>Phone</span>
</div> </div>
</th> </th>
<th colSpan={2} className="mx-2 ps-20"> <th colSpan={2} className="mx-2 ps-20 text-start">
Organization <span>Organization</span>
</th>
<th className="mx-2 text-start">
<span>Category</span>
</th>
<th className="text-start">
<span>Action</span>
</th> </th>
<th className="mx-2">Category</th>
<th>Action</th>
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0 overflow-auto"> <tbody className="table-border-bottom-0 overflow-auto text-start">
{children} {children}
</tbody> </tbody>
</table> </table>
</div> </div>
); );
}; };
export default DirectoryListTableHeader; export default DirectoryListTableHeader;

View File

@ -73,7 +73,7 @@ const EmployeeList = () => {
} }
const lowercasedText = text.toLowerCase(); const lowercasedText = text.toLowerCase();
return data.filter((item) => { return data.filter((item) => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); const fullName = `${item.firstName} ${item.lastName} ${item.lastName}`.toLowerCase();
const email = item.email ? item.email.toLowerCase() : ""; const email = item.email ? item.email.toLowerCase() : "";
const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : ""; const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; const jobRole = item.jobRole ? item.jobRole.toLowerCase() : "";