Customers Table

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard2.tsx instead.

Usage

The file also exports dashboard2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard2, dashboard2Demo } from "@/components/blocks/dashboard/dashboard2";

export default function Page() {
  return <Dashboard2 {...dashboard2Demo} />;
}

Props

Types

type CustomerRow = {
  id: string;
  name: string;
  email: string;
  avatar?: { src: string; alt: string };
  status: "Active" | "Inactive" | "Pending";
  plan: string;
  spend: number;
  joined: string; // e.g. "2023-06-02", sorts correctly as an ISO date string
};

Behavior notes

• The search box is a real live filter against name and email as you type, and it resets the page back to the first one on every keystroke.
• Clicking Name, Status, Spend, or Joined toggles a real ascending/descending sort on that column; clicking the same header again flips direction instead of resetting it.
• Row checkboxes and the header checkbox are real selection state; the header checkbox reflects and toggles selection across every filtered row, not just the visible page, and the "N selected" label above the table is live.
• Pagination (Prev/Next and the page indicator) is real state over the filtered, sorted array; the current page clamps down automatically if a search narrows the result set below it.
• The per-row "..." action menu opens a real inline menu, but its three actions (View profile, Edit customer, Deactivate) only close the menu on click, they don't mutate any data.
• Export and Add customer in the toolbar are inert buttons with no wired behavior.