Next.js Table with the App Router

Drivn installs through a small CLI that writes component source directly into your repository — there is no runtime package to version-lock. From the root of your Next.js 16 project run npx drivn add table. The Table imports nothing past React and the local cn utility — no icon dependency, no headless layer — so the CLI writes a single table.tsx file and touches nothing else in your tree. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file, and future Drivn releases will not overwrite it, so commit it for a clean baseline before wiring it into a page. There is no peer dependency to add and nothing to configure past having Tailwind v4 already processing your styles — the component is pure React plus Tailwind classes over semantic table elements.

Because table.tsx has no 'use client' directive, it renders straight inside an async Server Component — the piece that sets the Table apart from most interactive UI. Fetch your rows at the top of the route with await, then map them into Table.Row children inside Table.Body; the whole table serializes to HTML on the server with no hydration for the table itself. The root wraps the native <table> in an overflow-x-auto div, Table.Header renders <thead>, Table.Body renders <tbody>, Table.Head renders a <th scope="col">, and Table.Cell renders a <td>. The example awaits a list of orders and renders one row each. Keep the data-fetching in the Server Component and the Table stays server-rendered end to end — see the installation guide for project setup.

The variant prop on the Table root changes the look without any change to the row markup. The default variant is an unadorned table with a bottom border under the header and a divider under each row. Pass variant="striped" and even-numbered body rows pick up a bg-muted/30 tint via a [&_tbody_tr:nth-child(even)] selector — the zebra striping renders purely from CSS, so it stays correct no matter how many rows the server returns. Pass variant="bordered" and every <th> and <td> gains a border-border box plus the same even-row tint, giving a spreadsheet-style grid. Because the striping is a nth-child selector rather than a per-row class, you never tag individual Table.Row elements — the variant on the root does all the work. For a heavier data grid with sorting and pagination, reach for the Data Table instead.

Column alignment rides on the native align attribute. Pass align="right" or align="center" to a Table.Head or Table.Cell and the [&[align=center]]:text-center and [&[align=right]]:text-right hooks in the styles object apply the alignment — numeric columns read best right-aligned. Table.Caption renders a <caption> under the table (caption-bottom) for a short description, and Table.Footer renders a <tfoot> with a bg-muted/30 font-medium band for totals or summary rows. Every Table.Head defaults scope="col" so assistive technology maps headers to their columns without extra ARIA. The example adds a right-aligned total column, a caption, and a footer row. Pair the table with a Badge in a status cell to flag row state at a glance.

Everything visible on the Table is a Tailwind class in the styles object inside the file you own, so restyling is a local edit. The header uses [&_tr]:border-b [&_tr]:border-border, each row is border-b border-border transition-colors hover:bg-muted/40 for a hover highlight, and cells are px-4 py-2.5. Tighten the density by dropping the cell padding to px-3 py-1.5, or change the hover tint from bg-muted/40 to a brand token for a stronger row highlight. Because the classes read your theme tokens, the table matches dark and light mode with no override — see Theming for the token list. The styles keys below are copied verbatim from the registry source; edit them and every Table in your app follows.