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; }