[CLAUDE] FE: DataTable skeleton rows khi loading (thay 'Đang tải…' text đơn giản)
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 2m36s

This commit is contained in:
pqhuy1987
2026-04-21 15:06:40 +07:00
parent 0e5b5cd670
commit c1c23619de
2 changed files with 22 additions and 16 deletions

View File

@ -66,16 +66,19 @@ export function DataTable<T>({
</tr>
</thead>
<tbody>
{isLoading && (
<tr>
<td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
Đang tải
</td>
</tr>
)}
{isLoading &&
Array.from({ length: 5 }).map((_, i) => (
<tr key={`sk-${i}`} className="border-t border-slate-100">
{columns.map(c => (
<td key={c.key} className="px-3 py-3">
<div className="h-3 animate-pulse rounded bg-slate-100" />
</td>
))}
</tr>
))}
{!isLoading && rows.length === 0 && (
<tr>
<td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
<td colSpan={columns.length} className="px-3 py-10 text-center text-sm text-slate-400">
{empty ?? 'Không có dữ liệu'}
</td>
</tr>

View File

@ -66,16 +66,19 @@ export function DataTable<T>({
</tr>
</thead>
<tbody>
{isLoading && (
<tr>
<td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
Đang tải
</td>
</tr>
)}
{isLoading &&
Array.from({ length: 5 }).map((_, i) => (
<tr key={`sk-${i}`} className="border-t border-slate-100">
{columns.map(c => (
<td key={c.key} className="px-3 py-3">
<div className="h-3 animate-pulse rounded bg-slate-100" />
</td>
))}
</tr>
))}
{!isLoading && rows.length === 0 && (
<tr>
<td colSpan={columns.length} className="px-3 py-8 text-center text-slate-500">
<td colSpan={columns.length} className="px-3 py-10 text-center text-sm text-slate-400">
{empty ?? 'Không có dữ liệu'}
</td>
</tr>