@eifi1/ui-kit 0.11.0 → 0.12.0

package/src/components/data-table-cells.tsx

@@ -0,0 +1,119 @@
+import type { ReactNode } from "react";
+import { Check, Minus, X } from "lucide-react";
+import { cn } from "../lib/cn";
+import { useKitLabels } from "../i18n/kit-labels";
+import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
+import type { DataTableColumn } from "./data-table";
+
+export interface BooleanMarkProps {
+  /** `true` → a check, `false` → a cross (or a dash, see `falseAs`), `null` /
+   *  `undefined` → a dash. */
+  value: boolean | null | undefined;
+  /**
+   * How `false` is drawn. `"cross"` (default) when "no" is news worth seeing — a
+   * failed check, a missing document. `"dash"` for a column that is mostly `false` and
+   * reads as a list of the `true` ones (kastlan's BoolCell): a column of crosses is
+   * noise. The screen-reader text says "No" either way.
+   */
+  falseAs?: "cross" | "dash";
+  /** The spoken words, over `dataTable.booleanTrue` / `booleanFalse` / `booleanUnset`
+   *  from `<UiKitProvider labels>`. */
+  labels?: Partial<Pick<DataTableLabels, "booleanTrue" | "booleanFalse" | "booleanUnset">>;
+  className?: string;
+}
+
+/**
+ * A yes/no value in a table cell: a green check, a muted cross, or a faint dash for
+ * "not set" — with the word for a screen reader, since a glyph alone is announced as
+ * nothing at all (or as "image").
+ *
+ * kastlan's `BoolCell` (shared/components/data-table/bool-cell.tsx) drew the icons with
+ * no text, so a reader walking the table heard an empty cell for every row; the apps'
+ * Yes/No chips were the other answer, and too loud for a column of them.
+ */
+export function BooleanMark({ value, falseAs = "cross", labels: labelsProp, className }: BooleanMarkProps) {
+  const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
+  const state = value === true ? "true" : value === false ? "false" : "unset";
+  const text =
+    state === "true" ? labels.booleanTrue : state === "false" ? labels.booleanFalse : labels.booleanUnset;
+  const Icon = state === "true" ? Check : state === "false" && falseAs === "cross" ? X : Minus;
+  return (
+    <span data-value={state} className={cn("inline-flex items-center align-middle", className)}>
+      <Icon
+        aria-hidden
+        className={cn(
+          "size-4",
+          state === "true"
+            ? "text-[var(--success)]"
+            : state === "false" && falseAs === "cross"
+              ? "text-[var(--text-muted)]"
+              : "text-[var(--text-placeholder)]",
+        )}
+      />
+      <span className="sr-only">{text}</span>
+    </span>
+  );
+}
+
+export interface BooleanColumnOptions<T> {
+  key: string;
+  header: ReactNode;
+  /** The value of this row. */
+  value: (row: T) => boolean | null | undefined;
+  /** See {@link BooleanMarkProps.falseAs}. */
+  falseAs?: "cross" | "dash";
+  /** Sortable, `true` first on the first click (a column is sorted to find the yes
+   *  rows). Default true. */
+  sortable?: boolean;
+  /**
+   * A select filter over the column, with these option labels — pass them translated.
+   * Omitted: no filter. The option values are `"true"` / `"false"` (and `"unset"` when
+   * `unset` is given), which is also what `filterHref` takes for this column.
+   */
+  filterOptions?: { true: string; false: string; unset?: string };
+  /** Further column settings (`mobileHidden`, `headClassName`, …), merged over. */
+  column?: Partial<DataTableColumn<T>>;
+}
+
+/**
+ * A {@link DataTableColumn} for a yes/no field: {@link BooleanMark} cells,
+ * sortable with `true` first, and optionally a Yes/No select filter.
+ */
+export function booleanColumn<T>({
+  key,
+  header,
+  value,
+  falseAs,
+  sortable = true,
+  filterOptions,
+  column,
+}: BooleanColumnOptions<T>): DataTableColumn<T> {
+  const asKey = (row: T) => {
+    const v = value(row);
+    return v === true ? "true" : v === false ? "false" : "unset";
+  };
+  return {
+    key,
+    header,
+    cell: (row) => <BooleanMark value={value(row)} falseAs={falseAs} />,
+    // 0 for yes, 1 for no, null for unset (which the table sorts last either way).
+    sortBy: sortable
+      ? (row) => {
+          const v = value(row);
+          return v == null ? null : v ? 0 : 1;
+        }
+      : undefined,
+    filter: filterOptions
+      ? {
+          type: "select",
+          getValue: asKey,
+          options: [
+            { value: "true", label: filterOptions.true },
+            { value: "false", label: filterOptions.false },
+            ...(filterOptions.unset !== undefined ? [{ value: "unset", label: filterOptions.unset }] : []),
+          ],
+        }
+      : undefined,
+    ...column,
+  };
+}

