98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
import React from "react";
|
|
|
|
const SkeletonCell = ({ width = "100%", height = 20, style = {} }) => (
|
|
<div
|
|
className="skeleton"
|
|
style={{
|
|
width,
|
|
height,
|
|
borderRadius: 4,
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
|
|
export const TenantTableSkeleton = ({ columns, rows = 5 }) => {
|
|
return (
|
|
<div className="card p-2 mt-3">
|
|
<div className="card-datatable text-nowrap table-responsive">
|
|
<table className="table border-top dataTable text-nowrap">
|
|
<thead>
|
|
<tr>
|
|
{columns.map((col) => (
|
|
<th key={col.key} className="sorting d-table-cell">
|
|
<div className={col.align}>{col.label}</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{[...Array(rows)].map((_, rowIdx) => (
|
|
<tr key={rowIdx}>
|
|
{columns.map((col, colIdx) => (
|
|
<td
|
|
key={col.key || colIdx}
|
|
className={`d-table-cell px-3 py-2 align-middle ${
|
|
col.align ?? ""
|
|
}`}
|
|
>
|
|
{/* Icon + text skeleton for first few columns */}
|
|
{col.key === "name" && (
|
|
<div className="d-flex align-items-center">
|
|
<div
|
|
className="me-2"
|
|
style={{
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: "5px",
|
|
background: "#ddd",
|
|
}}
|
|
/>
|
|
<SkeletonCell width="120px" />
|
|
</div>
|
|
)}
|
|
{col.key === "domainName" && (
|
|
<div className="d-flex align-items-center">
|
|
<div
|
|
className="me-2"
|
|
style={{
|
|
width: 14,
|
|
height: 14,
|
|
borderRadius: "50%",
|
|
background: "#ddd",
|
|
}}
|
|
/>
|
|
<SkeletonCell width="140px" />
|
|
</div>
|
|
)}
|
|
{col.key === "contactName" && (
|
|
<div className="d-flex align-items-center ">
|
|
<div
|
|
className="me-2"
|
|
style={{
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: "50%",
|
|
background: "#ddd",
|
|
}}
|
|
/>
|
|
<SkeletonCell width="100px" />
|
|
</div>
|
|
)}
|
|
{col.key === "contactNumber" && (
|
|
<SkeletonCell width="100px"/>
|
|
)}
|
|
{col.key === "status" && (
|
|
<SkeletonCell width="60px" height={24} />
|
|
)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|