26 lines
861 B
TypeScript
26 lines
861 B
TypeScript
export function DataPanel(props: { columns: string[]; empty: string; rows: string[][]; title: string }) {
|
|
return (
|
|
<div className="panel">
|
|
<div className="panelHeader">
|
|
<h2>{props.title}</h2>
|
|
<span>{props.rows.length}</span>
|
|
</div>
|
|
<div className="table" role="table">
|
|
<div className="row head" role="row">
|
|
{props.columns.map((column) => (
|
|
<span key={column}>{column}</span>
|
|
))}
|
|
</div>
|
|
{props.rows.map((row, index) => (
|
|
<div className="row" role="row" key={`${props.title}-${index}`}>
|
|
{row.map((cell, cellIndex) => (
|
|
<span key={`${props.title}-${index}-${cellIndex}`}>{cell}</span>
|
|
))}
|
|
</div>
|
|
))}
|
|
{!props.rows.length && <p className="empty">{props.empty}</p>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|