package/src/components/data-table-filters.ts

@@ -174,3 +174,80 @@ export function decodeFilterValueOfType(type: FilterValue["type"], raw: string):
 export function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue {
   return decodeFilterValueOfType(filter.type, raw);
 }
+
+// ---------- Filter builders ----------
+//
+// Terse builders for `DataTableColumn.filter`, lifted from kastlan's column-filters.ts,
+// which every converted list page imports. The one that earns its keep is `selectFilter`:
+// in `serverPagination` mode a select filter MUST declare its options (the table would
+// otherwise derive them from the rows of the page on screen), and the options an app has
+// to hand are usually a translated `{ value: label }` map.
+
+/** A free-text filter over `getValue`. */
+export function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T> {
+  return { type: "text", getValue };
+}
+
+/**
+ * A multi-select filter. `options` is an options array, or a `{ value: label }` record
+ * (a translated status map) — kept in its key order. Left out, the table derives the
+ * options from the rows it holds.
+ */
+export function selectFilter<T>(
+  getValue: (row: T) => string,
+  options?: { value: string; label?: string }[] | Record<string, string>,
+): ColumnFilter<T> {
+  const opts = Array.isArray(options)
+    ? options
+    : options
+      ? Object.entries(options).map(([value, label]) => ({ value, label }))
+      : undefined;
+  return { type: "select", getValue, options: opts };
+}
+
+/** A from/to date filter over an ISO date (or date-time) string. */
+export function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T> {
+  return { type: "date", getValue };
+}
+
+/** A min/max (and absolute-value) filter over a number. */
+export function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T> {
+  return { type: "number", getValue };
+}
+
+/**
+ * A link to a list page with one column filter already applied — in the table's own URL
+ * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or
+ * {@link useTableUrlState}) reads on mount. kastlan's `buildListUrl`, which had to
+ * restate the `f.` prefix to do it.
+ *
+ * `value` is a string for a text filter, an array for a select filter, or any
+ * {@link FilterValue}. A filter that narrows nothing returns `path` unchanged. A `path`
+ * that already carries a query keeps it; a `#fragment` stays at the end.
+ *
+ *     filterHref("/units", "status", ["vacant"]) // "/units?f.status=vacant"
+ */
+export function filterHref(
+  path: string,
+  column: string,
+  value: string | string[] | FilterValue,
+  /** The target table's `urlSync` prefix, if it has one (`{ prefix: "inv." }` →
+   *  `inv.f.<column>`). */
+  options?: { prefix?: string },
+): string {
+  const state: FilterValue =
+    typeof value === "string"
+      ? { type: "text", q: value }
+      : Array.isArray(value)
+        ? { type: "select", values: value }
+        : value;
+  const encoded = encodeFilterValue(state);
+  if (encoded == null) return path;
+  const hashAt = path.indexOf("#");
+  const base = hashAt >= 0 ? path.slice(0, hashAt) : path;
+  const hash = hashAt >= 0 ? path.slice(hashAt) : "";
+  const queryAt = base.indexOf("?");
+  const params = new URLSearchParams(queryAt >= 0 ? base.slice(queryAt + 1) : "");
+  params.set(`${options?.prefix ?? ""}f.${column}`, encoded);
+  return `${queryAt >= 0 ? base.slice(0, queryAt) : base}?${params.toString()}${hash}`;
+}

package/src/components/data-table-labels.ts

