Data Table

import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';
import { Avatar } from '@bpdm/ui/avatar';

type Member = {
  id: string;
  name: string;
  email: string;
  role: string;
  team: string;
  status: 'active' | 'invited' | 'disabled';
  tasks: number;
};

const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', email: 'milo@bpdm.dev', role: 'Owner', team: 'Engineering', status: 'active', tasks: 128 },
  { id: 'm2', name: 'Leo Martins', email: 'leo@bpdm.dev', role: 'Admin', team: 'Design', status: 'invited', tasks: 0 },
  { id: 'm3', name: 'Sara Kovac', email: 'sara@bpdm.dev', role: 'Editor', team: 'Engineering', status: 'active', tasks: 86 },
];

// a rich identity cell — Avatar derives initials + colour from the name
function MemberCell({ member }: { member: Member }) {
  return (
    <div className="flex items-center gap-3">
      <Avatar name={member.name} size="sm" />
      <div className="leading-tight">
        <div className="font-medium">{member.name}</div>
        <div className="text-xs text-muted-foreground">{member.email}</div>
      </div>
    </div>
  );
}

const columns: DataTableColumn<Member>[] = [
  { id: 'member', header: 'Member', cell: (r) => <MemberCell member={r} /> },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'team', header: 'Team', accessor: (r) => r.team },
  { id: 'status', header: 'Status', align: 'center', accessor: (r) => r.status },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

export function MembersTable() {
  return <DataTable columns={columns} data={members} rowKey={(r) => r.id} />;
}

import { Component, viewChild, computed, type TemplateRef } from '@angular/core';
import { BpdmDataTable, BpdmAvatar, type DataTableColumn } from '@bpdm/ng';

type Member = { id: string; name: string; email: string; role: string; team: string; status: string; tasks: number };

@Component({
  selector: 'members-table',
  imports: [BpdmDataTable, BpdmAvatar],
  templateUrl: './members-table.html',
})
export class MembersTable {
  readonly memberCell = viewChild.required<TemplateRef<{ $implicit: Member }>>('memberCell');

  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', email: 'milo@bpdm.dev', role: 'Owner', team: 'Engineering', status: 'active', tasks: 128 },
    { id: 'm2', name: 'Leo Martins', email: 'leo@bpdm.dev', role: 'Admin', team: 'Design', status: 'invited', tasks: 0 },
    { id: 'm3', name: 'Sara Kovac', email: 'sara@bpdm.dev', role: 'Editor', team: 'Engineering', status: 'active', tasks: 86 },
  ];

  readonly rowKey = (r: Member) => r.id;

  readonly columns = computed<DataTableColumn<Member>[]>(() => [
    { id: 'member', header: 'Member', cell: this.memberCell() },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'team', header: 'Team', accessor: (r) => r.team },
    { id: 'status', header: 'Status', align: 'center', accessor: (r) => r.status },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ]);
}

<bpdm-data-table [columns]="columns()" [data]="members" [rowKey]="rowKey" />

<ng-template #memberCell let-row>
  <div class="flex items-center gap-3">
    <bpdm-avatar [name]="row.name" size="sm" />
    <div class="leading-tight">
      <div class="font-medium">{{ row.name }}</div>
      <div class="text-xs text-muted-foreground">{{ row.email }}</div>
    </div>
  </div>
</ng-template>

import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';
import { Tabs } from '@bpdm/ui/tabs';

type Member = { id: string; name: string; role: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

export function SizedTables() {
  return (
    <Tabs
      defaultValue="md"
      items={[
        { value: 'sm', label: 'Small', content: <DataTable columns={columns} data={members} rowKey={(r) => r.id} size="sm" /> },
        { value: 'md', label: 'Medium', content: <DataTable columns={columns} data={members} rowKey={(r) => r.id} size="md" /> },
        { value: 'lg', label: 'Large', content: <DataTable columns={columns} data={members} rowKey={(r) => r.id} size="lg" /> },
      ]}
    />
  );
}

import { Component, viewChild, computed, type TemplateRef } from '@angular/core';
import { BpdmDataTable, BpdmTabs, type DataTableColumn, type TabItem } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };

