CompanyList

Code

import { CompanyList, type Company } from "@fadymondy/nasaq/web";const companies: Company[] = [  { id: "1", name: "Acme", domain: "acme.com", industry: "Manufacturing", location: "Riyadh", contactsCount: 12, owner: { name: "Omar Nasser" }, lastActivity: new Date() },];export function Companies() {  return <CompanyList companies={companies} />;}

CRM · beta

Live examples and controls: CompanyList in the lab.

InstallCopy Anchor Link

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

The companies (accounts) screen of a CRM. It is EntityList with the columns, cards and filters set up: a square logo, the domain, industry, location, how many contacts the company has, tags, owner and last activity.

When to useCopy Anchor Link

• A CRM list of organisations, clients or accounts.

When not to useCopy Anchor Link

• People: use ContactList.
• Anything else: build on EntityList.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

import { CompanyList, type Company } from "@fadymondy/nasaq/web";

const companies: Company[] = [
  { id: "1", name: "Acme", domain: "acme.com", industry: "Manufacturing", location: "Riyadh", contactsCount: 12, owner: { name: "Omar Nasser" }, lastActivity: new Date() },
];

export function Companies() {
  return <CompanyList companies={companies} />;
}

AnatomyCopy Anchor Link

CompanyList renders EntityList. Columns: name (logo, name, domain), industry, location (hidden by default), contacts, tags, owner, last activity. Facets: industry, tags, owner.

APICopy Anchor Link

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

ExamplesCopy Anchor Link

Logos

<CompanyList companies={companies.map((c) => ({ ...c, logo: `/logos/${c.id}.svg` }))} />

Use the company's own logo file. Without one the list shows initials on a square tile; it never draws a brand mark.

AccessibilityCopy Anchor Link

Inherited from EntityList: table or card grid, named checkboxes and menus, a live result count.

RTL & i18nCopy Anchor Link

• English and Arabic strings ship. Domains are set left-to-right in <bdi dir="ltr">; counts and times follow the locale.

Styling & tokensCopy Anchor Link

• The logo is a square Avatar (shape="square"), so wide logos are not cropped to a circle.

Do / Don'tCopy Anchor Link

• Do pass the domain without a scheme (acme.com).
• Don't substitute another company's logo when yours is missing; leave logo empty.

RelatedCopy Anchor Link

• EntityList
• ContactList
• ExportButton

LabCopy Anchor Link

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