@@ -69,6 +69,22 @@ export interface DataTableLabels {
   rowCount: (total: number) => string;
   /** The column-settings rail and its heading: "Columns (4/9)". */
   columnsCount: (visible: number, total: number) => string;
+
+  // ---- Empty state, row actions, boolean cells (0.12.0) ----
+
+  /** The body of a table with no rows and no `empty` prop of its own. A sentence, not
+   *  "—": a dash in the only row of a table reads as one row with a missing value. */
+  empty: string;
+  /** The accessible name of the `rowActions` column (its header is visually empty). */
+  actions: string;
+  /** The `kind: "edit"` row action's name — its tooltip and its swipe label. */
+  edit: string;
+  /** The `kind: "delete"` row action's name. */
+  delete: string;
+  /** What {@link BooleanMark} says to a screen reader for `true` / `false` / nothing. */
+  booleanTrue: string;
+  booleanFalse: string;
+  booleanUnset: string;
 }
 
 export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
@@ -120,6 +136,13 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   pageRange: (from, to, total) => `${from}–${to} / ${total}`,
   rowCount: (total) => `${total}`,
   columnsCount: (visible, total) => `Columns (${visible}/${total})`,
+  empty: "No entries",
+  actions: "Actions",
+  edit: "Edit",
+  delete: "Delete",
+  booleanTrue: "Yes",
+  booleanFalse: "No",
+  booleanUnset: "Not set",
 };
 
 /**

package/src/components/data-table.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -8,9 +8,11 @@ import {
   ChevronDown,
   ChevronRight,
   Filter,
+  Pencil,
+  Trash2,
   X,
 } from "lucide-react";
-import { Card, Spinner } from "./ui";
+import { Card, IconButton, Spinner } from "./ui";
 import { cn } from "../lib/cn";
 import {
   defaultFilterState,
@@ -239,8 +241,11 @@ export interface DataTableProps<T> {
    * shareable and bookmarkable. URL params used: `f.<column>`, `sort`, `p`, `ps`.
    * URL state takes precedence over localStorage on initial load. Requires the
    * consuming app to render inside a react-router Router.
+   *
+   * `{ prefix }` namespaces them, for two URL-synced tables on one page:
+   * `urlSync={{ prefix: "inv." }}` uses `inv.f.<column>`, `inv.sort`, `inv.p`, `inv.ps`.
    */
-  urlSync?: boolean;
+  urlSync?: TableUrlSync;
   /**
    * When true (desktop only), the table fills its parent's height and scrolls
    * INTERNALLY, with the header pinned — so the page itself doesn't add a second,
@@ -431,6 +436,98 @@ export interface DataTableProps<T> {
   /** Extra classes for the table's root element (the card, or with `frame={false}`
    *  the plain wrapper). Merged last, so a caller's margin or width wins. */
   className?: string;
