Class TableSelection

packages/main/src/TableSelection.ts:53–406

* @class * * ### Overview * * The `ui5-table-selection` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`. * * The component offers three selection modes: * * Single - select a single row. * * Multiple - select multiple rows. * * None - no s

 * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
 */
@customElement({ tag: "ui5-table-selection" })

/**
 * Fired when the selection is changed by user interaction.
 *
 * @public
 */
@event("change", {
	bubbles: true,
})

class TableSelection extends UI5Element implements ITableFeature {
	eventDetails!: {
		change: void,
	}
	/**
	 * Defines the selection mode.
	 *
	 * @default "Multiple"
	 * @public
	 */
	@property()
	mode: `${TableSelectionMode}` = "Multiple";

	/**
	 * Defines the selected rows separated by a space.
	 *
	 * @default ""
	 * @public
	 */
	@property()
	selected = "";

	readonly identifier = "TableSelection";
	_table?: Table;
	_rowsLength = 0;
	_rangeSelection?: {selected: boolean, isUp: boolean | null, rows: TableRow[], isMouse: boolean, shiftPressed: boolean} | null;

	onClickCaptureBound: (e: MouseEvent) => void;

	constructor() {
		super();
		this.onClickCaptureBound = this._onClickCapture.bind(this);
	}

	onTableActivate(table: Table) {
		this._table = table;
		this._invalidateTableAndRows();
	}

	onExitDOM() {
		this.mode = TableSelectionMode.None;
		this._invalidateTableAndRows();
		this._table = undefined;
	}

	onBeforeRendering() {
		this._invalidateTableAndRows();