Components
Loading preview...
The ContactsTable component is a production-ready data table that displays a list of contacts with advanced filtering, sorting, and selection capabilities. It features a grid-style layout with multi-select checkboxes, connection strength indicators, Twitter follower counts, and email information, allowing users to quickly browse and identify key contacts. The component includes a detail modal for viewing full contact information, export functionality for CSV and JSON formats, and pagination support, making it ideal for CRM applications, outreach platforms, and contact management systems.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/contacts-table-with-modal"use client";
import {
ContactsTable,
type Contact,
} from "@/components/ui/contacts-table-with-modal";
export default function ContactsTableDemo() {
const handleContactSelect = (contactId: string) => {
console.log(`Selected contact:`, contactId);
};
return (
<div className="min-h-screen bg-background py-6 md:py-12">
<div className="container mx-auto px-2 sm:px-4">
<div className="mb-8 md:mb-12">
<ContactsTable title="Person" onContactSelect={handleContactSelect} />
</div>
</div>
</div>
);
}