import { EventEmitter } from '../../stencil-public-runtime';
import type { TableColumn, TableHeaderStyle, TableRowClickDetail, TableRowData, TableRowStyle, TableSelectionChangeDetail, TableSortChangeDetail, TableSortDirection } from './mud-table.types';
/**
* Table — data table molecule for tabular content with optional sorting,
* selection, and responsive mobile collapse.
*
* Pattern B (molecule, internal DOM): renders a native `
` inside
* shadow DOM for full a11y semantics (`role="table"`, `role="columnheader"`,
* `aria-sort`, `aria-selected`). Composes existing primitives — `mud-checkbox`
* for the selection column, `mud-icon` for sort chevrons. Status badges and
* row actions are projected via named slots so consumers can drop in
* `mud-tag`, `mud-button`, or any custom content per cell.
*
* At ≤640 px container width the inline padding shrinks from 24 → 16 to
* match Figma's "Mobile" breakpoint specs (table-header `4930:14358`,
* table-cell `649:4296`). The table structure itself is preserved; consumers
* who need a card-stack layout on narrow screens should wrap their own
* presentation around the data.
*
* @element mud-table
*
* @slot header-cell-{key} - Custom rendering for a specific column header.
* Replaces the auto-rendered label + sort affordance.
* @slot cell-{key} - Custom rendering for cells in a specific column. Useful for
* status tags, action buttons, or any non-text content. The
* consumer is responsible for providing one slotted element
* per row (matched in order to `rows`).
* @slot empty - Custom empty-state content when `rows` is empty or undefined.
*/
export declare class MudTable {
/**
* Header treatment. `default` is the subtle gray header used on light
* surfaces; `inverted` is the strong dark-on-light header for emphasis.
* @default 'default'
*/
headerStyle: TableHeaderStyle;
/**
* Row treatment.
* - `divided` (default) — horizontal divider line below every row.
* - `zebra` — alternating row backgrounds (no dividers).
* - `borderless` — flat rows, no dividers, no zebra.
* @default 'divided'
*/
rowStyle: TableRowStyle;
/**
* Enables hover highlight on rows. Independent of selection.
* @default false
*/
hoverable: boolean;
/**
* Renders a leading checkbox column for multi-row selection.
* @default false
*/
selectable: boolean;
/**
* Master switch that disables sorting for the WHOLE table, overriding every
* column's `sortable` flag at once. When `true`, headers render as plain
* labels — no sort chevron, not keyboard-focusable, no `aria-sort`, and
* `mudSort` never fires. Useful for read-only or loading states without
* having to mutate the `columns` array.
*
* Per-column control is unchanged: to make just one column non-sortable,
* omit `sortable` (or set it to `false`) on that column instead.
* @default false
*/
disableSort: boolean;
/**
* Column definitions. Each entry maps a row field (`key`) to a header
* `label`, an optional `sortable` flag, alignment, and width.
*/
columns?: TableColumn[];
/**
* Row data. Each row is keyed by the field declared in `rowIdField`
* (defaults to `id`). Missing IDs fall back to row index.
*/
rows?: TableRowData[];
/**
* Currently sorted column key (controlled). When unset no sort glyph is
* highlighted.
*/
sortColumn?: string;
/**
* Sort direction for `sortColumn`. Ignored when `sortColumn` is unset.
*/
sortDirection?: TableSortDirection;
/**
* Selected row IDs (controlled). Each entry must correspond to a row's
* `rowIdField` value (stringified). Toggling rows or the master
* checkbox emits `mudSelectionChange` — the consumer reflects the new
* array back via this prop.
*/
selectedRows?: string[];
/**
* Field used to uniquely identify a row. Used for selection state and
* stable React-like keys.
* @default 'id'
*/
rowIdField: string;
/**
* Accessible label propagated to the rendered `` element. Captured
* into `resolvedAriaLabel` on mount and the host attribute is stripped to
* avoid Stencil's auto-reflection loop.
*/
ariaLabel?: string;
private resolvedAriaLabel?;
private headerCellSlotted;
/** Internal host reference. */
host: HTMLElement;
/** Emitted when the user activates a sortable header. */
mudSort: EventEmitter;
/** Emitted when a row body is clicked (excluding the selection checkbox). */
mudRowClick: EventEmitter;
/** Emitted when the selection set changes. */
mudSelectionChange: EventEmitter;
validateHeaderStyle(next: TableHeaderStyle): void;
validateRowStyle(next: TableRowStyle): void;
validateSortDirection(next: TableSortDirection | undefined): void;
handleAriaLabelChange(next: string | undefined): void;
componentWillLoad(): void;
/**
* Stencil auto-reflects `@Prop()` values back onto the host attribute. For
* `aria-label` that creates an observer loop (host attr → prop → host attr).
* Capture the consumer-provided value into a state field, then strip the
* attribute so the loop never fires.
*/
private captureAriaLabel;
private getRowId;
private isRowSelected;
private allRowsSelected;
private someRowsSelected;
private handleSort;
handleHeaderKeyDown(event: KeyboardEvent): void;
private handleRowClick;
private handleSelectAll;
private handleRowSelect;
/**
* Builds the inline `style` object used to flow a consumer-defined column
* width into the rendered `| `. The value is exposed as a CSS custom
* property (`--col-width`) so the .th rule in mud-table.css owns the
* actual `width` declaration — keeping all visual rules in the CSS file
* while still allowing per-column overrides at runtime.
*/
private columnWidthStyle;
/**
* A column is sortable only when its own `sortable` flag is set AND the
* table-level `disableSort` master switch is off. Centralised here so every
* sort affordance (icon, focus, aria-sort, click, keyboard) stays in sync.
*/
private isColumnSortable;
private getAriaSort;
private renderSortIcon;
private onHeaderCellSlotChange;
private renderHeaderCellContent;
private renderCellContent;
private renderEmptyState;
render(): any;
}
|