SelectionBar

import { ArchiveIcon, DownloadSimpleIcon } from '@phosphor-icons/react';
import type { ColumnDef } from '@tanstack/react-table';
import { useState } from 'react';
import type { Selection } from 'react-aria-components';
import { Button, DataTable, SelectionBar } from '@arbol-ai/ui';
import type { DataTableFeatures } from '@arbol-ai/ui';

interface Invitation {
  id: string;
  email: string;
  role: string;
}

const INVITATIONS: Invitation[] = [
  { id: 'i1', email: 'ana.torres@example.com', role: 'Front desk' },
  { id: 'i2', email: 'luis.gomez@example.com', role: 'Admin' },
  { id: 'i3', email: 'marta.ruiz@example.com', role: 'Front desk' },
  { id: 'i4', email: 'carlos.pena@example.com', role: 'Viewer' },
];

const COLUMNS: ColumnDef<DataTableFeatures, Invitation>[] = [
  { accessorKey: 'email', header: 'Email', meta: { fill: true } },
  { accessorKey: 'role', header: 'Role', size: 140 },
];

const BulkExample = () => {
  const [selected, setSelected] = useState<Selection>(new Set(['i2', 'i3']));
  return (
    <div className="flex flex-col gap-3">
      <DataTable
        aria-label="Invitations"
        columns={COLUMNS}
        data={INVITATIONS}
        getRowId={(invitation) => invitation.id}
        layout="fixed"
        onSelectionChange={setSelected}
        selectedKeys={selected}
        selectionMode="multiple"
      />
      <SelectionBar
        count={selected === 'all' ? INVITATIONS.length : selected.size}
        onClear={() => {
          setSelected(new Set());
        }}
      >
        <Button size="sm" variant="outline">
          <DownloadSimpleIcon aria-hidden /> Export
        </Button>
        <Button size="sm" variant="outline">
          <ArchiveIcon aria-hidden /> Revoke
        </Button>
      </SelectionBar>
    </div>
  );
};

<BulkExample />