[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
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 2m36s
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user