@Component({
  selector: 'sized-tables',
  imports: [BpdmDataTable, BpdmTabs],
  templateUrl: './sized-tables.html',
})
export class SizedTables {
  readonly sm = viewChild.required<TemplateRef<unknown>>('sm');
  readonly md = viewChild.required<TemplateRef<unknown>>('md');
  readonly lg = viewChild.required<TemplateRef<unknown>>('lg');

  readonly rowKey = (r: Member) => r.id;
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ];

  readonly tabs = computed<TabItem[]>(() => [
    { value: 'sm', label: 'Small', content: this.sm() },
    { value: 'md', label: 'Medium', content: this.md() },
    { value: 'lg', label: 'Large', content: this.lg() },
  ]);
}

<bpdm-tabs [items]="tabs()" defaultValue="md" />

<ng-template #sm><bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" size="sm" /></ng-template>
<ng-template #md><bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" size="md" /></ng-template>
<ng-template #lg><bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" size="lg" /></ng-template>

import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';
import { Tabs } from '@bpdm/ui/tabs';

type Member = { id: string; name: string; role: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

export function BorderTables() {
  return (
    <Tabs
      defaultValue="borderless"
      items={[
        { value: 'borderless', label: 'Borderless', content: <DataTable columns={columns} data={members} rowKey={(r) => r.id} /> },
        { value: 'striped', label: 'Striped', content: <DataTable columns={columns} data={members} rowKey={(r) => r.id} striped /> },
        { value: 'outlined', label: 'Outlined', content: <DataTable columns={columns} data={members} rowKey={(r) => r.id} frame bordered /> },
      ]}
    />
  );
}

import { Component, viewChild, computed, type TemplateRef } from '@angular/core';
import { BpdmDataTable, BpdmTabs, type DataTableColumn, type TabItem } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };

@Component({
  selector: 'border-tables',
  imports: [BpdmDataTable, BpdmTabs],
  templateUrl: './border-tables.html',
})
export class BorderTables {
  readonly borderless = viewChild.required<TemplateRef<unknown>>('borderless');
  readonly striped = viewChild.required<TemplateRef<unknown>>('striped');
  readonly outlined = viewChild.required<TemplateRef<unknown>>('outlined');

  readonly rowKey = (r: Member) => r.id;
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ];

  readonly tabs = computed<TabItem[]>(() => [
    { value: 'borderless', label: 'Borderless', content: this.borderless() },
    { value: 'striped', label: 'Striped', content: this.striped() },
    { value: 'outlined', label: 'Outlined', content: this.outlined() },
  ]);
}

<bpdm-tabs [items]="tabs()" defaultValue="borderless" />

<ng-template #borderless><bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" /></ng-template>
<ng-template #striped><bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" striped /></ng-template>
<ng-template #outlined><bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" frame bordered /></ng-template>

import { useState } from 'react';
import { DataTable, type DataTableColumn, type DataTableSort } from '@bpdm/ui/data-table';

type Member = { id: string; name: string; role: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Editor', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', sortable: true, accessor: (r) => r.name },
  { id: 'role', header: 'Role', sortable: true, accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, sortable: true, accessor: (r) => r.tasks },
];

// Single-column sort — clicking a header cycles asc → desc → none
export function SortableTable() {
  return (
    <DataTable
      columns={columns}
      data={members}
      rowKey={(r) => r.id}
      defaultSort={[{ id: 'tasks', dir: 'desc' }]}
      onSortChange={(sort: DataTableSort[]) => console.log(sort)}
    />
  );
}

// Multi-column sort — Shift+click a header to append it (each shows its order);
// here rows are grouped by role, then by tasks within each role
export function MultiSortTable() {
  return (
    <DataTable
      columns={columns}
      data={members}
      rowKey={(r) => r.id}
      multiSort
      defaultSort={[
        { id: 'role', dir: 'asc' },
        { id: 'tasks', dir: 'desc' },
      ]}
    />
  );
}