+  /**
+   * Per-row actions: an actions column of icon buttons at the row's end on desktop,
+   * and the same actions as swipe actions on a phone card (where the column is not
+   * shown). kastlan's `ResourceListPage` appended this column by hand to every CRUD
+   * list — the edit pencil, the delete bin, a `useConfirm` before the delete, and a
+   * `stopPropagation` on each so a press did not also open the row.
+   *
+   * `kind: "edit"` / `"delete"` bring the icon, the label (`labels.edit` /
+   * `labels.delete`), the tone and the swipe side; any other action states its own
+   * `label` and `icon`. `confirm` is the hook-in for a confirmation: pass the kit's
+   * `useConfirm()` (or anything answering a boolean) and the action runs only on a yes.
+   *
+   *     const confirm = useConfirm();
+   *     rowActions={[
+   *       { kind: "edit", onAction: openEditor },
+   *       { kind: "delete", onAction: (r) => remove(r.id),
+   *         confirm: (r) => confirm({ title: t("delete", { name: r.name }), tone: "danger" }) },
+   *     ]}
+   *
+   * A function receives the row, for actions that differ per row. An explicit
+   * `mobileSwipeActions` wins over the swipes derived from here.
+   */
+  rowActions?: DataTableRowAction<T>[] | ((row: T) => DataTableRowAction<T>[]);
+  /**
+   * The bar above the table — a search field, filter chips, a create button. Inside
+   * the table's frame, above the header, on desktop and phone alike (resource-list
+   * pages set a search box in a `div` above the card, outside the frame it filters).
+   */
+  toolbar?: ReactNode;
+}
+
+/** One entry of {@link DataTableProps.rowActions}. */
+export interface DataTableRowAction<T> {
+  /** A preset: `"edit"` (pencil, `labels.edit`, swipes toward the END) or `"delete"`
+   *  (bin, `labels.delete`, danger tone, swipes toward the START). */
+  kind?: "edit" | "delete";
+  /** The action's name — its tooltip, accessible name and swipe label. Required
+   *  without a `kind`. */
+  label?: string;
+  /** The glyph. Required without a `kind`. */
+  icon?: ReactNode;
+  /** Runs after `confirm` (when given) has said yes. */
+  onAction: (row: T) => void;
+  /** Asked before `onAction`; a `false` (or a promise of one) cancels. */
+  confirm?: (row: T) => boolean | Promise<boolean>;
+  /** Default: `"danger"` for `kind: "delete"`, else `"default"`. */
+  tone?: "default" | "danger";
+  /** Leave the action out for this row. */
+  hidden?: (row: T) => boolean;
+  /** Why the action is locked for this row — the button stays focusable and says so,
+   *  and the row gets no swipe for it. See `IconButton`'s `disabledReason`. */
+  disabledReason?: (row: T) => ReactNode;
+  /** Which way the phone card is dragged to commit it, or `false` for no swipe.
+   *  Default: `"start"` for a danger action, `"end"` otherwise. */
+  swipe?: "start" | "end" | false;
+}
+
+/** The actions column's key. Not a column a caller declares, so it is kept out of the
+ *  column-settings panel. */
+const ROW_ACTIONS_KEY = "__rowActions";
+
+interface ResolvedRowAction<T> {
+  key: string;
+  label: string;
+  icon: ReactNode;
+  tone: "default" | "danger";
+  swipe: "start" | "end" | false;
+  action: DataTableRowAction<T>;
+}
+
+function resolveRowAction<T>(
+  action: DataTableRowAction<T>,
+  index: number,
+  labels: DataTableLabels,
+): ResolvedRowAction<T> {
+  const tone = action.tone ?? (action.kind === "delete" ? "danger" : "default");
+  return {
+    key: action.kind ?? `${index}:${action.label ?? ""}`,
+    label: action.label ?? (action.kind === "edit" ? labels.edit : action.kind === "delete" ? labels.delete : ""),
+    icon:
+      action.icon ??
+      (action.kind === "edit" ? <Pencil /> : action.kind === "delete" ? <Trash2 /> : null),
+    tone,
+    swipe: action.swipe ?? (tone === "danger" ? "start" : "end"),
+    action,
+  };
+}
+
+/** Ask, then act. */
+async function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {
+  if (action.confirm && !(await action.confirm(row))) return;
+  action.onAction(row);
 }
 
 /** See {@link DataTableProps.chrome}. */
