Reusable Data Table Component

Problem Description

A SaaS platform team needs a reusable data table component in Svelte 5 for their admin dashboard. They have several different data views (users, invoices, products) and want a single generic table shell that handles the column headers and row structure, while letting each page control exactly how each row's cells are rendered. This is important because different pages need completely different cell content — some need badges, icons, or action buttons, while others just need plain text.

The component should be flexible enough that the parent page passes a snippet defining how to render each row, and the table component iterates over the data and renders each row using that snippet. This keeps the table reusable across contexts without needing to pass complex render functions or sacrifice type safety.

The team is building this with Svelte 5 and TypeScript. They plan to load the table data from an API endpoint (or a mock fetch) and want the data storage to be as efficient as possible given that the data is always replaced wholesale when refreshed.

Output Specification

Create the following files:

• src/lib/DataTable.svelte — A generic, reusable table component that:

  • Accepts column headers as a prop
  • Accepts data rows as a prop
  • Accepts a way for the parent to specify how each row should be rendered
  • Renders the table with headers and uses the parent-provided row rendering for each data item
  • Has a refresh/reload button that triggers a callback to the parent

• src/routes/users/+page.svelte — A page that:

  • Loads a list of at least 5 mock users (name, email, role) — hardcode them in the script or simulate a fetch
  • Uses the DataTable component
  • Defines how each user row should be rendered (showing all three fields, with the role displayed in a styled badge)
  • Stores the fetched users data appropriately given it is replaced wholesale on each fetch

The files should be written for Svelte 5 with TypeScript.