// Server-side sort — control `sort`; the table renders your order and calls
// onSortChange so you can re-fetch. It never re-sorts the data itself.
export function ServerSortedTable() {
  const [sort, setSort] = useState<DataTableSort[]>([{ id: 'name', dir: 'asc' }]);
  const rows = useSortedMembers(sort); // your data hook — fetches rows in `sort` order
  return (
    <DataTable columns={columns} data={rows} rowKey={(r) => r.id} sort={sort} onSortChange={setSort} />
  );
}

import { Component, signal } from '@angular/core';
import { BpdmDataTable, type DataTableColumn, type DataTableSort } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };

@Component({
  selector: 'sortable-table',
  imports: [BpdmDataTable],
  template: `
    <!-- Single-column sort (client-side; leave sort uncontrolled) -->
    <bpdm-data-table
      [columns]="columns" [data]="members" [rowKey]="rowKey"
      [defaultSort]="[{ id: 'tasks', dir: 'desc' }]" />

    <!-- Multi-column sort — Shift+click a header to append (grouped by role, then tasks) -->
    <bpdm-data-table
      [columns]="columns" [data]="members" [rowKey]="rowKey"
      multiSort
      [defaultSort]="[{ id: 'role', dir: 'asc' }, { id: 'tasks', dir: 'desc' }]" />

    <!-- Server-side sort — control [sort]; re-fetch on (sortChange), table won't re-sort -->
    <bpdm-data-table
      [columns]="columns" [data]="serverRows()" [rowKey]="rowKey"
      [sort]="sort()" (sortChange)="onSort($event)" />
  `,
})
export class SortableTable {
  readonly rowKey = (r: Member) => r.id;
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', role: 'Editor', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', sortable: true, accessor: (r) => r.name },
    { id: 'role', header: 'Role', sortable: true, accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, sortable: true, accessor: (r) => r.tasks },
  ];

  // server-side: sort state + the rows your backend returns in that order
  readonly sort = signal<DataTableSort[]>([{ id: 'name', dir: 'asc' }]);
  readonly serverRows = signal<Member[]>([]);
  onSort(next: DataTableSort[]) {
    this.sort.set(next);
    // re-fetch: this.api.members(next).subscribe(rows => this.serverRows.set(rows));
  }
}

import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';

type Member = { id: string; name: string; role: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', filterable: true, accessor: (r) => r.name },
  { id: 'role', header: 'Role', filterable: true, filterType: 'select', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, filterable: true, accessor: (r) => r.tasks },
];

export function FilterableTable() {
  return <DataTable columns={columns} data={members} rowKey={(r) => r.id} />;
}

import { useMemo, useState } from 'react';
import { DataTable, type DataTableColumn, type ColumnFilter } from '@bpdm/ui/data-table';

type Member = { id: string; name: string; role: string; tasks: number };
const ALL: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', filterable: true, accessor: (r) => r.name },
  { id: 'role', header: 'Role', filterable: true, filterType: 'select', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, filterable: true, accessor: (r) => r.tasks },
];
const FIELD: Record<string, (m: Member) => string | number> = {
  name: (m) => m.name,
  role: (m) => m.role,
  tasks: (m) => m.tasks,
};

