Action bar

When to use

Used automatically by table once it's set to be selectable and at least one row is checked. See Table: Selection and the floating action bar. Use it directly, on its own, only when building a custom selection UI outside a table (a card grid with checkboxes, say) that wants the exact same bulk-action chrome.

Install & usage

npm install @eunomia/elements

import "@eunomia/elements/table-action-bar.js";

<eun-table-action-bar id="bar"></eun-table-action-bar>

<script type="module">
  const bar = document.querySelector("#bar");
  bar.selectedCount = 3;
  bar.totalCount = 8;
  bar.actions = [
    { key: "archive", label: "Archive", variant: "critical", icon: "archive" },
  ];
  bar.onSelectAll = () => {
    /* select/deselect every row in your own list */
  };
  bar.onClose = () => {
    /* clear your own selection */
  };
  bar.addEventListener("euntableaction", (event) => {
    if (event.key === "archive") {
      archiveSelected();
    }
  });
</script>

Properties

Plain button actions

The default shape: one or more eun-button actions, variant: "danger" rendering critical/transparent instead of the default flat style.

bar.actions = [
  { key: "duplicate", label: "Duplicate", icon: "content_copy" },
  { key: "delete", label: "Delete", variant: "critical", icon: "delete" },
];

A dropdown action

Any actions entry with a dropdown array renders as a eun-dropdown-button instead of a plain button, and euntableaction still fires, carrying the chosen option's key as optionKey.

bar.actions = [
  {
    key: "export",
    label: "Export",
    icon: "file_download",
    dropdown: [
      { key: "csv", label: "Export as CSV" },
      { key: "pdf", label: "Export as PDF" },
    ],
  },
];
bar.addEventListener("euntableaction", (event) => {
  if (event.key === "export") {
    exportSelection(event.optionKey); // "csv" | "pdf"
  }
});

Customized

Every visual piece is a --table-action-bar-* custom property, so restyle it to match a brand accent instead of the neutral default.

<eun-table-action-bar
  style="
    --table-action-bar-background: var(--eun-color-primary-500, #3d6fff);
    --table-action-bar-border-color: var(--eun-color-primary-500, #3d6fff);
    --table-action-bar-shadow: var(--eun-shadow-l, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    color: var(--eun-color-on-primary-500, #ffffff);
  "
></eun-table-action-bar>

Extra slotted content

actions covers a button or a dropdown, always, so for anything else in the center region (a status message, a plain link, a custom control), the default slot renders it right after them, as plain markup.

<eun-table-action-bar>
  <eun-link href="/activity">View activity</eun-link>
</eun-table-action-bar>

role="toolbar", with aria-label from toolbarAriaLabel (default "Selection actions"). The select-all button's accessible label includes the total row count and reflects whether it currently reads "Select all" or "Deselect all", while the close button's accessible label comes from closeAriaLabel (default "Clear selection").

The count badge (visually "N selected") carries its own label, which flips eun-badge from its default aria-hidden (purely decorative) to role="status" (a live region), so the count is both exposed to assistive tech and automatically re-announced every time it changes (a row is added to or removed from the selection), not just readable once on first encounter.

Portaled directly onto document.body, outside eun-table's own DOM subtree entirely: the same technique this library's tooltips/dropdown menus use to always render above everything else, regardless of any overflow/transform on an ancestor.