Header menu options and events

comins-table@0.2.2React

type: "menu" is header-only. The 0.2.0 implementation renders a fixed-position menu beneath the trigger in its DOM subtree. Open state is internal; onOpenChange is a notification, not a controlled state input.

Opening, closing, and veto

A request runs onBeforeChange, updates internal state, then calls onOpenChange. Returning false vetoes closing as well as opening. Async Promise-based approval is unsupported. Account for closing after Escape, outside pointer input, or item selection; avoid unintentionally blocking all closing paths. onSelect reports the selection; the application updates its data.

Open the ID header menu in the live example. Selecting an item does not trigger header sorting or ordinary cell/row events.

CominsMenuComponentConfig

type

type: "menu";

Required menu discriminator. Not allowed in cells.

items

items: CominsTableMenuItems<TPayload>;

Required menu-item array or function of the header payload.

props

props?: CominsTableComponentProps<TPayload, React.ButtonHTMLAttributes<HTMLButtonElement>>;

Trigger button attributes. Describe its action with children/aria-label. HTML type defaults to button.

onBeforeChange

onBeforeChange?: (payload: TPayload & {
        event?: Event | React.SyntheticEvent;
        open: boolean;
    }) => boolean | void;

No veto by default. Receives next open and optional event; false rejects the change.

onOpenChange

onOpenChange?: (payload: TPayload & {
        event?: Event | React.SyntheticEvent;
        open: boolean;
    }) => void;

Runs after an accepted open-state change. open is the next state; event may be absent.

onSelect

onSelect?: (payload: TPayload & {
        event: React.MouseEvent<HTMLButtonElement>;
        item: Extract<CominsTableMenuItem, {
            value: CominsComponentPrimitiveValue;
        }>;
        value: CominsComponentPrimitiveValue;
    }) => void;

Emits item/value/MouseEvent plus header payload for selectable items. Labels/dividers do not emit selection events.

CominsTableMenuItem

export type CominsTableMenuItem = {
    disabled?: boolean;
    label: React.ReactNode;
    type?: "item";
    value: CominsComponentPrimitiveValue;
} | {
    label: React.ReactNode;
    type: "label";
} | {
    type: "divider";
};

Selectable items require label/value; type may be omitted or item, and disabled defaults to false. A label requires label; a divider only needs type. Do not mix fields across variants.

CominsTableMenuItems

export type CominsTableMenuItems<TPayload> = CominsTableMenuItem[] | ((payload: TPayload) => CominsTableMenuItem[]);

Array or a function computing items from the current header payload.