// stand-in for your backend — apply the active filters (replace with a fetch)
function filterMembers(filters: Record<string, ColumnFilter>): Member[] {
  const active = Object.entries(filters).filter(([, f]) => f.rules.some((r) => r.value !== ''));
  if (!active.length) return ALL;
  return ALL.filter((m) =>
    active.every(([id, f]) => {
      const raw = FIELD[id]?.(m);
      const res = f.rules
        .filter((r) => r.value !== '')
        .map((r) => {
          const cell = String(raw ?? '').toLowerCase();
          const v = r.value.toLowerCase();
          switch (r.op) {
            case 'equals': return cell === v;
            case 'notEquals': return cell !== v;
            case 'startsWith': return cell.startsWith(v);
            case 'endsWith': return cell.endsWith(v);
            case 'gt': return Number(raw) > Number(r.value);
            case 'gte': return Number(raw) >= Number(r.value);
            case 'lt': return Number(raw) < Number(r.value);
            case 'lte': return Number(raw) <= Number(r.value);
            default: return cell.includes(v);
          }
        });
      return f.matchMode === 'all' ? res.every(Boolean) : res.some(Boolean);
    }),
  );
}

export function ServerFilteredTable() {
  const [filters, setFilters] = useState<Record<string, ColumnFilter>>({});
  const rows = useMemo(() => filterMembers(filters), [filters]);
  return (
    <DataTable columns={columns} data={rows} rowKey={(r) => r.id} filters={filters} onFiltersChange={setFilters} />
  );
}

import { Component } from '@angular/core';
import { BpdmDataTable, type DataTableColumn } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };

@Component({
  selector: 'filterable-table',
  imports: [BpdmDataTable],
  template: `<bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" />`,
})
export class FilterableTable {
  readonly rowKey = (r: Member) => r.id;
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', filterable: true, accessor: (r) => r.name },
    { id: 'role', header: 'Role', filterable: true, filterType: 'select', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, filterable: true, accessor: (r) => r.tasks },
  ];
}

import { Component, signal, computed } from '@angular/core';
import { BpdmDataTable, type DataTableColumn, type ColumnFilter } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };
const ALL: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const FIELD: Record<string, (m: Member) => string | number> = {
  name: (m) => m.name,
  role: (m) => m.role,
  tasks: (m) => m.tasks,
};

@Component({
  selector: 'server-filtered-table',
  imports: [BpdmDataTable],
  template: `
    <bpdm-data-table
      [columns]="columns" [data]="rows()" [rowKey]="rowKey"
      [filters]="filters()" (filtersChange)="onFilters($event)" />
  `,
})
export class ServerFilteredTable {
  readonly rowKey = (r: Member) => r.id;
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', filterable: true, accessor: (r) => r.name },
    { id: 'role', header: 'Role', filterable: true, filterType: 'select', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, filterable: true, accessor: (r) => r.tasks },
  ];

  readonly filters = signal<Record<string, ColumnFilter>>({});
  onFilters(next: Record<string, ColumnFilter>) {
    this.filters.set(next);
  }

  // stand-in for your backend — apply the active filters (replace with a fetch)
  readonly rows = computed(() => {
    const active = Object.entries(this.filters()).filter(([, f]) => f.rules.some((r) => r.value !== ''));
    if (!active.length) return ALL;
    return ALL.filter((m) =>
      active.every(([id, f]) => {
        const raw = FIELD[id]?.(m);
        const res = f.rules
          .filter((r) => r.value !== '')
          .map((r) => {
            const cell = String(raw ?? '').toLowerCase();
            const v = r.value.toLowerCase();
            switch (r.op) {
              case 'equals': return cell === v;
              case 'notEquals': return cell !== v;
              case 'startsWith': return cell.startsWith(v);
              case 'endsWith': return cell.endsWith(v);
              case 'gt': return Number(raw) > Number(r.value);
              case 'gte': return Number(raw) >= Number(r.value);
              case 'lt': return Number(raw) < Number(r.value);
              case 'lte': return Number(raw) <= Number(r.value);
              default: return cell.includes(v);
            }
          });
        return f.matchMode === 'all' ? res.every(Boolean) : res.some(Boolean);
      }),
    );
  });
}

import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';

