/**
* Large page — a data table with 500 rows × 8 columns.
* ~4000+ elements, ~80KB+ HTML. Typical admin dashboard / report.
*/
const COLUMNS = [
"ID",
"Name",
"Email",
"Department",
"Role",
"Status",
"Joined",
"Score",
];
const DEPARTMENTS = [
"Engineering",
"Marketing",
"Sales",
"Support",
"Design",
"Product",
"Finance",
"Legal",
];
const ROLES = [
"Manager",
"Senior",
"Junior",
"Lead",
"Director",
"Intern",
"Principal",
"Staff",
];
const STATUSES = ["Active", "Inactive", "On Leave", "Probation"];
function TableRow({ i }) {
const dept = DEPARTMENTS[i % DEPARTMENTS.length];
const role = ROLES[i % ROLES.length];
const status = STATUSES[i % STATUSES.length];
const score = ((i * 7 + 13) % 100) + 1;
return (
<tr>
<td>{i}</td>
<td>
User {i} {dept[0]}
</td>
<td>user{i}@example.com</td>
<td>{dept}</td>
<td>{role}</td>
<td>{status}</td>
<td>
2024-{String((i % 12) + 1).padStart(2, "0")}-
{String((i % 28) + 1).padStart(2, "0")}
</td>
<td>{score}</td>
</tr>
);
}
export default function Large() {
const rows = Array.from({ length: 500 }, (_, i) => i + 1);
return (
<main>
<header>
<h1>Employee Directory</h1>
<p>{rows.length} records</p>
</header>
<table>
<thead>
<tr>
{COLUMNS.map((col) => (
<th key={col}>{col}</th>
))}
</tr>
</thead>
<tbody>
{rows.map((i) => (
<TableRow key={i} i={i} />
))}
</tbody>
</table>
</main>
);
}