---
title: "SelectionBar"
description: "The actions for the rows selected in a list: how many are selected, what can be done with all of them at once and a way to clear the selection, floating at the bottom of the screen while the list scrolls."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SelectionBar

## Bulk actions

Select rows with their boxes, or all of them from the header; the bar leaves when none is.

```tsx
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 />
```

## Source

The examples above are [`src/blocks/selection-bar/selection-bar.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/selection-bar/selection-bar.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/selection-bar/index.mdx