Stripe · Data Table

React Data Table: Stripe-style

Part of Better Design's React component library. The fintech-feel data table: Sohne typography, indigo accent, characteristic navy-purple shadow. TanStack Table v8 under the hood.

Install

npx shadcn@latest add https://better-design.com/registry/stripe/data-table.json

Lands in components/ui/data-table.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Stripe showcase

Why this data table

•TanStack Table v8 engine: sorting, filtering, pagination, column visibility
•Sohne typography, indigo primary, navy-purple shadow: Stripe visual signature
•Designed for fintech / billing / transaction admin layouts: dense rows, monospace numerics ready
•Drops into any shadcn/ui project unchanged: `npx shadcn@latest add`

Usage

import { DataTable } from "@/components/ui/data-table";
import { columns } from "./columns";

export function PaymentsTable({ payments }) {
  return <DataTable columns={columns} data={payments} />;
}

FAQ

What's this built on?

TanStack Table v8 for the table engine, shadcn/ui Input + Button + DropdownMenu for the toolbar. Identical primitive stack to shadcn/ui's data-table: Better Design re-skins it for Stripe's aesthetic.

Is it free?

Yes. MIT-licensed shadcn-compatible registry item. `npx shadcn@latest add`: source lands in your components/ui folder.

Best use case?

Fintech, billing, transaction admin. Pair with Stripe-style Sidebar + Command Palette for a full Stripe-Dashboard-feel admin shell.

Related component pages

React Data Table (all variants)

/components/data-table

Airbnb-style Data Table

/components/airbnb-data-table

Linear-style Sidebar

/components/linear-sidebar