chore(deps-dev): bump flatted from 3.3.3 to 3.4.2 in /examples/widget (#9550)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

examples/widget/package-lock.json

@@ -3839,9 +3839,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },

web/lib/opal/src/components/table/ActionsContainer.tsx

@@ -1,33 +1,38 @@
+"use client";
+
+import { cn } from "@opal/utils";
 import { useTableSize } from "@opal/components/table/TableSizeContext";
-import type { TableSize } from "@opal/components/table/TableSizeContext";
 
 interface ActionsContainerProps {
   type: "head" | "cell";
-  children: React.ReactNode;
-  size?: TableSize;
   /** Pass-through click handler (e.g. stopPropagation on body cells). */
   onClick?: (e: React.MouseEvent) => void;
+  children: React.ReactNode;
 }
 
 export default function ActionsContainer({
   type,
   children,
-  size,
   onClick,
 }: ActionsContainerProps) {
-  const contextSize = useTableSize();
-  const resolvedSize = size ?? contextSize;
-
+  const size = useTableSize();
   const Tag = type === "head" ? "th" : "td";
 
   return (
     <Tag
       className="tbl-actions"
       data-type={type}
-      data-size={resolvedSize}
+      data-size={size}
       onClick={onClick}
     >
-      <div className="flex h-full items-center justify-center">{children}</div>
+      <div
+        className={cn(
+          "flex h-full items-center",
+          type === "cell" ? "justify-end" : "justify-center"
+        )}
+      >
+        {children}
+      </div>
     </Tag>
   );
 }

web/lib/opal/src/components/table/ColumnSortabilityPopover.tsx

@@ -8,6 +8,7 @@ import {
   type SortingState,
 } from "@tanstack/react-table";
 import { Button, LineItemButton } from "@opal/components";
+import { useTableSize } from "@opal/components/table/TableSizeContext";
 import { SvgArrowUpDown, SvgSortOrder, SvgCheck } from "@opal/icons";
 import Popover from "@/refresh-components/Popover";
 import Divider from "@/refresh-components/Divider";
