ContactList

Code

import { ContactList, type Contact } from "@fadymondy/nasaq/web";const contacts: Contact[] = [  {    id: "1",    name: "Sara Ali",    email: "[email protected]",    company: "Nasaq",    stage: "customer",    tags: [{ label: "VIP", hue: "violet" }],    owner: { name: "Omar Nasser" },    lastActivity: new Date(),  },];export function Contacts() {  return <ContactList contacts={contacts} onRowClick={(c) => console.log(c.id)} />;}

CRM · beta

Live examples and controls: ContactList in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/contact-list.json

The contacts screen of a CRM: people with their company, lifecycle stage, tags, owner and last activity. It is EntityList with the columns, cards and filters already set up, so you pass contacts and get both views.

When to useCopy Anchor Link

• A CRM or address book of people.
• Any list of people with a stage, tags and an owner.

When not to useCopy Anchor Link

• Companies: use CompanyList.
• A different kind of record: build on EntityList.

ImportCopy Anchor Link

import { ContactList } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ContactList, type Contact } from "@fadymondy/nasaq/web";

const contacts: Contact[] = [
  {
    id: "1",
    name: "Sara Ali",
    email: "[email protected]",
    company: "Nasaq",
    stage: "customer",
    tags: [{ label: "VIP", hue: "violet" }],
    owner: { name: "Omar Nasser" },
    lastActivity: new Date(),
  },
];

export function Contacts() {
  return <ContactList contacts={contacts} onRowClick={(c) => console.log(c.id)} />;
}

AnatomyCopy Anchor Link

ContactList renders EntityList (see its anatomy). Columns: name (avatar, name, email), company, phone (hidden by default), stage, tags, owner, last activity. Facets: stage, tags, owner, built from the data.

APICopy Anchor Link

ContactListProps extends the EntityList props (view, defaultView, pageSize, selectable, toolbar, bulkActions, rowActions, onRowClick, loading, error, onRetry, empty, defaultSort, className).

ContactStage is "lead" | "prospect" | "customer" | "churned".

ExamplesCopy Anchor Link

Loading, then an error

<ContactList contacts={[]} loading />
<ContactList contacts={[]} error="Could not load contacts" onRetry={reload} />

Bulk actions and export

<ContactList
  contacts={contacts}
  bulkActions={({ selectedRows }) => <Button onClick={() => assign(selectedRows)}>Assign owner</Button>}
  toolbar={({ filteredRows, selectedRows }) => (
    <ExportButton columns={cols} scopes={{ selected: selectedRows, filtered: filteredRows, all: contacts }} filename="contacts" />
  )}
/>

AccessibilityCopy Anchor Link

Inherited from EntityList: a table or a card grid with one tab stop, named checkboxes ("Select Sara Ali"), a named row menu, a live result count.

RTL & i18nCopy Anchor Link

• English and Arabic strings ship, including stage names. Names are your data; emails and phone numbers are set left-to-right.
• Relative times use the locale.

Styling & tokensCopy Anchor Link

• Stage uses Status tones; tags use Badge variant="tag" hues. Extend with className.

Do / Don'tCopy Anchor Link

• Do give every contact a stable id.
• Do pass loading while fetching, so users see skeletons and not "no contacts".
• Don't sort or filter yourself; the list does it.

RelatedCopy Anchor Link

• EntityList
• CompanyList
• ExportButton

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-crm-contact-list--docs