Class TableCell

packages/main/src/TableCell.ts:28–98

* @class * * ### Overview * * The `ui5-table-cell` represents a cell inside of a `ui5-table`. * It is tightly coupled to the `ui5-table` and thus should only be used in the table component. * * ### ES6 Module Import * * `import @ui5/webcomponents/dist/TableCell.js;` * * @constructor * @e

 * @public
 */
@customElement({
	tag: "ui5-table-cell",
	styles: [TableCellBase.styles, TableCellStyles],
	template: TableCellTemplate,
})
class TableCell extends TableCellBase {
	/**
	 * Defines whether the cell is visually merged with the cell directly above it.
	 *
	 * This is useful if consecutive cells in a column have the same value and should visually appear as a single merged cell.
	 * Although the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.
	 * **Note:** This feature is disabled when cells are rendered as a popin, and should remain `false` for interactive cell content.
	 *
	 * @default false
	 * @since 2.21.0
	 * @public
	 */
	@property({ type: Boolean })
	merged = false;

	@query("#popin-header")
	_popinHeader?: HTMLElement;

	@query("#popin-content")
	_popinContent?: HTMLElement;

	onBeforeRendering() {
		super.onBeforeRendering();
		if (this.horizontalAlign) {
			this.style.textAlign = this.horizontalAlign;
			this.style.justifyContent = this.horizontalAlign;
		} else if (this._headerCell) {
			this.style.textAlign = `var(--halign-${this._headerCell._id})`;
			this.style.justifyContent = `var(--halign-${this._headerCell._id})`;
		}
	}

	_injectHeaderNodes(ref: HTMLElement | null) {
		if (ref && !ref.hasChildNodes()) {
			ref.replaceChildren(...this._popinHeaderNodes);
		}
	}

	get _headerCell() {
		const row = this.parentElement as TableRow | null;
		const table = row?.parentElement as Table | null;
		const index = row?.cells?.indexOf(this) ?? -1;

		return (index !== -1) ? table?.headerRow?.[0]?.cells?.[index] : null;
	}

	get _popinHeaderNodes() {
		const nodes: Node[] = [];
		const headerCell = this._headerCell;
		if (headerCell) {
			if (headerCell.popinText) {
				nodes.push(document.createTextNode(headerCell.popinText));
			} else {