Airbnb · Data Table

React Data Table: Airbnb-style

Part of Better Design's React component library. The warm, light, marketplace-feel data table for React: TanStack Table v8 under the hood, ships as a shadcn-compatible registry item.

Install

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

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

Live preview

Open the full Airbnb showcase

Why this data table

•TanStack Table v8 engine: sorting, filtering, pagination, column visibility
•Warm light surface, coral accents, soft shadows: Airbnb visual signature
•Composes with shadcn Input + Button + DropdownMenu for the toolbar: no extra deps
•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 ListingsTable({ listings }) {
  return <DataTable columns={columns} data={listings} />;
}

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 Airbnb's warm aesthetic.

Is it free?

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

Server-side or client-side?

Both. Pass `manualSorting` + `manualPagination` for server mode; omit for client mode. TanStack Table handles either.

Related component pages

React Data Table (all variants)

/components/data-table

Airbnb-style Date Picker

/components/airbnb-date-picker

Linear-style Command Palette

/components/linear-command