type Member = { id: string; name: string; role: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

export function SearchableTable() {
  return (
    <DataTable columns={columns} data={members} rowKey={(r) => r.id} searchable searchPlaceholder="Search members…" />
  );
}

import { useMemo, useState } from 'react';
import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';

type Member = { id: string; name: string; role: string; tasks: number };
const ALL: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

// stand-in for your backend — replace with a (debounced) fetch
function searchMembers(q: string): Member[] {
  const query = q.trim().toLowerCase();
  if (!query) return ALL;
  return ALL.filter((m) => [m.name, m.role].some((v) => v.toLowerCase().includes(query)));
}

export function ServerSearchTable() {
  const [q, setQ] = useState('');
  const rows = useMemo(() => searchMembers(q), [q]);
  return (
    <DataTable
      columns={columns}
      data={rows}
      rowKey={(r) => r.id}
      searchable
      searchPlaceholder="Search members…"
      searchValue={q}
      onSearchChange={setQ}
    />
  );
}

import { Component } from '@angular/core';
import { BpdmDataTable, type DataTableColumn } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };

@Component({
  selector: 'searchable-table',
  imports: [BpdmDataTable],
  template: `<bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" searchable searchPlaceholder="Search members…" />`,
})
export class SearchableTable {
  readonly rowKey = (r: Member) => r.id;
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ];
}

import { Component, signal, computed } from '@angular/core';
import { BpdmDataTable, type DataTableColumn } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };
const ALL: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];

@Component({
  selector: 'server-search-table',
  imports: [BpdmDataTable],
  template: `
    <bpdm-data-table
      [columns]="columns" [data]="rows()" [rowKey]="rowKey"
      searchable searchPlaceholder="Search members…"
      [searchValue]="q()" (searchChange)="onSearch($event)" />
  `,
})
export class ServerSearchTable {
  readonly rowKey = (r: Member) => r.id;
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ];

  readonly q = signal('');
  // stand-in for your backend — replace with a (debounced) API call
  readonly rows = computed(() => {
    const query = this.q().trim().toLowerCase();
    if (!query) return ALL;
    return ALL.filter((m) => [m.name, m.role].some((v) => v.toLowerCase().includes(query)));
  });
  onSearch(value: string) {
    this.q.set(value);
  }
}

import { useState } from 'react';
import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';

type Row = { id: string; name: string; role: string };
const columns: DataTableColumn<Row>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
];

// 1 — Client: hand the table everything; it pages internally.
export function ClientPaged({ rows }: { rows: Row[] }) {
  return (
    <DataTable
      columns={columns}
      data={rows}
      rowKey={(r) => r.id}
      pagination={{ pageSize: 8, pageSizeOptions: [8, 16, 32] }}
    />
  );
}

// 2 — Server (offset): fetch the current page; supply `total` + handle `onPageChange`.
export function ServerPaged() {
  const [page, setPage] = useState(1);
  const pageSize = 8;
  const { rows, total } = useMembersPage(page, pageSize); // your data hook
  return (
    <DataTable
      columns={columns}
      data={rows}
      rowKey={(r) => r.id}
      pagination={{ mode: 'server', page, pageSize, total, onPageChange: setPage }}
    />
  );
}

// 3 — Cursor: prev/next only — for cursor-based APIs (no page numbers).
export function CursorPaged() {
  const { rows, hasNextPage, hasPreviousPage, next, prev, rangeLabel } = useCursor();
  return (
    <DataTable
      columns={columns}
      data={rows}
      rowKey={(r) => r.id}
      pagination={{
        mode: 'cursor',
        hasNextPage,
        hasPreviousPage,
        onNextPage: next,
        onPreviousPage: prev,
        rangeLabel,
      }}
    />
  );
}

import { Component, computed, signal } from '@angular/core';
import { BpdmDataTable, type DataTableColumn } from '@bpdm/ng';

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

