Spaces:
Running
Running
File size: 1,331 Bytes
d6c9678 f7fe834 d6c9678 f7fe834 d6c9678 f7fe834 d6c9678 f7fe834 d6c9678 f7fe834 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import React from 'react'
function DataTable({ table, maxHeight = 320 }) {
if (!table || !table.columns || !table.rows) {
return <div className="empty-box">Sem dados.</div>
}
const MAX_RENDER_ROWS = 1200
const rowsToRender = table.rows.length > MAX_RENDER_ROWS
? table.rows.slice(0, MAX_RENDER_ROWS)
: table.rows
const renderTruncated = rowsToRender.length < table.rows.length
return (
<div className="table-wrapper" style={{ maxHeight }}>
<table>
<thead>
<tr>
{table.columns.map((col) => (
<th key={col}>{col}</th>
))}
</tr>
</thead>
<tbody>
{rowsToRender.map((row, i) => (
<tr key={i}>
{table.columns.map((col) => (
<td key={`${i}-${col}`}>{String(row[col] ?? '')}</td>
))}
</tr>
))}
</tbody>
</table>
{renderTruncated ? (
<div className="table-hint">
Renderizando {rowsToRender.length} de {table.rows.length} linhas recebidas para manter desempenho.
</div>
) : null}
{table.truncated ? (
<div className="table-hint">Mostrando {table.returned_rows} de {table.total_rows} linhas.</div>
) : null}
</div>
)
}
export default React.memo(DataTable)
|