# CompanyList
> A list of companies as a table or cards with logo, domain, industry, location, contacts count, tags, owner and last activity, plus search, industry and tag and owner filters, bulk select, loading skeletons and an empty state.
Source: https://docs.nasaqui.com/components/company-list
## Install
```bash
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 use
- A CRM list of organisations, clients or accounts.
## When not to use
- People: use [`ContactList`](https://docs.nasaqui.com/components/contact-list).
- Anything else: build on [`EntityList`](https://docs.nasaqui.com/components/entity-list).
## Import
```tsx
import { CompanyList } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
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 ;
}
```
## Anatomy
`CompanyList` renders `EntityList`. Columns: name (logo, name, domain), industry, location (hidden by default),
contacts, tags, owner, last activity. Facets: industry, tags, owner.
## API
`CompanyListProps` extends the `EntityList` props (`view`, `pageSize`, `selectable`, `toolbar`, `bulkActions`,
`rowActions`, `onRowClick`, `loading`, `error`, `onRetry`, `empty`, `defaultSort`, `className`).
| Prop | Type | Description |
| --- | --- | --- |
| `companies` | `Company[]` | `{ id, name, domain?, logo?, industry?, location?, contactsCount, tags?, owner?, lastActivity? }`. |
| `label` | `string` | Accessible name. Default "Companies" / "الشركات". |
| `labels` | `Partial` | Override any string. |
## Examples
**Logos**
```tsx
({ ...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.
## Accessibility
Inherited from `EntityList`: table or card grid, named checkboxes and menus, a live result count.
## RTL & i18n
- English and Arabic strings ship. Domains are set left-to-right in ``; counts and times follow the locale.
## Styling & tokens
- The logo is a square `Avatar` (`shape="square"`), so wide logos are not cropped to a circle.
## Do / Don't
- Do pass the domain without a scheme (`acme.com`).
- Don't substitute another company's logo when yours is missing; leave `logo` empty.
## Related
- [`EntityList`](https://docs.nasaqui.com/components/entity-list)
- [`ContactList`](https://docs.nasaqui.com/components/contact-list)
- [`ExportButton`](https://docs.nasaqui.com/components/export-action)
## Lab
https://docs.nasaqui.com/?path=/docs/components-crm-company-list--docs
## Code
### React
```tsx
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 ;
}
```
### shadcn
```tsx
import { CompanyList, type Company } from "@/components/ui/company-list";
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 ;
}
```
### Vue
```vue
```
### Blade
```blade
{{-- Bubbling events: nq-entity-list-row-click { row } (row.id is the company id). See the component header for the companies shape and labels. --}}
```
### HTML + Alpine
```html