Skip to content
flood.md
v0.2.10

Table bulk actions

Host-owned table selection, action scope and local confirmation from existing components.

Compose DataTable, Toolbar, Button and AlertDialog with host-owned selection and operation state. There is no separate BulkActions import. The runnable example uses the same typed source as this page and only changes an in-memory collection.

Choose the operation scope

DataTable receives the complete local collection. Its select-all checkbox selects the current page; selected IDs on other pages are retained. The action uses all selected eligible IDs in that collection. A protected row cannot be selected. Remote selection, permissions, transport and server results remain host-owned; this recipe does not imply selection of every remote search result.

Read workflow:composition, workflow:data-display and workflow:navigation for the composition and toolbar. Apply feedback/accessibility/verification when checking the operation. The knowledge catalog links the actual component contracts.

TSX
"use client";
import {useState} from 'react';
import {AlertDialog, Button, DataTable, Inline, Section, Stack, StatusIndicator, Surface, Text, Toolbar} from '@flood-md/react';

const initialProjects = [
  {id:'system',name:'Design system'}, {id:'website',name:'Website'},
  {id:'docs',name:'Documentation'}, {id:'research',name:'Research'},
  {id:'preview',name:'Component preview'}, {id:'locked',name:'Protected project'},
];

/** Local host composition; no backend operation or new BulkActions export. */
export function TableBulkActions() {
  const [projects,setProjects] = useState(initialProjects);
  const [selected,setSelected] = useState<string[]>([]);
  const [pending,setPending] = useState<string[] | null>(null);
  const [message,setMessage] = useState('');
  const [page,setPage] = useState(1);
  const eligible = new Set(projects.filter(project=>project.id!=='locked').map(project=>project.id));
  const selection = selected.filter(id=>eligible.has(id));
  function archive() {
    const ids = new Set(pending ?? []);
    const count = projects.filter(project=>ids.has(project.id)&&eligible.has(project.id)).length;
    setProjects(projects.filter(project=>!ids.has(project.id)||!eligible.has(project.id)));
    setSelected([]);setPending(null);setPage(1);
    setMessage(`${count} ${count===1?'project archived':'projects archived'}.`);
  }
  return <Surface padding="4">
    <Section title="Projects">
      <Stack gap="4">
        <Inline gap="3">
          <Text size="compact">{selection.length} selected</Text>
          <Toolbar label="Bulk project actions">
            <Inline gap="2">
              <AlertDialog open={pending!==null} onOpenChange={open=>setPending(open?[...selection]:null)}
                trigger={props=><Button {...props} size="sm" variant="subtle" disabled={!selection.length}>Archive projects</Button>}
                title="Archive selected projects?" description={`${pending?.length??0} selected projects will leave this list.`}
                confirmLabel="Archive selected" cancelLabel="Keep projects" confirmDisabled={!pending?.length} onConfirm={archive} />
              <Button size="sm" variant="ghost" disabled={!selection.length} onClick={()=>setSelected([])}>Clear selection</Button>
            </Inline>
          </Toolbar>
        </Inline>
        <DataTable caption="Project list" hideCaption selectable pageSize={3} page={page} onPageChange={setPage} minWidth="28rem"
          columns={[{id:'name',label:'Project',sortable:true},{id:'scope',label:'Scope'}]}
          rows={projects.map(project=>({id:project.id,label:project.name,selectionDisabled:project.id==='locked',cells:{name:project.name,scope:project.id==='locked'?'Protected':'Standard'}}))}
          selectedIds={selection} onSelectionChange={setSelected} />
        <Inline gap="3">
          <Button size="sm" variant="subtle" onClick={()=>{setProjects(initialProjects);setSelected([]);setPending(null);setPage(1);setMessage('Starting collection restored.');}}>Reset</Button>
          {message && <StatusIndicator size="sm" label={message} tone="success" announce />}
        </Inline>
      </Stack>
    </Section>
  </Surface>;
}

Ownership and checks

Capture the proposed IDs when opening confirmation. Cancel must preserve rows and selection. Confirm changes only the eligible IDs in that captured proposal. The example then clears selection, reports the actual local count and allows restoring the initial collection. A real asynchronous host needs separate pending, failure and retry handling; do not report success before an accepted result.

Check no selection, select-all on one page, selection across pages, the protected row, cancel and confirm, reset, keyboard focus restoration and narrow layout. Use the table's ScrollArea rather than letting its minimum width overflow the page. StatusIndicator owns the action result; do not replace it with custom status markup. Scope and rendered quality require actual host checks, not just a passing knowledge lookup.

Page MarkdownAgent skill