@Component({
  selector: 'paged-table',
  imports: [BpdmDataTable],
  template: `
    <!-- 1 — Client: the table pages internally -->
    <bpdm-data-table [columns]="columns" [data]="rows()" [rowKey]="rowKey" [pagination]="clientPg" />

    <!-- 2 — Server (offset): bind a computed config; you fetch each page -->
    <bpdm-data-table [columns]="columns" [data]="pageRows()" [rowKey]="rowKey" [pagination]="serverPg()" />

    <!-- 3 — Cursor: prev/next only -->
    <bpdm-data-table [columns]="columns" [data]="pageRows()" [rowKey]="rowKey" [pagination]="cursorPg()" />
  `,
})
export class PagedTable {
  readonly rowKey = (r: Row) => r.id;
  readonly columns: DataTableColumn<Row>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
  ];

  // client
  readonly clientPg = { pageSize: 8, pageSizeOptions: [8, 16, 32] };

  // server (offset) — `page` drives your data fetch; `total` comes from the backend
  readonly page = signal(1);
  readonly total = signal(0);
  readonly serverPg = computed(() => ({
    mode: 'server' as const,
    page: this.page(),
    pageSize: 8,
    total: this.total(),
    onPageChange: (p: number) => this.page.set(p),
  }));

  // cursor — prev/next only
  readonly hasNext = signal(true);
  readonly hasPrev = signal(false);
  readonly cursorPg = computed(() => ({
    mode: 'cursor' as const,
    hasNextPage: this.hasNext(),
    hasPreviousPage: this.hasPrev(),
    onNextPage: () => this.loadNext(),
    onPreviousPage: () => this.loadPrev(),
  }));

  // your data layer fills these
  rows = signal<Row[]>([]);
  pageRows = signal<Row[]>([]);
  loadNext() {}
  loadPrev() {}
}

import { useState, type Key } from 'react';
import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';

type Member = { id: string; name: string; role: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

export function SelectableTable() {
  const [keys, setKeys] = useState<Key[]>([]);
  return (
    <>
      {keys.length > 0 && <p>{keys.length} selected</p>}
      <DataTable
        columns={columns}
        data={members}
        rowKey={(r) => r.id}
        selectable
        selectedKeys={keys}
        onSelectionChange={(next) => setKeys(next)}
      />
    </>
  );
}

import { Component, signal } from '@angular/core';
import { BpdmDataTable, type DataTableColumn } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };

@Component({
  selector: 'selectable-table',
  imports: [BpdmDataTable],
  template: `
    @if (keys().length) { <p>{{ keys().length }} selected</p> }
    <bpdm-data-table
      [columns]="columns"
      [data]="members"
      [rowKey]="rowKey"
      selectable
      [selectedKeys]="keys()"
      (selectionChange)="keys.set($event.keys)"
    />
  `,
})
export class SelectableTable {
  readonly rowKey = (r: Member) => r.id;
  readonly keys = signal<(string | number)[]>([]);
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ];
}

import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';

