DataTableBulkActions

DataTableBulkActions(props): Element | null

Defined in: packages/react/src/ui/data-table/DataTableBulkActions.tsx:56

Inline bulk-action group — count, Delete, Clear — rendered wherever its caller places it (Decision 22: inline in the toolbar area, left of Filter, never a floating overlay).

Sized by the @container/list root, not md: — this group can appear inside a narrow split pane at any viewport width (list-view-overhaul Step 16). Below @lg/list it fills the full row width (it stands in for the whole Filter row there, Decision 22’s last sentence) with larger touch targets, and Delete/Clear drop to icon-only — a single <Button> instance per action whose aria-label stays fixed (“Delete”/“Clear selection”) while only an inner text <span> toggles visibility via CSS, so there is exactly one accessible “Delete”/“Clear” control at any width (never a duplicated trigger with the same accessible name, the trap ListViewToolbar’s own ⋯ fold stages had to design around).

Rendered standalone by MediaCollectionListView (its own selection state, no surrounding toolbar group of its own) only when a selection is non-empty and the caller has delete access. ListViewToolbar’s own list.bulkActions slot (vex.list.bulk.delete, ListViewBulkDeleteAction) does NOT use this component — it already sits inside ListViewToolbar’s own count/“Select all N loaded”/Clear group, so it renders a bare Delete button instead; wrapping it in this self-contained card too produced two visibly separate bulk bars.

Parameters

props

DataTableBulkActionsProps

Component props.

Returns

Element | null

The inline action group, or null when nothing is selected.

Example

<DataTableBulkActions
  selectedCount={selectedIds.length}
  onDelete={() => setDeleteModalOpen(true)}
  onClear={() => setRowSelection({})}
  isDeleting={isDeleting}
/>