@@ -20,7 +21,6 @@ import Text from "@/refresh-components/texts/Text";
 interface SortingPopoverProps<TData extends RowData = RowData> {
   table: Table<TData>;
   sorting: SortingState;
-  size?: "md" | "lg";
   footerText?: string;
   ascendingLabel?: string;
   descendingLabel?: string;
@@ -29,11 +29,11 @@ interface SortingPopoverProps<TData extends RowData = RowData> {
 function SortingPopover<TData extends RowData>({
   table,
   sorting,
-  size = "lg",
   footerText,
   ascendingLabel = "Ascending",
   descendingLabel = "Descending",
 }: SortingPopoverProps<TData>) {
+  const size = useTableSize();
   const [open, setOpen] = useState(false);
   const sortableColumns = table
     .getAllLeafColumns()
@@ -158,7 +158,6 @@ function SortingPopover<TData extends RowData>({
 // ---------------------------------------------------------------------------
 
 interface CreateSortingColumnOptions {
-  size?: "md" | "lg";
   footerText?: string;
   ascendingLabel?: string;
   descendingLabel?: string;
@@ -177,7 +176,6 @@ function createSortingColumn<TData>(
       <SortingPopover
         table={table}
         sorting={table.getState().sorting}
-        size={options?.size}
         footerText={options?.footerText}
         ascendingLabel={options?.ascendingLabel}
         descendingLabel={options?.descendingLabel}

web/lib/opal/src/components/table/ColumnVisibilityPopover.tsx

@@ -8,6 +8,7 @@ import {
   type VisibilityState,
 } from "@tanstack/react-table";
 import { Button, LineItemButton, Tag } from "@opal/components";
+import { useTableSize } from "@opal/components/table/TableSizeContext";
 import { SvgColumn, SvgCheck } from "@opal/icons";
 import Popover from "@/refresh-components/Popover";
 import Divider from "@/refresh-components/Divider";
@@ -19,14 +20,13 @@ import Divider from "@/refresh-components/Divider";
 interface ColumnVisibilityPopoverProps<TData extends RowData = RowData> {
   table: Table<TData>;
   columnVisibility: VisibilityState;
-  size?: "md" | "lg";
 }
 
 function ColumnVisibilityPopover<TData extends RowData>({
   table,
   columnVisibility,
-  size = "lg",
 }: ColumnVisibilityPopoverProps<TData>) {
+  const size = useTableSize();
   const [open, setOpen] = useState(false);
 
   // User-defined columns only (exclude internal qualifier/actions)
@@ -87,13 +87,7 @@ function ColumnVisibilityPopover<TData extends RowData>({
 // Column definition factory
 // ---------------------------------------------------------------------------
 
-interface CreateColumnVisibilityColumnOptions {
-  size?: "md" | "lg";
-}
-
-function createColumnVisibilityColumn<TData>(
-  options?: CreateColumnVisibilityColumnOptions
-): ColumnDef<TData, unknown> {
+function createColumnVisibilityColumn<TData>(): ColumnDef<TData, unknown> {
   return {
     id: "__columnVisibility",
     size: 44,
@@ -104,7 +98,6 @@ function createColumnVisibilityColumn<TData>(
       <ColumnVisibilityPopover
         table={table}
         columnVisibility={table.getState().columnVisibility}
-        size={options?.size}
       />
     ),
     cell: () => null,

web/lib/opal/src/components/table/DragOverlayRow.tsx

@@ -57,9 +57,10 @@ function DragOverlayRowInner<TData>({
                 <QualifierContainer key={cell.id} type="cell">
                   <TableQualifier
                     content={qualifierColumn.content}
-                    initials={qualifierColumn.getInitials?.(row.original)}
-                    icon={qualifierColumn.getIcon?.(row.original)}
+                    icon={qualifierColumn.getContent?.(row.original)}
                     imageSrc={qualifierColumn.getImageSrc?.(row.original)}
+                    imageAlt={qualifierColumn.getImageAlt?.(row.original)}
+                    background={qualifierColumn.background}
                     selectable={isSelectable}
                     selected={isSelectable && row.getIsSelected()}
                   />

web/lib/opal/src/components/table/Footer.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { cn } from "@opal/utils";
 import { Button, Pagination, SelectButton } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import { useTableSize } from "@opal/components/table/TableSizeContext";
-import type { TableSize } from "@opal/components/table/TableSizeContext";
 import { SvgEye, SvgXCircle } from "@opal/icons";
 import type { ReactNode } from "react";
 
@@ -45,9 +43,6 @@ interface FooterSelectionModeProps {
   onPageChange: (page: number) => void;
   /** Unit label for count pagination. @default "items" */
   units?: string;
-  /** Controls overall footer sizing. `"lg"` (default) or `"md"`. */
-  size?: TableSize;
-  className?: string;
 }
 
 /**
@@ -73,7 +68,6 @@ interface FooterSummaryModeProps {
   leftExtra?: ReactNode;
   /** Unit label for the summary text, e.g. "users". */
   units?: string;
-  className?: string;
 }
 
 /**
@@ -110,11 +104,7 @@ export default function Footer(props: FooterProps) {
   const isSmall = resolvedSize === "md";
   return (
     <div
-      className={cn(
-        "table-footer",
-        "flex w-full items-center justify-between border-t border-border-01",
-        props.className
-      )}
+      className="table-footer flex w-full items-center justify-between border-t border-border-01"
       data-size={resolvedSize}
     >
       {/* Left side */}

web/lib/opal/src/components/table/QualifierContainer.tsx

@@ -1,10 +1,10 @@
+"use client";
+
 import { useTableSize } from "@opal/components/table/TableSizeContext";
-import type { TableSize } from "@opal/components/table/TableSizeContext";
 
 interface QualifierContainerProps {
   type: "head" | "cell";
   children?: React.ReactNode;
-  size?: TableSize;
   /** Pass-through click handler (e.g. stopPropagation on body cells). */
   onClick?: (e: React.MouseEvent) => void;
 }
@@ -12,11 +12,9 @@ interface QualifierContainerProps {
 export default function QualifierContainer({
   type,
   children,
-  size,
   onClick,
 }: QualifierContainerProps) {
-  const contextSize = useTableSize();
-  const resolvedSize = size ?? contextSize;
+  const resolvedSize = useTableSize();
 
   const Tag = type === "head" ? "th" : "td";
 

web/lib/opal/src/components/table/README.md

@@ -7,6 +7,7 @@ row selection, drag-and-drop reordering, and server-side mode.
 
 ```tsx
 import { Table, createTableColumns } from "@opal/components";
+import { SvgUser } from "@opal/icons";
 
 interface User {
   id: string;
@@ -18,11 +19,10 @@ interface User {
 const tc = createTableColumns<User>();
 
 const columns = [
-  tc.qualifier({ content: "avatar-user", getInitials: (r) => r.name?.[0] ?? "?" }),
+  tc.qualifier({ content: "icon", getContent: () => SvgUser }),
   tc.column("email", {
     header: "Name",
     weight: 22,
-    minWidth: 140,
     cell: (email, row) => <span>{row.name ?? email}</span>,
   }),
   tc.column("status", {
@@ -40,7 +40,7 @@ function UsersTable({ users }: { users: User[] }) {
       columns={columns}
       getRowId={(r) => r.id}
       pageSize={10}
-      footer={{ mode: "summary" }}
+      footer={{}}
     />
   );
 }
@@ -55,7 +55,7 @@ function UsersTable({ users }: { users: User[] }) {
 | `getRowId` | `(row: TData) => string` | required | Unique row identifier |
 | `pageSize` | `number` | `10` | Rows per page (`Infinity` disables pagination) |
 | `size` | `"md" \| "lg"` | `"lg"` | Density variant |
-| `footer` | `DataTableFooterConfig` | — | Footer mode (`"selection"` or `"summary"`) |
+| `footer` | `DataTableFooterConfig` | — | Footer configuration (mode is derived from `selectionBehavior`) |
 | `initialSorting` | `SortingState` | — | Initial sort state |
 | `initialColumnVisibility` | `VisibilityState` | — | Initial column visibility |
 | `draggable` | `DataTableDraggableConfig` | — | Enable drag-and-drop reordering |
@@ -63,7 +63,6 @@ function UsersTable({ users }: { users: User[] }) {
 | `onRowClick` | `(row: TData) => void` | — | Row click handler |
 | `searchTerm` | `string` | — | Global text filter |
 | `height` | `number \| string` | — | Max scrollable height |
-| `headerBackground` | `string` | — | Sticky header background |
 | `serverSide` | `ServerSideConfig` | — | Server-side pagination/sorting/filtering |
 | `emptyState` | `ReactNode` | — | Empty state content |
 
@@ -76,7 +75,8 @@ function UsersTable({ users }: { users: User[] }) {
 - `tc.displayColumn(opts)` — non-accessor custom column
 - `tc.actions(opts)` — trailing actions column with visibility/sorting popovers
 
-## Footer Modes
+## Footer
 
-- **`"selection"`** — shows selection count, optional view/clear buttons, count pagination
-- **`"summary"`** — shows "Showing X~Y of Z", list pagination, optional extra element
+The footer mode is derived automatically from `selectionBehavior`:
+- **Selection footer** (when `selectionBehavior` is `"single-select"` or `"multi-select"`) — shows selection count, optional view/clear buttons, count pagination
+- **Summary footer** (when `selectionBehavior` is `"no-select"` or omitted) — shows "Showing X\~Y of Z", list pagination, optional extra element

web/lib/opal/src/components/table/Table.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Table, createTableColumns } from "@opal/components";
+import { SvgUser } from "@opal/icons";
 
 // ---------------------------------------------------------------------------
 // Sample data
@@ -108,17 +109,14 @@ const tc = createTableColumns<User>();
 
 const columns = [
   tc.qualifier({
-    content: "avatar-user",
-    getInitials: (r) =>
-      r.name
-        .split(" ")
-        .map((n) => n[0])
-        .join(""),
+    content: "icon",
+    getContent: () => SvgUser,
+    background: true,
   }),
-  tc.column("name", { header: "Name", weight: 25, minWidth: 120 }),
-  tc.column("email", { header: "Email", weight: 30, minWidth: 160 }),
-  tc.column("role", { header: "Role", weight: 15, minWidth: 80 }),
-  tc.column("status", { header: "Status", weight: 15, minWidth: 80 }),
+  tc.column("name", { header: "Name", weight: 25 }),
+  tc.column("email", { header: "Email", weight: 30 }),
+  tc.column("role", { header: "Role", weight: 15 }),
+  tc.column("status", { header: "Status", weight: 15 }),
   tc.actions(),
 ];
 
@@ -142,7 +140,7 @@ export const Default: Story = {
       columns={columns}
       getRowId={(r) => r.id}
       pageSize={8}
-      footer={{ mode: "summary" }}
+      footer={{}}
     />
   ),
 };

web/lib/opal/src/components/table/TableCell.tsx

@@ -1,24 +1,20 @@
 import { cn } from "@opal/utils";
 import { useTableSize } from "@opal/components/table/TableSizeContext";
-import type { TableSize } from "@opal/components/table/TableSizeContext";
 import type { WithoutStyles } from "@/types";
 
 interface TableCellProps
   extends WithoutStyles<React.TdHTMLAttributes<HTMLTableCellElement>> {
   children: React.ReactNode;
-  size?: TableSize;
   /** Explicit pixel width for the cell. */
   width?: number;
 }
 
 export default function TableCell({
-  size,
   width,
   children,
   ...props
 }: TableCellProps) {
-  const contextSize = useTableSize();
-  const resolvedSize = size ?? contextSize;
+  const resolvedSize = useTableSize();
   return (
     <td
       className="tbl-cell overflow-hidden"

web/lib/opal/src/components/table/TableElement.tsx

@@ -1,5 +1,8 @@
+"use client";
+
 import React from "react";
 import { cn } from "@opal/utils";
+import { useTableSize } from "@opal/components/table/TableSizeContext";
 import type { WithoutStyles } from "@/types";
 import type { ExtremaSizeVariants, SizeVariants } from "@opal/types";
 
@@ -9,20 +12,15 @@ import type { ExtremaSizeVariants, SizeVariants } from "@opal/types";
 
 type TableSize = Extract<SizeVariants, "md" | "lg">;
 type TableVariant = "rows" | "cards";
-type TableQualifier = "simple" | "avatar" | "icon";
 type SelectionBehavior = "no-select" | "single-select" | "multi-select";
 
 interface TableProps
   extends WithoutStyles<React.TableHTMLAttributes<HTMLTableElement>> {
   ref?: React.Ref<HTMLTableElement>;
-  /** Size preset for the table. @default "lg" */
-  size?: TableSize;
   /** Visual row variant. @default "cards" */
   variant?: TableVariant;
   /** Row selection behavior. @default "no-select" */
   selectionBehavior?: SelectionBehavior;
-  /** Leading qualifier column type. @default null */
-  qualifier?: TableQualifier;
   /** Height behavior. `"fit"` = shrink to content, `"full"` = fill available space. */
   heightVariant?: ExtremaSizeVariants;
   /** Explicit pixel width for the table (e.g. from `table.getTotalSize()`).
@@ -38,14 +36,13 @@ interface TableProps
 
 function Table({
   ref,
-  size = "lg",
   variant = "cards",
   selectionBehavior = "no-select",
-  qualifier = "simple",
   heightVariant,
   width,
   ...props
 }: TableProps) {
+  const size = useTableSize();
   return (
     <table
       ref={ref}
@@ -54,7 +51,6 @@ function Table({
       data-size={size}
       data-variant={variant}
       data-selection={selectionBehavior}
-      data-qualifier={qualifier}
       data-height={heightVariant}
       {...props}
     />
@@ -62,10 +58,4 @@ function Table({
 }
 
 export default Table;
-export type {
-  TableProps,
-  TableSize,
-  TableVariant,
-  TableQualifier,
-  SelectionBehavior,
-};
+export type { TableProps, TableSize, TableVariant, SelectionBehavior };

web/lib/opal/src/components/table/TableHead.tsx

@@ -1,7 +1,6 @@
 import { cn } from "@opal/utils";
 import Text from "@/refresh-components/texts/Text";
 import { useTableSize } from "@opal/components/table/TableSizeContext";
-import type { TableSize } from "@opal/components/table/TableSizeContext";
 import type { WithoutStyles } from "@/types";
 import { Button } from "@opal/components";
 import { SvgChevronDown, SvgChevronUp, SvgHandle, SvgSort } from "@opal/icons";
@@ -30,8 +29,6 @@ interface TableHeadCustomProps {
   icon?: (sorted: SortDirection) => IconFunctionComponent;
   /** Text alignment for the column. Defaults to `"left"`. */
   alignment?: "left" | "center" | "right";
-  /** Cell density. `"md"` uses tighter padding for denser layouts. */
-  size?: TableSize;
   /** Column width in pixels. Applied as an inline style on the `<th>`. */
   width?: number;
   /** When `true`, shows a bottom border on hover. Defaults to `true`. */
@@ -81,13 +78,11 @@ export default function TableHead({
   resizable,
   onResizeStart,
   alignment = "left",
-  size,
   width,
   bottomBorder = true,
   ...thProps
 }: TableHeadProps) {
-  const contextSize = useTableSize();
-  const resolvedSize = size ?? contextSize;
+  const resolvedSize = useTableSize();
   const isSmall = resolvedSize === "md";
   return (
     <th

web/lib/opal/src/components/table/TableQualifier.tsx

@@ -3,19 +3,13 @@
 import React from "react";
 import { cn } from "@opal/utils";
 import { useTableSize } from "@opal/components/table/TableSizeContext";
-import type { TableSize } from "@opal/components/table/TableSizeContext";
-import { SvgUser } from "@opal/icons";
 import type { IconFunctionComponent } from "@opal/types";
 import type { QualifierContentType } from "@opal/components/table/types";
 import Checkbox from "@/refresh-components/inputs/Checkbox";
-import Text from "@/refresh-components/texts/Text";
 
 interface TableQualifierProps {
-  className?: string;
   /** Content type displayed in the qualifier */
   content: QualifierContentType;
-  /** Size variant */
-  size?: TableSize;
   /** Disables interaction */
   disabled?: boolean;
   /** Whether to show a selection checkbox overlay */
@@ -24,54 +18,33 @@ interface TableQualifierProps {
   selected?: boolean;
   /** Called when the checkbox is toggled */
   onSelectChange?: (selected: boolean) => void;
-  /** Icon component to render (for "icon" content type) */
+  /** Icon component to render (for "icon" content). */
   icon?: IconFunctionComponent;
-  /** Image source URL (for "image" content type) */
+  /** Image source URL (for "image" content). */
   imageSrc?: string;
-  /** Image alt text */
+  /** Image alt text (for "image" content). */
   imageAlt?: string;
-  /** User initials (for "avatar-user" content type) */
-  initials?: string;
+  /** Show a tinted background container behind the content. */
+  background?: boolean;
 }
 
 const iconSizes = {
-  lg: 16,
-  md: 14,
+  lg: 28,
+  md: 24,
 } as const;
 
-function getQualifierStyles(selected: boolean, disabled: boolean) {
+function getOverlayStyles(selected: boolean, disabled: boolean) {
   if (disabled) {
-    return {
-      container: "bg-background-neutral-03",
-      icon: "stroke-text-02",
-      overlay: selected ? "flex bg-action-link-00" : "hidden",
-      overlayImage: selected ? "flex bg-mask-01 backdrop-blur-02" : "hidden",
-    };
+    return selected ? "flex bg-action-link-00" : "hidden";
   }
-
   if (selected) {
-    return {
-      container: "bg-action-link-00",
-      icon: "stroke-text-03",
-      overlay: "flex bg-action-link-00",
-      overlayImage: "flex bg-mask-01 backdrop-blur-02",
-    };
+    return "flex bg-action-link-00";
   }
-
-  return {
-    container: "bg-background-tint-01",
-    icon: "stroke-text-03",
-    overlay:
-      "flex opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 bg-background-tint-01",
-    overlayImage:
-      "flex opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 bg-mask-01 group-hover/row:backdrop-blur-02 group-focus-within/row:backdrop-blur-02",
-  };
+  return "flex opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 bg-background-tint-01";
 }
 
 function TableQualifier({
-  className,
   content,
-  size,
   disabled = false,
   selectable = false,
   selected = false,
@@ -79,100 +52,67 @@ function TableQualifier({
   icon: Icon,
   imageSrc,
   imageAlt = "",
-  initials,
+  background = false,
 }: TableQualifierProps) {
-  const contextSize = useTableSize();
-  const resolvedSize = size ?? contextSize;
-  const isRound = content === "avatar-icon" || content === "avatar-user";
+  const resolvedSize = useTableSize();
   const iconSize = iconSizes[resolvedSize];
-  const styles = getQualifierStyles(selected, disabled);
+  const overlayStyles = getOverlayStyles(selected, disabled);
 
   function renderContent() {
     switch (content) {
       case "icon":
-        return Icon ? <Icon size={iconSize} className={styles.icon} /> : null;
-
-      case "simple":
-        return null;
+        return Icon ? <Icon size={iconSize} /> : null;
 
       case "image":
         return imageSrc ? (
           <img
             src={imageSrc}
             alt={imageAlt}
-            className={cn(
-              "h-full w-full object-cover",
-              isRound ? "rounded-full" : "rounded-08"
-            )}
+            className="h-full w-full rounded-08 object-cover"
           />
         ) : null;
 
-      case "avatar-icon":
-        return <SvgUser size={iconSize} className={styles.icon} />;
-
-      case "avatar-user":
-        return (
-          <div
-            className={cn(
-              "flex items-center justify-center rounded-full bg-background-neutral-inverted-00",
-              resolvedSize === "lg" ? "h-7 w-7" : "h-6 w-6"
-            )}
-          >
-            <Text
-              inverted
-              secondaryAction
-              text05
-              className="select-none uppercase"
-            >
-              {initials}
-            </Text>
-          </div>
-        );
-
+      case "simple":
       default:
         return null;
     }
   }
 
+  const inner = renderContent();
+  const showBackground = background && content !== "simple";
+
   return (
     <div
       className={cn(
         "group relative inline-flex shrink-0 items-center justify-center",
         resolvedSize === "lg" ? "h-9 w-9" : "h-7 w-7",
-        disabled ? "cursor-not-allowed" : "cursor-default",
-        className
+        disabled ? "cursor-not-allowed" : "cursor-default"
       )}
     >
-      {/* Inner qualifier container — no background for "simple" */}
-      {content !== "simple" && (
+      {showBackground ? (
         <div
           className={cn(
-            "flex items-center justify-center overflow-hidden transition-colors",
+            "flex items-center justify-center overflow-hidden rounded-08 transition-colors",
             resolvedSize === "lg" ? "h-9 w-9" : "h-7 w-7",
-            isRound ? "rounded-full" : "rounded-08",
-            styles.container,
-            content === "image" && disabled && !selected && "opacity-50"
+            disabled
+              ? "bg-background-neutral-03"
+              : selected
+                ? "bg-action-link-00"
+                : "bg-background-tint-01"
           )}
         >
-          {renderContent()}
+          {inner}
         </div>
+      ) : (
+        inner
       )}
 
       {/* Selection overlay */}
       {selectable && (
         <div
           className={cn(
-            "absolute inset-0 items-center justify-center",
-            content === "simple"
-              ? "flex"
-              : isRound
-                ? "rounded-full"
-                : "rounded-08",
-            content === "simple"
-              ? "flex"
-              : content === "image"
-                ? styles.overlayImage
-                : styles.overlay
+            "absolute inset-0 items-center justify-center rounded-08",
+            content === "simple" ? "flex" : overlayStyles
           )}
         >
           <Checkbox

web/lib/opal/src/components/table/TableRow.tsx

@@ -2,7 +2,6 @@
 
 import { cn } from "@opal/utils";
 import { useTableSize } from "@opal/components/table/TableSizeContext";
-import type { TableSize } from "@opal/components/table/TableSizeContext";
 import type { WithoutStyles } from "@/types";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -12,7 +11,7 @@ import { SvgHandle } from "@opal/icons";
 // Types
 // ---------------------------------------------------------------------------
 
-interface TableRowProps
+export interface TableRowProps
   extends WithoutStyles<React.HTMLAttributes<HTMLTableRowElement>> {
   ref?: React.Ref<HTMLTableRowElement>;
   selected?: boolean;
@@ -22,8 +21,6 @@ interface TableRowProps
   sortableId?: string;
   /** Show drag handle overlay. Defaults to true when sortableId is set. */
   showDragHandle?: boolean;
-  /** Size variant for the drag handle */
-  size?: TableSize;
 }
 
 // ---------------------------------------------------------------------------
@@ -33,15 +30,13 @@ interface TableRowProps
 function SortableTableRow({
   sortableId,
   showDragHandle = true,
-  size,
   selected,
   disabled,
   ref: _externalRef,
   children,
   ...props
 }: TableRowProps) {
-  const contextSize = useTableSize();
-  const resolvedSize = size ?? contextSize;
+  const resolvedSize = useTableSize();
 
   const {
     attributes,
@@ -105,10 +100,9 @@ function SortableTableRow({
 // Main component
 // ---------------------------------------------------------------------------
 
-function TableRow({
+export default function TableRow({
   sortableId,
   showDragHandle,
-  size,
   selected,
   disabled,
   ref,
@@ -119,7 +113,6 @@ function TableRow({
       <SortableTableRow
         sortableId={sortableId}
         showDragHandle={showDragHandle}
-        size={size}
         selected={selected}
         disabled={disabled}
         ref={ref}
@@ -138,6 +131,3 @@ function TableRow({
     />
   );
 }
-
-export default TableRow;
-export type { TableRowProps };

web/lib/opal/src/components/table/columns.ts

@@ -25,18 +25,14 @@ import type { SortDirection } from "@opal/components/table/TableHead";
 interface QualifierConfig<TData> {
   /** Content type for body-row `<TableQualifier>`. @default "simple" */
   content?: QualifierContentType;
-  /** Content type for the header `<TableQualifier>`. @default "simple" */
-  headerContentType?: QualifierContentType;
-  /** Extract initials from a row (for "avatar-user" content). */
-  getInitials?: (row: TData) => string;
-  /** Extract icon from a row (for "icon" / "avatar-icon" content). */
-  getIcon?: (row: TData) => IconFunctionComponent;
-  /** Extract image src from a row (for "image" content). */
+  /** Return the icon component to render for a row (for "icon" content). */
+  getContent?: (row: TData) => IconFunctionComponent;
+  /** Return the image URL to render for a row (for "image" content). */
   getImageSrc?: (row: TData) => string;
-  /** Whether to show selection checkboxes on the qualifier. @default true */
-  selectable?: boolean;
-  /** Whether to render qualifier content in the header. @default true */
-  header?: boolean;
+  /** Return the image alt text for a row (for "image" content). @default "" */
+  getImageAlt?: (row: TData) => string;
+  /** Show a tinted background container behind the content. @default false */
+  background?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -58,8 +54,6 @@ interface DataColumnConfig<TData, TValue> {
   icon?: (sorted: SortDirection) => IconFunctionComponent;
   /** Column weight for proportional distribution. @default 20 */
   weight?: number;
-  /** Minimum column width in pixels. @default 50 */
-  minWidth?: number;
 }
 
 // ---------------------------------------------------------------------------
@@ -132,9 +126,9 @@ interface TableColumnsBuilder<TData> {
  * ```ts
  * const tc = createTableColumns<TeamMember>();
  * const columns = [
- *   tc.qualifier({ content: "avatar-user", getInitials: (r) => r.initials }),
- *   tc.column("name", { header: "Name", weight: 23, minWidth: 120 }),
- *   tc.column("email", { header: "Email", weight: 28, minWidth: 150 }),
+ *   tc.qualifier({ content: "icon", getContent: (r) => UserIcon }),
+ *   tc.column("name", { header: "Name", weight: 23 }),
+ *   tc.column("email", { header: "Email", weight: 28 }),
  *   tc.actions(),
  * ];
  * ```
@@ -162,12 +156,10 @@ export function createTableColumns<TData>(): TableColumnsBuilder<TData> {
         width: (size: TableSize) =>
           size === "md" ? { fixed: 36 } : { fixed: 44 },
         content,
-        headerContentType: config?.headerContentType,
-        getInitials: config?.getInitials,
-        getIcon: config?.getIcon,
+        getContent: config?.getContent,
         getImageSrc: config?.getImageSrc,
-        selectable: config?.selectable,
-        header: config?.header,
+        getImageAlt: config?.getImageAlt,
+        background: config?.background,
       };
     },
 
@@ -183,7 +175,6 @@ export function createTableColumns<TData>(): TableColumnsBuilder<TData> {
         enableHiding = true,
         icon,
         weight = 20,
-        minWidth = 50,
       } = config;
 
       const def = helper.accessor(accessor as any, {
@@ -201,7 +192,7 @@ export function createTableColumns<TData>(): TableColumnsBuilder<TData> {
         kind: "data",
         id: accessor as string,
         def,
-        width: { weight, minWidth },
+        width: { weight, minWidth: Math.max(header.length * 8 + 40, 80) },
         icon,
       };
     },

web/lib/opal/src/components/table/components.tsx

@@ -39,15 +39,12 @@ import type {
 import type { TableSize } from "@opal/components/table/TableSizeContext";
 
 // ---------------------------------------------------------------------------
-// Qualifier × SelectionBehavior
+// SelectionBehavior
 // ---------------------------------------------------------------------------
 
-type Qualifier = "simple" | "avatar" | "icon";
 type SelectionBehavior = "no-select" | "single-select" | "multi-select";
 
 export type DataTableProps<TData> = BaseDataTableProps<TData> & {
-  /** Leading qualifier column type. @default "simple" */
-  qualifier?: Qualifier;
   /** Row selection behavior. @default "no-select" */
   selectionBehavior?: SelectionBehavior;
 };
@@ -131,8 +128,8 @@ function processColumns<TData>(
  * ```tsx
  * const tc = createTableColumns<TeamMember>();
  * const columns = [
- *   tc.qualifier({ content: "avatar-user", getInitials: (r) => r.initials }),
- *   tc.column("name", { header: "Name", weight: 23, minWidth: 120 }),
+ *   tc.qualifier({ content: "icon", getContent: (r) => UserIcon }),
+ *   tc.column("name", { header: "Name", weight: 23 }),
  *   tc.column("email", { header: "Email", weight: 28 }),
  *   tc.actions(),
  * ];
@@ -152,13 +149,11 @@ export function Table<TData>(props: DataTableProps<TData>) {
     footer,
     size = "lg",
     variant = "cards",
-    qualifier = "simple",
     selectionBehavior = "no-select",
     onSelectionChange,
     onRowClick,
     searchTerm,
     height,
-    headerBackground,
     serverSide,
     emptyState,
   } = props;
@@ -166,11 +161,15 @@ export function Table<TData>(props: DataTableProps<TData>) {
   const effectivePageSize = pageSize ?? (footer ? 10 : data.length);
 
   // Whether the qualifier column should exist in the DOM.
-  // "simple" only gets a qualifier column for multi-select (checkboxes).
-  // "simple" + no-select/single-select = no qualifier column — single-select
-  // uses row-level background coloring instead.
+  // Derived from the column definitions: if a qualifier column exists with
+  // content !== "simple", always show it. If content === "simple" (or no
+  // qualifier column defined), show only for multi-select (checkboxes).
+  const qualifierColDef = columns.find(
+    (c): c is OnyxQualifierColumn<TData> => c.kind === "qualifier"
+  );
   const hasQualifierColumn =
-    qualifier !== "simple" || selectionBehavior === "multi-select";
+    (qualifierColDef != null && qualifierColDef.content !== "simple") ||
+    selectionBehavior === "multi-select";
 
   // 1. Process columns (memoized on columns + size)
   const { tanstackColumns, widthConfig, qualifierColumn, columnKindMap } =
@@ -349,15 +348,9 @@ export function Table<TData>(props: DataTableProps<TData>) {
                   overflowY: "auto" as const,
                 }
               : undefined),
-            ...(headerBackground
-              ? ({
-                  "--table-header-bg": headerBackground,
-                } as React.CSSProperties)
-              : undefined),
           }}
         >
           <TableElement
-            size={size}
             variant={variant}
             selectionBehavior={selectionBehavior}
             width={
@@ -419,14 +412,12 @@ export function Table<TData>(props: DataTableProps<TData>) {
                               columnVisibility={
                                 table.getState().columnVisibility
                               }
-                              size={size}
                             />
                           )}
                           {actionsDef.showSorting !== false && (
                             <SortingPopover
                               table={table}
                               sorting={table.getState().sorting}
-                              size={size}
                               footerText={actionsDef.sortingFooterText}
                             />
                           )}
@@ -541,12 +532,6 @@ export function Table<TData>(props: DataTableProps<TData>) {
                       if (cellColDef?.kind === "qualifier") {
                         const qDef = cellColDef as OnyxQualifierColumn<TData>;
 
-                        // Resolve content based on the qualifier prop:
-                        // - "simple" renders nothing (checkbox only when selectable)
-                        // - "avatar"/"icon" render from column config
-                        const qualifierContent =
-                          qualifier === "simple" ? "simple" : qDef.content;
-
                         return (
                           <QualifierContainer
                             key={cell.id}
@@ -554,10 +539,11 @@ export function Table<TData>(props: DataTableProps<TData>) {
                             onClick={(e) => e.stopPropagation()}
                           >
                             <TableQualifier
-                              content={qualifierContent}
-                              initials={qDef.getInitials?.(row.original)}
-                              icon={qDef.getIcon?.(row.original)}
+                              content={qDef.content}
+                              icon={qDef.getContent?.(row.original)}
                               imageSrc={qDef.getImageSrc?.(row.original)}
+                              imageAlt={qDef.getImageAlt?.(row.original)}
+                              background={qDef.background}
                               selectable={showQualifierCheckbox}
                               selected={
                                 showQualifierCheckbox && row.getIsSelected()

web/lib/opal/src/components/table/hooks/useColumnWidths.ts

@@ -277,7 +277,7 @@ function createSplitterResizeHandler(
  * const { containerRef, columnWidths, createResizeHandler } = useColumnWidths({
  *   headers: table.getHeaderGroups()[0].headers,
  *   fixedColumnIds: new Set(["actions"]),
- *   columnMinWidths: { name: 120, status: 80 },
+ *   columnMinWidths: { name: 72, status: 80 },
  * });
  * ```
  */

web/lib/opal/src/components/table/styles.css

@@ -25,8 +25,7 @@
 /* ---- TableHead ---- */
 
 .table-head {
-  @apply relative sticky top-0 z-20;
-  background: var(--table-header-bg, transparent);
+  @apply relative;
 }
 .table-head[data-size="lg"] {
   @apply px-2 py-1;
@@ -130,8 +129,7 @@ table[data-variant="cards"] .tbl-row:has(:focus-visible) > td {
 /* ---- QualifierContainer ---- */
 
 .tbl-qualifier[data-type="head"] {
-  @apply w-px whitespace-nowrap py-1 sticky top-0 z-20;
-  background: var(--table-header-bg, transparent);
+  @apply w-px whitespace-nowrap py-1;
 }
 .tbl-qualifier[data-type="head"][data-size="md"] {
   @apply py-0.5;
@@ -147,11 +145,10 @@ table[data-variant="cards"] .tbl-row:has(:focus-visible) > td {
 /* ---- ActionsContainer ---- */
 
 .tbl-actions {
-  @apply sticky right-0 w-px whitespace-nowrap px-1;
+  @apply w-px whitespace-nowrap px-1;
 }
 .tbl-actions[data-type="head"] {
-  @apply z-30 sticky top-0 px-2 py-1;
-  background: var(--table-header-bg, transparent);
+  @apply px-2 py-1;
 }
 
 /* ---- Footer ---- */

web/lib/opal/src/components/table/types.ts

@@ -30,12 +30,7 @@ export type ColumnWidth = DataColumnWidth | FixedColumnWidth;
 // Column kind discriminant
 // ---------------------------------------------------------------------------
 
-export type QualifierContentType =
-  | "icon"
-  | "simple"
-  | "image"
-  | "avatar-icon"
-  | "avatar-user";
+export type QualifierContentType = "simple" | "icon" | "image";
 
 export type OnyxColumnKind = "qualifier" | "data" | "display" | "actions";
 
@@ -56,18 +51,14 @@ export interface OnyxQualifierColumn<TData> extends OnyxColumnBase<TData> {
   kind: "qualifier";
   /** Content type for body-row `<TableQualifier>`. */
   content: QualifierContentType;
-  /** Content type for the header `<TableQualifier>`. @default "simple" */
-  headerContentType?: QualifierContentType;
-  /** Extract initials from a row (for "avatar-user" content). */
-  getInitials?: (row: TData) => string;
-  /** Extract icon from a row (for "icon" / "avatar-icon" content). */
-  getIcon?: (row: TData) => IconFunctionComponent;
-  /** Extract image src from a row (for "image" content). */
+  /** Return the icon component to render for a row (for "icon" content). */
+  getContent?: (row: TData) => IconFunctionComponent;
+  /** Return the image URL to render for a row (for "image" content). */
   getImageSrc?: (row: TData) => string;
-  /** Whether to show selection checkboxes on the qualifier. @default true */
-  selectable?: boolean;
-  /** Whether to render qualifier content in the header. @default true */
-  header?: boolean;
+  /** Return the image alt text for a row (for "image" content). @default "" */
+  getImageAlt?: (row: TData) => string;
+  /** Show a tinted background container behind the content. @default false */
+  background?: boolean;
 }
 
 /** Data column — accessor-based column with sorting/resizing. */
@@ -174,9 +165,6 @@ export interface DataTableProps<TData> {
    * Accepts a pixel number (e.g. `300`) or a CSS value string (e.g. `"50vh"`).
    */
   height?: number | string;
-  /** Background color for the sticky header row, preventing rows from showing
-   *  through when scrolling. Accepts any CSS color value. */
-  headerBackground?: string;
   /**
    * Enable server-side mode. When provided:
    * - TanStack uses manualPagination/manualSorting/manualFiltering

web/package-lock.json

@@ -10309,9 +10309,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },

web/src/refresh-pages/admin/UsersPage/UsersTable.tsx

@@ -26,7 +26,8 @@ import type {
   StatusFilter,
   StatusCountMap,
 } from "./interfaces";
-import { getUserInitials } from "@/lib/user";
+import UserAvatar from "@/refresh-components/avatars/UserAvatar";
+import type { User } from "@/lib/types";
 
 // ---------------------------------------------------------------------------
 // Column renderers
@@ -75,21 +76,25 @@ const tc = createTableColumns<UserRow>();
 function buildColumns(onMutate: () => void) {
   return [
     tc.qualifier({
-      content: "avatar-user",
-      getInitials: (row) =>
-        getUserInitials(row.personal_name, row.email) ?? "?",
-      selectable: false,
+      content: "icon",
+      getContent: (row) => {
+        const user = {
+          email: row.email,
+          personalization: row.personal_name
+            ? { name: row.personal_name }
+            : undefined,
+        } as User;
+        return (props) => <UserAvatar user={user} size={props.size} />;
+      },
     }),
     tc.column("email", {
       header: "Name",
       weight: 22,
-      minWidth: 140,
       cell: renderNameColumn,
     }),
     tc.column("groups", {
       header: "Groups",
       weight: 24,
-      minWidth: 200,
       enableSorting: false,
       cell: (value, row) => (
         <GroupsCell groups={value} user={row} onMutate={onMutate} />
@@ -98,19 +103,16 @@ function buildColumns(onMutate: () => void) {
     tc.column("role", {
       header: "Account Type",
       weight: 16,
-      minWidth: 180,
       cell: (_value, row) => <UserRoleCell user={row} onMutate={onMutate} />,
     }),
     tc.column("status", {
       header: "Status",
       weight: 14,
-      minWidth: 100,
       cell: renderStatusColumn,
     }),
     tc.column("updated_at", {
       header: "Last Updated",
       weight: 14,
-      minWidth: 100,
       cell: renderLastUpdatedColumn,
     }),
     tc.actions({
@@ -220,7 +222,6 @@ export default function UsersTable({
         data={filteredUsers}
         columns={columns}
         getRowId={(row) => row.id ?? row.email}
-        qualifier="avatar"
         pageSize={PAGE_SIZE}
         searchTerm={searchTerm}
         emptyState={