Customers Table

Dashboard2: Customers Table

A customer-management dashboard page built around a sortable, searchable customers table. Records show avatar cells, status badges, seat counts, and recurring revenue, all rendered by the Beste data-table component. It is a drop-in customers table dashboard for any Next.js / React admin, styled with shadcn/ui primitives for a clean admin table look.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard2?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard2?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard2.tsx, the reusable data-table engine to components/beste/component/data-table.tsx, and the shadcn/ui dependencies they need (button, badge, avatar, plus the table, checkbox, input, and dropdown-menu primitives the table composes).

Quick start

The installed file exports dashboard2Demo alongside the block: the exact props behind the preview above, including the ten sample customer rows. Spread it to get a full-page customers table in one line.

import { Dashboard2, dashboard2Demo } from "@/components/beste/block/dashboard2";

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

Dashboard2 renders its own full-width <section> layout (heading, description, and the table), so it drops straight into a page. Replace dashboard2Demo with your own props once you are ready.

Props

The block takes no className prop; the outer <section> layout is fixed. Each row is a Customer:

type Customer = {
  id: string;
  name: string;
  email: string;
  avatar: string; // image URL for the avatar cell
  company: string;
  status: "Active" | "Trial" | "Churned";
  mrr: number; // monthly recurring revenue, rendered as $-prefixed
  seats: number;
  joined: string; // pre-formatted date label, e.g. "Jan 4, 2026"
};

customers defaults to a built-in set of ten demo rows, so the block renders a full populated table with no props at all.

Components

• data-table — the generic sortable, searchable, selectable table engine that renders every column, the search box, row-action menus, selection, and pagination. Dashboard2 configures it with the customer columns and toolbar.

Behavior notes

The columns and table behavior are defined in the block and driven by data-table:

• Sorting — every column (Customer, Company, Status, Seats, MRR, Joined) is sortable. Clicking a header cycles ascending, then descending, then unsorted; numeric columns (seats, mrr) sort numerically, the rest sort with a locale string compare. Seats and MRR are right-aligned.
• Search — the toolbar search box filters rows client-side across every column's scalar value (name, email is not indexed since only name is the Customer column value, company, status, seats, mrr, joined). Typing resets to page 1.
• Selection — rows are selectable with per-row checkboxes plus a header checkbox that toggles the whole current page. The footer shows a live "N of M row(s) selected" count when anything is checked, otherwise the total row count.
• Row actions — each row has a "more" menu with View, Edit, and Delete; Delete is styled as a destructive action below a separator.
• Pagination — the table paginates at pageSize={7} with Previous / Next controls and a "Page x of y" indicator; the buttons disable at the first and last page.
• Toolbar — the top-right of the table carries an Export button and a primary "Add customer" button.
• Status badges — status renders as a colored Badge: emerald for Active, amber for Trial, muted for Churned, each with a dark-mode variant.

Requirements

• Next.js App Router. The block renders as a client component ("use client") because the table manages sort, search, selection, and pagination state.
• Avatar images render through the shadcn/ui Avatar (a plain <img> under the hood), so no next.config images.remotePatterns setup is needed for remote avatar hosts.