@@ -516,7 +613,8 @@ function cleanAttrs(
  * header is not a string and whose key is not human-readable is a call site that
  * should pass a string header, and that is visible in what gets announced.
  */
-function columnLabel<T>(col: DataTableColumn<T>): string {
+function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {
+  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
   return typeof col.header === "string" ? col.header : col.key;
 }
 
@@ -528,6 +626,20 @@ function columnLabel<T>(col: DataTableColumn<T>): string {
 const OWN_CONTROL =
   'a[href],button,input,select,textarea,label,summary,[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="menuitem"],[role="option"],[contenteditable=""],[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
 
+/**
+ * Whether a click that reached `row`'s handler did not start in the row's own DOM.
+ *
+ * React bubbles an event through the COMPONENT tree, portals included: a popover, a
+ * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but
+ * still reports its clicks to every React ancestor — the row among them. So a click
+ * in a cell's portalled date picker opened the row it came from, and a page wrapped
+ * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's
+ * feedback page did, round its comments). The row owns the clicks on the row.
+ */
+function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {
+  return !(target instanceof Node) || !row.contains(target);
+}
+
 /** Whether an event on `row` started on a control nested inside it. */
 function fromOwnControl(target: EventTarget | null, row: HTMLElement): boolean {
   if (!(target instanceof Element)) return false;
@@ -617,9 +729,13 @@ function RowLink({
       // here happens before any descendant can silence the event; `stopPropagation`
       // does not undo a `preventDefault`.
       onClickCapture={(e) => {
+        // A click in a portal a descendant opened is not a click on the link: leave
+        // it (and a link inside it) alone. See `fromOutside`.
+        if (fromOutside(e.target, e.currentTarget)) return;
         if (isPlainLeftClick(e)) e.preventDefault();
       }}
       onClick={(e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
         if (!isPlainLeftClick(e)) {
           e.stopPropagation();
           return;
@@ -639,12 +755,12 @@ function RowLink({
 
 
 
-import { DEFAULT_PERSIST_PREFIX, useTableState } from "./use-table-state";
+import { DEFAULT_PERSIST_PREFIX, useTableState, type TableUrlSync } from "./use-table-state";
 import { useMobileReveal } from "./use-mobile-reveal";
 
 export function DataTable<T>({
   rows,
-  columns,
+  columns: columnsProp,
   rowKey,
   defaultPageSize = 25,
   onRowClick,
@@ -682,6 +798,8 @@ export function DataTable<T>({
   multiSort: multiSortProp,
   frame = true,
   className,
+  rowActions,
+  toolbar,
 }: DataTableProps<T>) {
   const compact = density === "compact";
   const minimal = chrome === "minimal";
@@ -711,6 +829,74 @@ export function DataTable<T>({
     [labelOverrides, labelsProp],
   );
   const locale = useKitLocale(localeProp);
+
+  // ---- Row actions ----
+  // The actions column is appended to the caller's columns rather than drawn as a
+  // second special case beside the selection column: it then gets the cell padding,
+  // the widths and the phone rules (`mobileHidden`) every other column gets.
+  const rowActionsFor = useCallback(
+    (row: T): ResolvedRowAction<T>[] =>
+      rowActions
+        ? (typeof rowActions === "function" ? rowActions(row) : rowActions)
+            .filter((a) => !a.hidden?.(row))
+            .map((a, i) => resolveRowAction(a, i, labels))
+        : [],
+    [rowActions, labels],
+  );
+  const columns = useMemo<DataTableColumn<T>[]>(
+    () =>
+      rowActions
+        ? [
+            ...columnsProp,
+            {
+              key: ROW_ACTIONS_KEY,
+              header: <span className="sr-only">{labels.actions}</span>,
+              cell: (row) => (
+                <div className="flex items-center justify-end gap-0.5">
+                  {rowActionsFor(row).map((a) => (
+                    <IconButton
+                      key={a.key}
+                      size={density === "compact" ? "2xs" : "xs"}
+                      label={a.label}
+                      tone={a.tone === "danger" ? "danger" : undefined}
+                      disabledReason={a.action.disabledReason?.(row)}
+                      // The row's click handler already skips its own controls; this is for
+                      // the caller who wraps the table in a clickable element of their own.
+                      stopPropagation
+                      onClick={() => void runRowAction(a.action, row)}
+                    >
+                      {a.icon}
+                    </IconButton>
+                  ))}
+                </div>
+              ),
+              className: "w-px whitespace-nowrap text-end",
+              headClassName: "w-px",
+              // On a phone the same actions are the card's swipes.
+              mobileHidden: true,
+              noRowLink: true,
+            },
+          ]
+        : columnsProp,
+    [columnsProp, rowActions, rowActionsFor, labels.actions, density],
+  );
+  const swipesFromActions = (row: T): MobileSwipeActions | null => {
+    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
+    if (!swipes.length) return null;
+    const toSwipe = (a: ResolvedRowAction<T>): SwipeAction => ({
+      label: a.label,
+      icon: a.icon,
+      onCommit: () => void runRowAction(a.action, row),
+      className: a.tone === "danger" ? "bg-[var(--danger)]" : "bg-[var(--brand)]",
+      armedClassName: a.tone === "danger" ? "bg-[var(--danger-hover)]" : "bg-[var(--brand-hover)]",
+    });
+    return {
+      start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
+      end: swipes.filter((a) => a.swipe === "end").map(toSwipe),
+    };
+  };
+  const swipeActionsFor = mobileSwipeActions ?? (rowActions ? swipesFromActions : undefined);
+
   // Sorting, filtering and paging all change WHICH rows are on screen without
   // moving focus — the header button the user pressed is still the header button
   // they are on — so there is no other channel to say it on. See use-announce.ts.
@@ -875,7 +1061,7 @@ export function DataTable<T>({
     // criterion BEHIND the existing one, and answering "Sorted by Date" to a click on
     // Name misreports what the click did. The third click drops the column entirely,
     // which is the state a user is most likely to have reached by accident.
-    const name = col ? columnLabel(col) : key;
+    const name = col ? columnLabel(col, labels) : key;
     const entry = next.find((s) => s.key === key);
     announce(
       !entry
@@ -1122,7 +1308,10 @@ export function DataTable<T>({
   const totalCount = columns.length;
   // Spans the full row width including the optional leading selection column.
   const totalColSpan = visibleCount + (selection ? 1 : 0);
-  const columnsCountLabel = labels.columnsCount(visibleCount, totalCount);
+  // The actions column is the table's own, not one the user can hide: out of the count.
+  const columnsCountLabel = rowActions
+    ? labels.columnsCount(visibleCount - 1, totalCount - 1)
+    : labels.columnsCount(visibleCount, totalCount);
   // Match Tailwind's `md` breakpoint: we render either the table or the card
   // list — never both — so we don't double up DOM nodes that screen readers and
   // integration tests would have to disambiguate.
@@ -1252,7 +1441,7 @@ export function DataTable<T>({
     // uses for exactly this, and it points the way the row actually opens: right into
     // a sheet, or down into an inline panel that flips it when expanded.
     const opensDetail = interactive && !!expandedRow;
-    const swipeActions = mobileSwipeActions?.(row);
+    const swipeActions = swipeActionsFor?.(row);
     const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
     // An expanded row never swipes: the editor below it owns the horizontal space,
     // and dragging the header away from its own form reads as a glitch.
@@ -1362,7 +1551,14 @@ export function DataTable<T>({
         <div
           role={interactive ? "button" : undefined}
           tabIndex={interactive ? 0 : undefined}
-          onClick={interactive ? () => onRowClick!(row) : undefined}
+          onClick={
+            interactive
+              ? (e) => {
+                  if (fromOutside(e.target, e.currentTarget)) return;
+                  onRowClick!(row);
+                }
+              : undefined
+          }
           onKeyDown={
             interactive
               ? (e) => {
@@ -1445,6 +1641,19 @@ export function DataTable<T>({
           card list for the table wholesale, which would remount a region living
           inside either one. */}
       <span {...regionProps} />
+      {toolbar != null && toolbar !== false && (
+        <div
+          data-table-toolbar=""
+          className={cn(
+            "flex flex-wrap items-center gap-2",
+            frame
+              ? cn("border-b border-[var(--border)]", compact ? "px-2 py-1.5" : "px-3 py-2")
+              : "pb-3",
+          )}
+        >
+          {toolbar}
+        </div>
+      )}
       {!isMdUp && (
       <div ref={mobileRootRef}>
         {/* Mobile filter access (feedback #299): the per-column filter popovers
@@ -1489,7 +1698,7 @@ export function DataTable<T>({
                 compact ? "px-3 py-3 text-xs" : "px-4 py-6 text-sm",
               )}
             >
-              {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? "—")}
+              {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? labels.empty)}
             </li>
           )}
           {/* Endless-scroll sentinel: observed by IntersectionObserver to pull in
@@ -1708,7 +1917,7 @@ export function DataTable<T>({
                         </Popover>
                       )}
                     </div>
-                    {resizable && (
+                    {resizable && col.key !== ROW_ACTIONS_KEY && (
                     <span
                       role="separator"
                       aria-orientation="vertical"
@@ -1800,6 +2009,7 @@ export function DataTable<T>({
                             // not also open the row. Cells no longer have to
                             // `stopPropagation` to get that.
                             if (fromOwnControl(e.target, e.currentTarget)) return;
+                            if (fromOutside(e.target, e.currentTarget)) return;
                             // Modifier-clicks anywhere in the row drive
                             // selection instead of expanding it (feedback #289):
                             // Ctrl/Cmd toggles a single row, Shift selects the
@@ -1935,7 +2145,7 @@ export function DataTable<T>({
                 >
                   {/* Nothing is not the same as not-yet: "no results" while the first
                       page is still in flight is a claim the table cannot make. */}
-                  {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? "—")}
+                  {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? labels.empty)}
                 </td>
               </tr>
             )}
@@ -2018,6 +2228,7 @@ export function DataTable<T>({
             </button>
             <div className="flex flex-col gap-0.5">
               {columns.map((col) => {
+                if (col.key === ROW_ACTIONS_KEY) return null;
                 const checked = !hiddenCols.has(col.key);
                 const headerLabel = columnLabel(col);
                 return (