type Member = { id: string; name: string; role: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

export function ClickableTable() {
  return (
    <DataTable columns={columns} data={members} rowKey={(r) => r.id} onRowClick={(row) => console.log(row.name)} />
  );
}

import { Component } from '@angular/core';
import { BpdmDataTable, type DataTableColumn } from '@bpdm/ng';

type Member = { id: string; name: string; role: string; tasks: number };

@Component({
  selector: 'clickable-table',
  imports: [BpdmDataTable],
  template: `<bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" [onRowClick]="open" />`,
})
export class ClickableTable {
  readonly rowKey = (r: Member) => r.id;
  readonly open = (row: Member) => console.log(row.name);
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', role: 'Owner', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', role: 'Editor', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', role: 'Viewer', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ];
}

import { DataTable, type DataTableColumn } from '@bpdm/ui/data-table';
import { Avatar } from '@bpdm/ui/avatar';
import { Badge } from '@bpdm/ui/badge';
import { ProgressBar } from '@bpdm/ui/progress';

type Member = { id: string; name: string; email: string; role: string; team: string; tasks: number };
const members: Member[] = [
  { id: 'm1', name: 'Milo Lindberg', email: 'milo@bpdm.dev', role: 'Owner', team: 'Engineering', tasks: 128 },
  { id: 'm2', name: 'Sara Kovac', email: 'sara@bpdm.dev', role: 'Editor', team: 'Engineering', tasks: 86 },
  { id: 'm3', name: 'Noah Bauer', email: 'noah@bpdm.dev', role: 'Viewer', team: 'Support', tasks: 12 },
];
const columns: DataTableColumn<Member>[] = [
  { id: 'name', header: 'Name', accessor: (r) => r.name },
  { id: 'role', header: 'Role', accessor: (r) => r.role },
  { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
];

export function ExpandableTable() {
  return (
    <DataTable
      columns={columns}
      data={members}
      rowKey={(r) => r.id}
      expandMode="single"
      renderExpanded={(r) => (
        <div className="flex max-w-2xl flex-col gap-5 px-2 py-2 sm:flex-row sm:items-center sm:gap-8">
          <div className="flex items-center gap-3">
            <Avatar name={r.name} size="lg" />
            <div className="leading-tight">
              <div className="font-medium">{r.name}</div>
              <div className="text-xs text-muted-foreground">{r.email}</div>
              <div className="mt-2 flex gap-1.5">
                <Badge variant="neutral" appearance="soft">{r.role}</Badge>
                <Badge variant="secondary" appearance="soft">{r.team}</Badge>
              </div>
            </div>
          </div>
          <div className="w-full sm:w-56">
            <ProgressBar
              value={r.tasks}
              max={240}
              variant="primary"
              showValue
              label="Tasks completed"
              format={(v, m) => `${v}/${m}`}
            />
          </div>
        </div>
      )}
    />
  );
}

import { Component } from '@angular/core';
import { BpdmDataTable, BpdmAvatar, BpdmBadge, BpdmProgressBar, type DataTableColumn } from '@bpdm/ng';

type Member = { id: string; name: string; email: string; role: string; team: string; tasks: number };

@Component({
  selector: 'expandable-table',
  imports: [BpdmDataTable, BpdmAvatar, BpdmBadge, BpdmProgressBar],
  template: `
    <bpdm-data-table [columns]="columns" [data]="members" [rowKey]="rowKey" expandMode="single" [expandedTemplate]="detail" />

    <ng-template #detail let-row>
      <div class="flex max-w-2xl flex-col gap-5 px-2 py-2 sm:flex-row sm:items-center sm:gap-8">
        <div class="flex items-center gap-3">
          <bpdm-avatar [name]="row.name" size="lg" />
          <div class="leading-tight">
            <div class="font-medium">{{ row.name }}</div>
            <div class="text-xs text-muted-foreground">{{ row.email }}</div>
            <div class="mt-2 flex gap-1.5">
              <bpdm-badge variant="neutral" appearance="soft">{{ row.role }}</bpdm-badge>
              <bpdm-badge variant="secondary" appearance="soft">{{ row.team }}</bpdm-badge>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-56">
          <bpdm-progress-bar [value]="row.tasks" [max]="240" variant="primary" showValue label="Tasks completed" />
        </div>
      </div>
    </ng-template>
  `,
})
export class ExpandableTable {
  readonly rowKey = (r: Member) => r.id;
  readonly members: Member[] = [
    { id: 'm1', name: 'Milo Lindberg', email: 'milo@bpdm.dev', role: 'Owner', team: 'Engineering', tasks: 128 },
    { id: 'm2', name: 'Sara Kovac', email: 'sara@bpdm.dev', role: 'Editor', team: 'Engineering', tasks: 86 },
    { id: 'm3', name: 'Noah Bauer', email: 'noah@bpdm.dev', role: 'Viewer', team: 'Support', tasks: 12 },
  ];
  readonly columns: DataTableColumn<Member>[] = [
    { id: 'name', header: 'Name', accessor: (r) => r.name },
    { id: 'role', header: 'Role', accessor: (r) => r.role },
    { id: 'tasks', header: 'Tasks', numeric: true, accessor: (r) => r.tasks },
  ];
}