import type { EventEmitter } from '../../stencil-public-runtime'; import type { LocaleProp } from '../../utils/locale'; 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 a viewport width of ≤640 px 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}-{rowId} - Custom content for one cell: the column's `key` and the * row's `rowIdField` value (its index when the row has * none). Useful for status tags, action buttons, or any * non-text content. The cell follows its row when `rows` * is sorted or filtered. * @slot cell-{key}-{rowIndex} - Deprecated: addresses a row by its position, so the * content stays put when `rows` is reordered. Use * `cell-{key}-{rowId}`; when a row id equals another * row's index, the id wins. * @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; /** * Language of the built-in copy. Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; /** * Empty-state text shown when `rows` is empty or undefined. Overrides the `locale`'s copy * when set to a non-empty string. * @default 'Nu există date de afișat.' (ro-MD) */ emptyText?: string; /** * Accessible label for the header "select all rows" checkbox. Overrides the `locale`'s * copy when set to a non-empty string. * @default 'Selectează toate rândurile' (ro-MD) */ selectAllLabel?: string; /** * Accessible label for a row's selection checkbox. Carries a `{row}` placeholder, filled * with the row's 1-based position. Overrides the `locale`'s copy when set to a non-empty * string. * @default 'Selectează rândul {row}' (ro-MD) */ selectRowLabel?: string; /** * The host's `aria-label` (attribute or native `ariaLabel` property), propagated * to the rendered `
` element. */ private resolvedAriaLabel?; private headerCellSlotted; /** Internal host reference. */ host: HTMLMudTableElement; /** 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; private stopAriaLabel?; private stopLang?; /** Legacy cell-slot shapes already warned about, one warning per shape per instance. */ private warnedCellSlots; connectedCallback(): void; disconnectedCallback(): void; componentDidRender(): void; /** * Built-in strings in the resolved locale, with the override props on top. */ private messages; 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; /** * Warns once about each legacy cell-slot shape among the host's children: a bare * `cell-{key}`, which only the first row can receive (the DOM assigns a slot name to * the first slot that carries it), and the deprecated `cell-{key}-{rowIndex}`. */ private warnLegacyCellSlots; private renderCellContent; private renderEmptyState; render(): any; }