Scrollable Data Table

Component

About

A themeable HTML table wrapper with a horizontally scrollable container, hover row highlighting, and styled headers/captions for displaying tabular data.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scrollable Data Table to your project and fits it to your theme.

Code

How Scrollable Data Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Table from "@/components/ui/table";

const rows = [
  { name: "laikit UI", value: 24 },
  { name: "Marketing Site", value: 58 },
  { name: "Admin Dashboard", value: 12 },
  { name: "Mobile App", value: 40 },
  { name: "Docs Portal", value: 7 },
];

export default function TableDemo() {
  return (
    <div className="w-full max-w-xl bg-background p-6">
      <Table>
        <caption>Repository Activity</caption>
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Value</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.name}>
              <th scope="row">{row.name}</th>
              <td>{row.value}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}