EntityList

Code

import { EntityIdentity, EntityList, type DataTableColumn } from "@fadymondy/nasaq/web";type Person = { id: string; name: string; role: string };const columns: DataTableColumn<Person>[] = [  { id: "name", header: "Name", cell: (p) => <EntityIdentity name={p.name} avatarName={p.name} subtitle={p.role} />, sortValue: (p) => p.name, hideable: false },];export function People({ people }: { people: Person[] }) {  return (    <EntityList      label="People"      data={people}      columns={columns}      getRowId={(p) => p.id}      rowLabel={(p) => p.name}      renderCard={(p) => <EntityIdentity name={p.name} avatarName={p.name} subtitle={p.role} size="lg" />}    />  );}

Data Display · beta

Live examples and controls: EntityList in the lab.

InstallCopy Anchor Link

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

Records that people browse both ways: a dense table to scan and sort, and cards to look at. EntityList puts a DataTable and a card grid behind one toolbar (search, facet filters, view toggle) and one selection, so a page gets both views with the same data, filters and bulk actions. ContactList, CompanyList and ProjectList are thin wrappers around it.

When to useCopy Anchor Link

• Building a list of one kind of record that needs a table and a card view.
• Filters on values that can be several per row (tags, members).

When not to useCopy Anchor Link

• A plain table with no card view: use DataTable.
• Contacts, companies or projects: use the ready-made lists (ContactList, CompanyList, ProjectList).

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

import { EntityIdentity, EntityList, type DataTableColumn } from "@fadymondy/nasaq/web";

type Person = { id: string; name: string; role: string };

const columns: DataTableColumn<Person>[] = [
  { id: "name", header: "Name", cell: (p) => <EntityIdentity name={p.name} avatarName={p.name} subtitle={p.role} />, sortValue: (p) => p.name, hideable: false },
];

export function People({ people }: { people: Person[] }) {
  return (
    <EntityList
      label="People"
      data={people}
      columns={columns}
      getRowId={(p) => p.id}
      rowLabel={(p) => p.name}
      renderCard={(p) => <EntityIdentity name={p.name} avatarName={p.name} subtitle={p.role} size="lg" />}
    />
  );
}

AnatomyCopy Anchor Link

EntityList                    data-slot="entity-list"
├─ toolbar                    search, facet filters, sort (cards), columns (table), view toggle, your `toolbar`
├─ bulk bar                   while rows are selected: count, clear, your `bulkActions`
├─ table view                 DataTable
├─ cards view                 one card per row (checkbox + menu at the inline end)
└─ pagination

APICopy Anchor Link

Building blocks for columns and cards: EntityIdentity, TagList, PersonCell, ActivityCell, AvatarStack, CardMeta.

ExamplesCopy Anchor Link

Export the filtered rows

<EntityList
  {...props}
  toolbar={({ filteredRows, selectedRows }) => (
    <ExportButton columns={exportColumns} scopes={{ selected: selectedRows, filtered: filteredRows, all: props.data }} />
  )}
/>

Context menu and table actionsCopy Anchor Link

rowActions open as a context menu on right-click, Shift+F10 or the Menu key, in the table and on cards (the card's ⋯ button stays). contextMenu={false} opts out. actions renders DataTableActions (primary button, secondary buttons, ⋯ overflow) at the toolbar's inline end, before the toolbar slot. onCellEdit and column edit configs are passed to the table view (see DataTable).

AccessibilityCopy Anchor Link

• The table view is DataTable. The card view is a grid of cards with one tab stop: arrow keys, Home and End move focus (swapped in RTL), Enter opens, Space selects, Shift+F10 opens the card menu.
• Every card has a named checkbox and a named menu button. A hidden live region announces the result count after search and filters.
• Skeletons carry aria-busy; errors use role="alert".

RTL & i18nCopy Anchor Link

• English and Arabic strings ship. Cards place the checkbox and menu at the inline end; arrow keys follow the reading direction.
• Emails, domains and keys in your cells should use <bdi dir="ltr">.

Styling & tokensCopy Anchor Link

• Card surfaces use bg-card, border-border, nq-hover and nq-selected. Extend with className.
• Cards keep their full width. The checkbox and menu sit over the top inline-end corner, so give only the top row of renderCard room for them with pe-(--entity-card-controls). EntityList sets that variable to the width the controls actually need (0 when there are none).

Do / Don'tCopy Anchor Link

• Do give rowLabel so checkbox labels read "Select Sara Ali".
• Do keep columns and facets stable (useMemo) for large lists.
• Don't put interactive elements in renderCard that compete with onRowClick.

RelatedCopy Anchor Link

• DataTable
• ExportButton

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-data-display-entity-list--docs