@eui/components 19.1.2-snapshot-1741681025211 → 19.1.2-snapshot-1741955106555

package/fesm2022/eui-components-eui-table-v2.mjs

@@ -28,26 +28,53 @@ import * as i4$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { EuiListModule } from '@eui/components/eui-list';
 
+/**
+ * Service to manage the selection state of rows in a table.
+ * Allows tracking of selected rows and managing selection for individual and multiple rows.
+ */
 class EuiTableV2SelectableRowService {
     constructor() {
+        /**
+         * BehaviorSubject containing the selected rows.
+         */
         this.selectedRows$ = new BehaviorSubject([]);
+        /**
+         * BehaviorSubject containing the state of whether all rows are selected.
+         */
         this.isAllRowsSelected$ = new BehaviorSubject(false);
         this.lastSelectedRow = null;
         this.rows = [];
         this.propId = 'id';
     }
+    /**
+     * Observable stream of selected rows.
+     */
     get selectedRows() {
         return this.selectedRows$.asObservable();
     }
+    /**
+     * Observable stream of whether all rows are selected.
+     */
     get isAllRowsSelected() {
         return this.isAllRowsSelected$.asObservable();
     }
+    /**
+     * Sets the property name used to identify rows as unique.
+     */
     setPropId(value) {
         this.propId = value;
     }
+    /**
+     * Gets the current property name used to identify rows.
+     */
     getPropId() {
         return this.propId;
     }
+    /**
+     * Registers a row as selectable.
+     *
+     * @param row Row to register.
+     */
     registerRow(row) {
         if (row && !this.rows.find((r) => r[this.propId] === row[this.propId])) {
             this.rows.push(row);
@@ -59,17 +86,35 @@ class EuiTableV2SelectableRowService {
             }
         }
     }
+    /**
+     * Registers a set of rows as selectable.
+     *
+     * @param rows Set of rows to register.
+     */
     registerRows(rows) {
         rows.forEach((row) => {
             this.registerRow(row);
         });
     }
+    /**
+     * Unregisters a row as selectable.
+     *
+     * @param row Row to unregister.
+     */
     unregisterRow(row) {
         this.rows = this.rows.filter(r => r[this.propId] !== row[this.propId]);
     }
+    /**
+     * Unregisters all rows.
+     */
     unregisterRows() {
         this.rows = [];
     }
+    /**
+     * Selects a row.
+     *
+     * @param row Row to select.
+     */
     selectRow(row) {
         if (this.selectedRows$.value.indexOf(row) === -1) {
             this.selectedRows$.next([...this.selectedRows$.value, row]);
@@ -77,6 +122,11 @@ class EuiTableV2SelectableRowService {
         this.isAllRowsSelected$.next(this.selectedRows$.value.length === this.rows.length);
         this.lastSelectedRow = row;
     }
+    /**
+     * Unselects a row.
+     *
+     * @param row Row to unselect.
+     */
     unselectRow(row) {
         if (row && this.selectedRows$.value.find((r) => r[this.propId] === row[this.propId]) !== undefined) {
             const value = this.selectedRows$.value.filter((selected) => selected[this.propId] !== row[this.propId]);
@@ -84,24 +134,45 @@ class EuiTableV2SelectableRowService {
             this.isAllRowsSelected$.next(false);
         }
     }
+    /**
+     * Selects a set of rows.
+     *
+     * @param rows Rows to select.
+     */
     selectRows(rows) {
         this.selectedRows$.next([...rows]);
         this.isAllRowsSelected$.next(this.rows.length > 0 && this.rows.length === this.selectedRows$.value.length);
         this.lastSelectedRow = rows[rows.length - 1];
     }
+    /**
+     * Select all rows.
+     */
     selectAllRows() {
         this.selectedRows$.next([...this.rows]);
         this.isAllRowsSelected$.next(true);
         this.lastSelectedRow = this.rows[this.rows.length - 1];
     }
+    /**
+     * Unselect all rows.
+     */
     unselectAllRows() {
         this.selectedRows$.next([]);
         this.isAllRowsSelected$.next(false);
         this.lastSelectedRow = null;
     }
+    /**
+     * Gets the list of registered rows.
+     *
+     * @returns The list of registered rows.
+     */
     getRows() {
         return this.rows;
     }
+    /**
+     * Gets the last selected row.
+     *
+     * @returns The last selected row.
+     */
     getLastSelectedRow() {
         return this.lastSelectedRow;
     }
@@ -112,14 +183,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             type: Injectable
         }] });
 
+/**
+ * Service to manage the sorting state of columns in a table.
+ * Uses a `BehaviorSubject` to store and emit the current sorting values.
+ */
 class EuiTableV2SortService {
     constructor() {
+        /**
+         * BehaviorSubject containing the current sorting information.
+         */
         this.sorts$ = new BehaviorSubject([]);
         this.isCurrentMultiSortable = false;
     }
+    /**
+     * Observable stream of sorting values.
+     */
     get sorts() {
         return this.sorts$.asObservable();
     }
+    /**
+     * Sets the ordering order for a given column
+     *
+     * @param sort The name of the column to sort.
+     * @param order The sorting order (ascending or descending).
+     * @param isMultiSortable Whether multi-sorting is allowed.
+     */
     setSort(sort, order, isMultiSortable) {
         if (isMultiSortable && this.isCurrentMultiSortable) {
             let sortValues = this.sorts$.value;
@@ -142,6 +230,11 @@ class EuiTableV2SortService {
         }
         this.isCurrentMultiSortable = isMultiSortable;
     }
+    /**
+     * Sets the full list of sorting values.
+     *
+     * @param sorts The list of sorts to apply.
+     */
     setSorts(sorts) {
         this.sorts$.next(sorts);
         this.isCurrentMultiSortable = sorts.length > 1;
@@ -158,7 +251,70 @@ var ScrollinDirection;
     ScrollinDirection["UP"] = "UP";
     ScrollinDirection["DOWN"] = "DOWN";
 })(ScrollinDirection || (ScrollinDirection = {}));
+/**
+ * @description
+ * The `eui-table-v2` component has been built to offer various requested features including fast performance and excellent level of control over tabular presentation of data.
+ *
+ * The eui-table is quite simple of usage and requires :
+ *
+ *     - rows : the data value input as an array of objects, usually fetched from a service (data payload),
+ *     - view : this is the template for the presentation with its various options such as the search filter, the paginator, sortable columns, etc.
+ *
+ * @example
+ * ```
+ * <table class="eui-table-default">
+ *     <thead>
+ *         <tr>
+ *             <th>Country</th>
+ *             <th>Year</th>
+ *             <th>ISO</th>
+ *             <th>Population</th>
+ *             <th>Capital city</th>
+ *         </tr>
+ *     </thead>
+ *     <tbody>
+ *         \@for (row of data; track row) {
+ *             <tr>
+ *                 <td>{{ row.country }}</td>
+ *                 <td>{{ row.year }}</td>
+ *                 <td>{{ row.iso }}</td>
+ *                 <td>{{ row.population | number }}</td>
+ *                 <td>{{ row.capital }}</td>
+ *             </tr>
+ *         }
+ *     </tbody>
+ *     <tfoot>
+ *         <tr>
+ *             <td class="eui-u-text-center" colspan="5">Footer 1</td>
+ *         </tr>
+ *     </tfoot>
+ * </table>
+ * ```
+ *
+ * ```
+ * public data: Country[] = [
+ *     { id: 1, country: 'Austria', year: 1995, iso: 'AT', population: 8504850, capital: 'Vienna' },
+ *     { id: 2, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
+ *     { id: 3, country: 'Bulgaria', year: 2007, iso: 'BG', population: 7364570, capital: 'Sofia' },
+ *     { id: 4, country: 'Croatia', year: 2013, iso: 'HR', population: 4284889, capital: 'Zagreb' },
+ *     { id: 5, country: 'Cyprus', year: 2004, iso: 'CY', population: 1117000, capital: 'Nicosia' },
+ *     { id: 6, country: 'Czechia', year: 2004, iso: 'CZ', population: 10513209, capital: 'Prague' },
+ *     { id: 7, country: 'Denmark', year: 1973, iso: 'DK', population: 5655750, capital: 'Copenhagen' },
+ *     { id: 8, country: 'Estonia', year: 2004, iso: 'EE', population: 1315819, capital: 'Tallinn' },
+ *     { id: 9, country: 'Finland', year: 1995, iso: 'FI', population: 5470820, capital: 'Helsinki' },
+ *     { id: 10, country: 'France', year: 1958, iso: 'FR', population: 67210000, capital: 'Paris' },
+ * ];
+ * ```
+ *
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-table-v2}.
+ */
 class EuiTableV2Component {
+    /**
+     * @description
+     * Computes and returns the CSS classes for the component based on its current state.
+     *
+     * @returns {string} Space-separated string of CSS class names
+     */
     get cssClasses() {
         return [
             this.baseStatesDirective.getCssClasses('eui-table-default eui-table-v2'),
@@ -180,29 +336,143 @@ class EuiTableV2Component {
         this.euiTableV2SortService = euiTableV2SortService;
         this.baseStatesDirective = baseStatesDirective;
         this.renderer = renderer;
+        /**
+         * Data to display in the table.
+         *
+         * @type {DATA[]} Generic type of data
+         */
         this.data = [];
+        /**
+         * Unicity criteria of the data.
+         *
+         * @default 'id'
+         */
         this.propId = 'id';
+        /**
+         * In combination with `isVirtualScroll`. Row height use by virtual scroll calculation.
+         *
+         * @default 41
+         */
         this.itemSize = 41;
+        /**
+         * In combination with `isDataSelectable`. Rows to be selected by default.
+         *
+         * @type {DATA[]} Set of data to select.
+         */
         this.preselectedRows = [];
+        /**
+         * Wheter the table uses virtual scroll to display data.
+         *
+         * `eui-table-v2` selector needs to be used in order to make virtual scroll working properly.
+         *
+         * @example
+         * <eui-table-v2 isVirtualScroll>
+         * ...
+         * </eui-table-v2>
+         *
+         * @default false
+         */
         this.isVirtualScroll = false;
+        /**
+         * In combination with `isVirtualScroll`. Wheter the table caches the data when scroll.
+         * Means that if a scroll level has already loads data, the `scrollChange` event won't be emitted.
+         *
+         * @default false
+         */
         this.isVirtualScrollCache = false;
+        /**
+         * Wheter the table header is sticky.
+         * In order to use eui-table sticky feature and control the scrolling overflow,
+         * we recommend to wrap the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height.
+         *
+         * @default false
+         */
         this.hasStickyHeader = false;
+        /**
+         * Wheter the table footer is sticky.
+         * In order to use eui-table sticky feature and control the scrolling overflow,
+         * we recommend to wrap the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height.
+         *
+         * @default false
+         */
         this.hasStickyFooter = false;
+        /**
+         * Wheter the table col is sticky.
+         * In order to use eui-table sticky feature and control the scrolling overflow,
+         * we recommend to wrap the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height.
+         *
+         * Only first or latest columns can be sticky.
+         *
+         * @default false
+         */
         this.hasStickyCols = false;
+        /**
+         * Wheter the table is reponsive.
+         *
+         * @default false
+         */
         this.isTableResponsive = false;
+        /**
+         * Wheter the table uses async data.
+         * In this configuration, pagination, filtering and sorting are managed by the backend.
+         *
+         * When data are async, paginator and filter must not be bound to the eui-table component like in other sample.
+         *
+         * @default false
+         */
         this.isAsync = false;
+        /**
+         * In combination with `isVirtualScroll`. Total length of data that are displayed in the table with virtual scroll.
+         *
+         * @default 0
+         */
         this.virtualScrollAsyncItemsLength = 0;
+        /**
+         * In combination with `isVirtualScroll`. Nb of data items to load in the table.
+         *
+         * @default 50
+         */
         this.virtualScrollNbRows = 50;
+        /**
+         * Wheter the cols can be reordered.
+         *
+         * @default false
+         */
         this.isColsOrderable = false;
+        /**
+         * Wheter a loading spinner is displayed in the table.
+         *
+         * @default false
+         */
         this.isLoading = false;
+        /**
+         * Wheter the 'select all' checkbox in the header will select ONLY items in the current page.
+         *
+         * If `false`, all items across the pages will be selected.
+         *
+         * @default true
+         */
         this.isSelectOnlyVisibleRows = true;
+        /**
+         * @deprecated
+         * Has been deprecated to align with Design System
+         */
         this.isTableBordered = false;
         this.loading = [];
         this.nbCols = [];
         this.dataRendered = [];
         this.cdkVirtualScrollViewportOverflowValue = 'auto';
+        /**
+         * In combination with `isVirtualScroll`. Event emitted when a scroll is done.
+         */
         this.scrollChange = new EventEmitter();
+        /**
+         * In combination with `isDataSelectable` on a row. Event emitted when the selection changes with an array of data.
+         */
         this.rowsSelect = new EventEmitter();
+        /**
+         * In combination with `isSortable` on the cols. Event emitted when the sort changes with the property displayed in the col and the order as `ASC` or `DESC`.
+         */
         this.sortChange = new EventEmitter();
         this.destroy$ = new Subject();
         this.virtualScrollLastMultiple = 0;
@@ -321,9 +591,9 @@ class EuiTableV2Component {
             }
         });
     }
-    test(index) {
-        this.cdkVirtualScrollViewport.scrollToIndex(index);
-    }
+    // test(index): void {
+    //     this.cdkVirtualScrollViewport.scrollToIndex(index)
+    // }
     ngAfterViewInit() {
         this.stickyFeatureHandler();
         if (this.isVirtualScroll) {
@@ -443,6 +713,13 @@ class EuiTableV2Component {
     setSort(sorts) {
         this.euiTableV2SortService.setSorts(sorts);
     }
+    /**
+     * Filters the table's data based on a string declared in `EuiTableV2FilterComponent`
+     *
+     * @param filter String to filter the data
+     * @param r Array of data to filter
+     * @returns The set of data matching the filter
+     */
     filterData(filter, r) {
         const rows = filter ?
             r.filter((row) => {
@@ -454,27 +731,42 @@ class EuiTableV2Component {
         this.filteredData = rows;
         return rows;
     }
+    /**
+     * Get the top position in px of the sticky header.
+     */
     get stickyHeaderTopPosition() {
         if (!this.cdkVirtualScrollViewport || !this.cdkVirtualScrollViewport['_renderedContentOffset']) {
             return '0';
         }
         return (-this.cdkVirtualScrollViewport['_renderedContentOffset'] - 1) + 'px';
     }
+    /**
+     * Get the bottom position in px of the sticky footer.
+     */
     get stickyFooterBottomPosition() {
         if (!this.cdkVirtualScrollViewport || !this.cdkVirtualScrollViewport['_renderedContentOffset']) {
             return '-1px';
         }
         return this.cdkVirtualScrollViewport['_renderedContentOffset'] - 1 + 'px';
     }
+    /**
+     * Get the width in px of the viewport in which the table is.
+     */
     get cdkVirtualScrollViewportWidth() {
         return (this.elementRef.nativeElement?.parentElement?.clientWidth || 0) + 'px';
     }
+    /**
+     * Get the width, as a number, of the host element.
+     */
     get hostWidth() {
         return this.elementRef.nativeElement.style.width;
     }
     trackByFn(index) {
         return index;
     }
+    /**
+     * Handles table features such as sorting, filtering, and pagination before rendering.
+     */
     tableFeaturesHandler() {
         this.tableFeaturesHandlerSubscription = combineLatest(this.paginator ? this.paginator.page$ : new BehaviorSubject(null), this.filter ? this.filter.filter$ : new BehaviorSubject(null), this.euiTableV2SortService.sorts).pipe(takeUntil(this.destroy$)).subscribe(([pagination, filter, sorts]) => {
             let r = [...this.dataSrc];
@@ -498,6 +790,13 @@ class EuiTableV2Component {
             }
         });
     }
+    /**
+     * Sorts the data based on the sort, property and order, criterias.
+     *
+     * @param sortCriterias Array of sort criterias containing the property on which the sort will be performed and the order (`ASC` or `DESC`).
+     * @param r Array of data to sort
+     * @returns A sorted array
+     */
     sortData(sortCriterias, r) {
         if (sortCriterias.every(criteria => criteria.order === null)) {
             return r.slice();
@@ -531,14 +830,36 @@ class EuiTableV2Component {
             return 0;
         });
     }
+    /**
+     * Slices the data array based on the pagination event.
+     *
+     * @param pagination Object containing the page, the page size and the total number of pages.
+     * @param r Array of data to paginate.
+     * @returns The sliced array to render.
+     */
     paginateRows(pagination, r) {
         this.page = pagination.page;
         this.pageSize = pagination.pageSize;
         return r.slice(this.page * this.pageSize, this.page * this.pageSize + this.pageSize);
     }
+    /**
+     * Round down the index to the nearest multiple of the number of rows.
+     *
+     * @param index Index of the current scroll level.
+     * @param nbRows Number of rows to display.
+     * @returns A rounded number.
+     */
     roundDown(index, nbRows) {
         return Math.floor(index / nbRows) * nbRows;
     }
+    /**
+     * Checks if in the range of data to render some of them had already been loaded or not.
+     *
+     * @param startIndex Start index of the range to check
+     * @param limit Number of item to check after the start index.
+     * @param dataRendered Array of data to check
+     * @returns The index of the first undefined item in the range or `-1` if not found.
+     */
     hasUndefinedInRange(startIndex, limit, dataRendered) {
         for (let i = startIndex; i < startIndex + limit; i++) {
             if (dataRendered[i] === undefined) {
@@ -547,6 +868,9 @@ class EuiTableV2Component {
         }
         return -1;
     }
+    /**
+     * Calcultates the position of columns that are sticky.
+     */
     stickyFeatureHandler() {
         setTimeout(() => {
             const containerWidth = this.elementRef.nativeElement?.parentElement?.clientWidth || 0;
@@ -591,16 +915,29 @@ class EuiTableV2Component {
             }
         }, 250);
     }
+    /**
+     * Handles the selection of rows.
+     */
     selectRowsFeatureHandler() {
         this.euiTableV2SelectableRowService.selectedRows.pipe(skip(1), takeUntil(this.destroy$)).subscribe((selected) => {
             this.rowsSelect.emit(selected);
         });
     }
+    /**
+     * Handles the sorting of columns.
+     */
     sortFeatureHandler() {
         this.euiTableV2SortService.sorts.pipe(skip(1), takeUntil(this.destroy$)).subscribe((sorts) => {
             this.sortChange.emit(sorts);
         });
     }
+    /**
+     * Get the properties of the object matching the filter string.
+     *
+     * @param row Row to extract the property from.
+     * @param filter String to search in the properties.
+     * @returns An array of properties matching the filter.
+     */
     getProps(row, filter) {
         const isObject = (val) => val && typeof val === 'object';
         const addDelimiter = (a, b) => (a && a !== '0' ? `${a}.${b}` : b);
@@ -618,11 +955,18 @@ class EuiTableV2Component {
         paths(row);
         return props;
     }
+    /**
+     * Get a property of an object based on the path.
+     *
+     * @param obj Row to extract the property from.
+     * @param prop Path of the property to extract.
+     * @returns The value of the property
+     */
     getObjProp(obj, prop) {
         return prop ? prop.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), obj || self) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiTableV2Component, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: EuiTableV2SelectableRowService }, { token: EuiTableV2SortService }, { token: i3.BaseStatesDirective }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: EuiTableV2Component, isStandalone: false, selector: "eui-table-v2, table[euiTableV2]", inputs: { data: "data", propId: "propId", itemSize: "itemSize", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", isVirtualScroll: ["isVirtualScroll", "isVirtualScroll", booleanAttribute], isVirtualScrollCache: ["isVirtualScrollCache", "isVirtualScrollCache", booleanAttribute], hasStickyHeader: ["hasStickyHeader", "hasStickyHeader", booleanAttribute], hasStickyFooter: ["hasStickyFooter", "hasStickyFooter", booleanAttribute], hasStickyCols: ["hasStickyCols", "hasStickyCols", booleanAttribute], isTableResponsive: ["isTableResponsive", "isTableResponsive", booleanAttribute], isAsync: ["isAsync", "isAsync", booleanAttribute], virtualScrollAsyncItemsLength: ["virtualScrollAsyncItemsLength", "virtualScrollAsyncItemsLength", numberAttribute], virtualScrollNbRows: ["virtualScrollNbRows", "virtualScrollNbRows", numberAttribute], isColsOrderable: ["isColsOrderable", "isColsOrderable", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], isSelectOnlyVisibleRows: ["isSelectOnlyVisibleRows", "isSelectOnlyVisibleRows", booleanAttribute], isTableBordered: ["isTableBordered", "isTableBordered", booleanAttribute] }, outputs: { scrollChange: "scrollChange", rowsSelect: "rowsSelect", sortChange: "sortChange" }, host: { properties: { "class": "this.cssClasses" } }, providers: [EuiTableV2SelectableRowService, EuiTableV2SortService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["cdkVirtualScrollViewport"], descendants: true }, { propertyName: "cdkVirtualScrollViewportElement", first: true, predicate: ["cdkVirtualScrollViewportElement"], descendants: true, read: ElementRef }, { propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective }], ngImport: i0, template: "<!-- <button (click)=\"test(19250)\">19250</button>\n<button (click)=\"test(7895)\">7895</button>\n<button (click)=\"test(16860)\">16860</button>\n<button (click)=\"test(16870)\">16870</button>\n<button (click)=\"test(16880)\">16880</button>\n<button (click)=\"test(16890)\">16890</button>\n<button (click)=\"test(16900)\">16900</button>\n<button (click)=\"test(26998)\">26998</button>\n<button (click)=\"test(28000)\">28000</button> -->\n@if (isVirtualScroll) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eui-table-v2__scroll-viewport\"\n        [itemSize]=\"itemSize\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"{{ cssClasses }}\" [style.width]=\"hostWidth\">\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-container>\n                    <ng-template\n                        [ngTemplateOutlet]=\"bodyTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                    </ng-template>\n                </ng-container>\n            }\n            @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize\">\n        <td *ngFor=\"let __ of nbCols\"><eui-skeleton line euiRounded></eui-skeleton></td>\n    </tr>\n</ng-template>\n", styles: [":root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-table-v2__scroll-viewport{min-height:100%;width:100%}.eui-19 .eui-table-v2__scrollable-wrapper{overflow:auto}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-table-v2__scrollable-wrapper{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-table-v2__orderable-cols-preview,.eui-19 .eui-table-v2__orderable-rows-preview{display:none}.eui-19 .eui-table-v2--highlighted{background-color:var(--eui-c-accent);text-decoration:none}.eui-19 .eui-table-v2--virtual-scroll{width:100%;height:100%}.eui-19 .eui-table-v2--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-19 .eui-table-v2--cols-orderable tr{display:table-row}.eui-19 .eui-table-v2--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-19 .eui-table-v2--loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:1000001}.eui-19 .eui-table-v2--loading:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.eui-19 .eui-table-v2--sticky{max-width:none!important}.eui-19 .eui-table-v2--sticky-header thead{position:sticky;top:0;z-index:8}.eui-19 .eui-table-v2--sticky-header thead th,.eui-19 .eui-table-v2--sticky-header thead td{background-color:inherit}.eui-19 .eui-table-v2--sticky-header.eui-table-v2-sticky-col thead{z-index:9}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(odd) td{background-color:inherit}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(2n) td{background-color:inherit}.eui-19 .eui-table-v2--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-19 .eui-table-v2--sticky-footer tfoot tr td{background-color:inherit}.eui-19 .eui-table-v2--sticky-cols .eui-table-v2__col--sticky{position:sticky;z-index:1}.eui-19 .eui-table-v2__row--selected td{background-color:var(--eui-c-primary-lightest)}@media screen and (max-width: 767px){.eui-19 .eui-table-v2.eui-table-default--responsive{width:100%!important}.eui-19 .eui-table-v2.eui-table-default--responsive thead,.eui-19 .eui-table-v2.eui-table-default--responsive tbody,.eui-19 .eui-table-v2.eui-table-default--responsive tfoot,.eui-19 .eui-table-v2.eui-table-default--responsive th,.eui-19 .eui-table-v2.eui-table-default--responsive td,.eui-19 .eui-table-v2.eui-table-default--responsive tr{display:block}.eui-19 .eui-table-v2.eui-table-default--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-19 .eui-table-v2.eui-table-default--responsive tr{height:auto}.eui-19 .eui-table-v2.eui-table-default--responsive td{border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-neutral-bg);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-19 .eui-table-v2.eui-table-default--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-19 .eui-table-v2.eui-table-default--responsive tfoot tr td:empty{display:none!important}.eui-19 .eui-table-v2 .actionsColumn,.eui-19 .eui-table-v2 .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-19 .eui-table-v2__sticky-container{height:auto;width:auto!important}.eui-19 .eui-table-v2--sticky-cols th,.eui-19 .eui-table-v2--sticky-cols td,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky{width:auto;z-index:auto}.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-19 .eui-table-v2--sticky-cols tfoot tr td:empty{display:none!important}}.eui-19 .eui-table-v2__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-19 .eui-table-v2__filter--responsive{width:100%}.eui-19 .eui-table-v2__filter-input{padding-left:var(--eui-s-3xl)!important}.eui-19 .eui-table-v2__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:var(--eui-s-xs)}.eui-19 .eui-table-v2__sortable-col-multisort-index{font:var(--eui-f-s)}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content .eui-table-v2__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i6.EuiSkeletonComponent, selector: "eui-skeleton", inputs: ["circle", "line", "square", "rectangle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: EuiTableV2Component, isStandalone: false, selector: "eui-table-v2, table[euiTableV2]", inputs: { data: "data", propId: "propId", itemSize: "itemSize", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", isVirtualScroll: ["isVirtualScroll", "isVirtualScroll", booleanAttribute], isVirtualScrollCache: ["isVirtualScrollCache", "isVirtualScrollCache", booleanAttribute], hasStickyHeader: ["hasStickyHeader", "hasStickyHeader", booleanAttribute], hasStickyFooter: ["hasStickyFooter", "hasStickyFooter", booleanAttribute], hasStickyCols: ["hasStickyCols", "hasStickyCols", booleanAttribute], isTableResponsive: ["isTableResponsive", "isTableResponsive", booleanAttribute], isAsync: ["isAsync", "isAsync", booleanAttribute], virtualScrollAsyncItemsLength: ["virtualScrollAsyncItemsLength", "virtualScrollAsyncItemsLength", numberAttribute], virtualScrollNbRows: ["virtualScrollNbRows", "virtualScrollNbRows", numberAttribute], isColsOrderable: ["isColsOrderable", "isColsOrderable", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], isSelectOnlyVisibleRows: ["isSelectOnlyVisibleRows", "isSelectOnlyVisibleRows", booleanAttribute], isTableBordered: ["isTableBordered", "isTableBordered", booleanAttribute] }, outputs: { scrollChange: "scrollChange", rowsSelect: "rowsSelect", sortChange: "sortChange" }, host: { properties: { "class": "this.cssClasses" } }, providers: [EuiTableV2SelectableRowService, EuiTableV2SortService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["cdkVirtualScrollViewport"], descendants: true }, { propertyName: "cdkVirtualScrollViewportElement", first: true, predicate: ["cdkVirtualScrollViewportElement"], descendants: true, read: ElementRef }, { propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective }], ngImport: i0, template: "@if (isVirtualScroll) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eui-table-v2__scroll-viewport\"\n        [itemSize]=\"itemSize\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"{{ cssClasses }}\" [style.width]=\"hostWidth\">\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-container>\n                    <ng-template\n                        [ngTemplateOutlet]=\"bodyTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                    </ng-template>\n                </ng-container>\n            }\n            @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize\">\n        <td *ngFor=\"let __ of nbCols\"><eui-skeleton line euiRounded></eui-skeleton></td>\n    </tr>\n</ng-template>\n", styles: [":root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-table-v2__scroll-viewport{min-height:100%;width:100%}.eui-19 .eui-table-v2__scrollable-wrapper{overflow:auto}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-table-v2__scrollable-wrapper{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-table-v2__orderable-cols-preview,.eui-19 .eui-table-v2__orderable-rows-preview{display:none}.eui-19 .eui-table-v2--highlighted{background-color:var(--eui-c-accent);text-decoration:none}.eui-19 .eui-table-v2--virtual-scroll{width:100%;height:100%}.eui-19 .eui-table-v2--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-19 .eui-table-v2--cols-orderable tr{display:table-row}.eui-19 .eui-table-v2--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-19 .eui-table-v2--loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:1000001}.eui-19 .eui-table-v2--loading:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.eui-19 .eui-table-v2--sticky{max-width:none!important}.eui-19 .eui-table-v2--sticky-header thead{position:sticky;top:0;z-index:8}.eui-19 .eui-table-v2--sticky-header thead th,.eui-19 .eui-table-v2--sticky-header thead td{background-color:inherit}.eui-19 .eui-table-v2--sticky-header.eui-table-v2-sticky-col thead{z-index:9}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(odd) td{background-color:inherit}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(2n) td{background-color:inherit}.eui-19 .eui-table-v2--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-19 .eui-table-v2--sticky-footer tfoot tr td{background-color:inherit}.eui-19 .eui-table-v2--sticky-cols .eui-table-v2__col--sticky{position:sticky;z-index:1}.eui-19 .eui-table-v2__row--selected td{background-color:var(--eui-c-primary-lightest)}@media screen and (max-width: 767px){.eui-19 .eui-table-v2.eui-table-default--responsive{width:100%!important}.eui-19 .eui-table-v2.eui-table-default--responsive thead,.eui-19 .eui-table-v2.eui-table-default--responsive tbody,.eui-19 .eui-table-v2.eui-table-default--responsive tfoot,.eui-19 .eui-table-v2.eui-table-default--responsive th,.eui-19 .eui-table-v2.eui-table-default--responsive td,.eui-19 .eui-table-v2.eui-table-default--responsive tr{display:block}.eui-19 .eui-table-v2.eui-table-default--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-19 .eui-table-v2.eui-table-default--responsive tr{height:auto}.eui-19 .eui-table-v2.eui-table-default--responsive td{border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-neutral-bg);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-19 .eui-table-v2.eui-table-default--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-19 .eui-table-v2.eui-table-default--responsive tfoot tr td:empty{display:none!important}.eui-19 .eui-table-v2 .actionsColumn,.eui-19 .eui-table-v2 .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-19 .eui-table-v2__sticky-container{height:auto;width:auto!important}.eui-19 .eui-table-v2--sticky-cols th,.eui-19 .eui-table-v2--sticky-cols td,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky{width:auto;z-index:auto}.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-19 .eui-table-v2--sticky-cols tfoot tr td:empty{display:none!important}}.eui-19 .eui-table-v2__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-19 .eui-table-v2__filter--responsive{width:100%}.eui-19 .eui-table-v2__filter-input{padding-left:var(--eui-s-3xl)!important}.eui-19 .eui-table-v2__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:var(--eui-s-xs)}.eui-19 .eui-table-v2__sortable-col-multisort-index{font:var(--eui-f-s)}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content .eui-table-v2__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i6.EuiSkeletonComponent, selector: "eui-skeleton", inputs: ["circle", "line", "square", "rectangle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiTableV2Component, decorators: [{
             type: Component,
@@ -631,7 +975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             directive: BaseStatesDirective,
                             inputs: [],
                         },
-                    ], template: "<!-- <button (click)=\"test(19250)\">19250</button>\n<button (click)=\"test(7895)\">7895</button>\n<button (click)=\"test(16860)\">16860</button>\n<button (click)=\"test(16870)\">16870</button>\n<button (click)=\"test(16880)\">16880</button>\n<button (click)=\"test(16890)\">16890</button>\n<button (click)=\"test(16900)\">16900</button>\n<button (click)=\"test(26998)\">26998</button>\n<button (click)=\"test(28000)\">28000</button> -->\n@if (isVirtualScroll) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eui-table-v2__scroll-viewport\"\n        [itemSize]=\"itemSize\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"{{ cssClasses }}\" [style.width]=\"hostWidth\">\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-container>\n                    <ng-template\n                        [ngTemplateOutlet]=\"bodyTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                    </ng-template>\n                </ng-container>\n            }\n            @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize\">\n        <td *ngFor=\"let __ of nbCols\"><eui-skeleton line euiRounded></eui-skeleton></td>\n    </tr>\n</ng-template>\n", styles: [":root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-table-v2__scroll-viewport{min-height:100%;width:100%}.eui-19 .eui-table-v2__scrollable-wrapper{overflow:auto}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-table-v2__scrollable-wrapper{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-table-v2__orderable-cols-preview,.eui-19 .eui-table-v2__orderable-rows-preview{display:none}.eui-19 .eui-table-v2--highlighted{background-color:var(--eui-c-accent);text-decoration:none}.eui-19 .eui-table-v2--virtual-scroll{width:100%;height:100%}.eui-19 .eui-table-v2--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-19 .eui-table-v2--cols-orderable tr{display:table-row}.eui-19 .eui-table-v2--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-19 .eui-table-v2--loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:1000001}.eui-19 .eui-table-v2--loading:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.eui-19 .eui-table-v2--sticky{max-width:none!important}.eui-19 .eui-table-v2--sticky-header thead{position:sticky;top:0;z-index:8}.eui-19 .eui-table-v2--sticky-header thead th,.eui-19 .eui-table-v2--sticky-header thead td{background-color:inherit}.eui-19 .eui-table-v2--sticky-header.eui-table-v2-sticky-col thead{z-index:9}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(odd) td{background-color:inherit}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(2n) td{background-color:inherit}.eui-19 .eui-table-v2--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-19 .eui-table-v2--sticky-footer tfoot tr td{background-color:inherit}.eui-19 .eui-table-v2--sticky-cols .eui-table-v2__col--sticky{position:sticky;z-index:1}.eui-19 .eui-table-v2__row--selected td{background-color:var(--eui-c-primary-lightest)}@media screen and (max-width: 767px){.eui-19 .eui-table-v2.eui-table-default--responsive{width:100%!important}.eui-19 .eui-table-v2.eui-table-default--responsive thead,.eui-19 .eui-table-v2.eui-table-default--responsive tbody,.eui-19 .eui-table-v2.eui-table-default--responsive tfoot,.eui-19 .eui-table-v2.eui-table-default--responsive th,.eui-19 .eui-table-v2.eui-table-default--responsive td,.eui-19 .eui-table-v2.eui-table-default--responsive tr{display:block}.eui-19 .eui-table-v2.eui-table-default--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-19 .eui-table-v2.eui-table-default--responsive tr{height:auto}.eui-19 .eui-table-v2.eui-table-default--responsive td{border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-neutral-bg);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-19 .eui-table-v2.eui-table-default--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-19 .eui-table-v2.eui-table-default--responsive tfoot tr td:empty{display:none!important}.eui-19 .eui-table-v2 .actionsColumn,.eui-19 .eui-table-v2 .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-19 .eui-table-v2__sticky-container{height:auto;width:auto!important}.eui-19 .eui-table-v2--sticky-cols th,.eui-19 .eui-table-v2--sticky-cols td,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky{width:auto;z-index:auto}.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-19 .eui-table-v2--sticky-cols tfoot tr td:empty{display:none!important}}.eui-19 .eui-table-v2__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-19 .eui-table-v2__filter--responsive{width:100%}.eui-19 .eui-table-v2__filter-input{padding-left:var(--eui-s-3xl)!important}.eui-19 .eui-table-v2__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:var(--eui-s-xs)}.eui-19 .eui-table-v2__sortable-col-multisort-index{font:var(--eui-f-s)}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content .eui-table-v2__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}\n"] }]
+                    ], template: "@if (isVirtualScroll) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eui-table-v2__scroll-viewport\"\n        [itemSize]=\"itemSize\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"{{ cssClasses }}\" [style.width]=\"hostWidth\">\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-container>\n                    <ng-template\n                        [ngTemplateOutlet]=\"bodyTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                    </ng-template>\n                </ng-container>\n            }\n            @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize\">\n        <td *ngFor=\"let __ of nbCols\"><eui-skeleton line euiRounded></eui-skeleton></td>\n    </tr>\n</ng-template>\n", styles: [":root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-table-v2__scroll-viewport{min-height:100%;width:100%}.eui-19 .eui-table-v2__scrollable-wrapper{overflow:auto}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-table-v2__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-table-v2__scrollable-wrapper{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-table-v2__orderable-cols-preview,.eui-19 .eui-table-v2__orderable-rows-preview{display:none}.eui-19 .eui-table-v2--highlighted{background-color:var(--eui-c-accent);text-decoration:none}.eui-19 .eui-table-v2--virtual-scroll{width:100%;height:100%}.eui-19 .eui-table-v2--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-white);color:var(--eui-c-info);cursor:move;opacity:1}.eui-19 .eui-table-v2--cols-orderable tr{display:table-row}.eui-19 .eui-table-v2--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-19 .eui-table-v2--loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-c-primary);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:1000001}.eui-19 .eui-table-v2--loading:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.eui-19 .eui-table-v2--sticky{max-width:none!important}.eui-19 .eui-table-v2--sticky-header thead{position:sticky;top:0;z-index:8}.eui-19 .eui-table-v2--sticky-header thead th,.eui-19 .eui-table-v2--sticky-header thead td{background-color:inherit}.eui-19 .eui-table-v2--sticky-header.eui-table-v2-sticky-col thead{z-index:9}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(odd) td{background-color:inherit}.eui-19 .eui-table-v2--sticky tbody tr:nth-of-type(2n) td{background-color:inherit}.eui-19 .eui-table-v2--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-19 .eui-table-v2--sticky-footer tfoot tr td{background-color:inherit}.eui-19 .eui-table-v2--sticky-cols .eui-table-v2__col--sticky{position:sticky;z-index:1}.eui-19 .eui-table-v2__row--selected td{background-color:var(--eui-c-primary-lightest)}@media screen and (max-width: 767px){.eui-19 .eui-table-v2.eui-table-default--responsive{width:100%!important}.eui-19 .eui-table-v2.eui-table-default--responsive thead,.eui-19 .eui-table-v2.eui-table-default--responsive tbody,.eui-19 .eui-table-v2.eui-table-default--responsive tfoot,.eui-19 .eui-table-v2.eui-table-default--responsive th,.eui-19 .eui-table-v2.eui-table-default--responsive td,.eui-19 .eui-table-v2.eui-table-default--responsive tr{display:block}.eui-19 .eui-table-v2.eui-table-default--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-19 .eui-table-v2.eui-table-default--responsive tr{height:auto}.eui-19 .eui-table-v2.eui-table-default--responsive td{border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-neutral-bg);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-19 .eui-table-v2.eui-table-default--responsive td:before{color:var(--eui-c-neutral-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-bold)}.eui-19 .eui-table-v2.eui-table-default--responsive tfoot tr td:empty{display:none!important}.eui-19 .eui-table-v2 .actionsColumn,.eui-19 .eui-table-v2 .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-19 .eui-table-v2__sticky-container{height:auto;width:auto!important}.eui-19 .eui-table-v2--sticky-cols th,.eui-19 .eui-table-v2--sticky-cols td,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky{width:auto;z-index:auto}.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-19 .eui-table-v2--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-19 .eui-table-v2--sticky-cols tfoot tr td:empty{display:none!important}}.eui-19 .eui-table-v2__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-19 .eui-table-v2__filter--responsive{width:100%}.eui-19 .eui-table-v2__filter-input{padding-left:var(--eui-s-3xl)!important}.eui-19 .eui-table-v2__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:var(--eui-s-xs)}.eui-19 .eui-table-v2__sortable-col-multisort-index{font:var(--eui-f-s)}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-19 .eui-table-v2__sortable-col .eui-table-v2__sortable-col-content .eui-table-v2__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: EuiTableV2SelectableRowService }, { type: EuiTableV2SortService }, { type: i3.BaseStatesDirective }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -712,6 +1056,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Output
             }] } });
 
+/**
+ * @description
+ * Directive used to activate the sticky feature on a column of the table.
+ */
 class EuiTableV2StickyColDirective {
     constructor() {
         this.class = 'eui-table-v2__col--sticky';
@@ -731,6 +1079,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * Directive used to activate the expandable feature on a orw of the table.
+ */
 class EuiTableV2ExpandableRowDirective {
     constructor(el, animationBuilder) {
         this.el = el;
@@ -763,9 +1115,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * Component used internally by `eui-table-v2` to add a 'select all' checkbox in the header of the table.
+ */
 class EuiTableV2SelectableHeaderComponent {
     constructor(euiDataTableSelectableRowService) {
         this.euiDataTableSelectableRowService = euiDataTableSelectableRowService;
+        /**
+         * Wheter a select all feature is available in the header.
+         *
+         * @default false
+         */
         this.isHeaderSelectable = true;
         this.isCheckedIndeterminate = false;
         this.isChecked = false;
@@ -784,6 +1145,11 @@ class EuiTableV2SelectableHeaderComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Gets the `aria-label` attribute for the checkbox element.
+     *
+     * @default `Unchecked`
+     */
     get ariaLabel() {
         if (!this.isChecked && !this.isCheckedIndeterminate) {
             return 'Unchecked';
@@ -795,6 +1161,11 @@ class EuiTableV2SelectableHeaderComponent {
             return 'Checked';
         }
     }
+    /**
+     * Handle the change of the selected status.
+     *
+     * @param e Change Event
+     */
     toggleCheckedState(e) {
         this.isChecked = e.target.checked;
         if (this.isChecked) {
@@ -815,7 +1186,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: [{ transform: booleanAttribute }]
             }] } });
 
+/**
+ * @description
+ * Component used internally by `eui-table-v2` to make a row selectable.
+ */
 class EuiTableV2SelectableRowComponent {
+    /**
+     * @description
+     * Computes and returns the CSS classes for the component based on its current state.
+     *
+     * @returns {string} Space-separated string of CSS class names
+     */
     get cssClasses() {
         return [
             'eui-table-v2__row',
@@ -828,7 +1209,17 @@ class EuiTableV2SelectableRowComponent {
     constructor(euiDataTableSelectableRowService, elementRef) {
         this.euiDataTableSelectableRowService = euiDataTableSelectableRowService;
         this.elementRef = elementRef;
+        /**
+         * Wheter the row is selected.
+         *
+         * @default false
+         */
         this.isChecked = false;
+        /**
+         * Wheter the selection can be done with the keyboard.
+         *
+         * @default false
+         */
         this.isKeyboardSelectable = false;
         this.propId = 'id';
         this.destroy$ = new Subject();
@@ -879,6 +1270,11 @@ class EuiTableV2SelectableRowComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Handle the change of the selected status.
+     *
+     * @param e Change Event
+     */
     toggleCheckedState(e) {
         this.isChecked = e.target.checked;
         if (this.isChecked) {
@@ -907,8 +1303,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * Component used with `eui-table-v2` to add a filter feature to the table.
+ */
 class EuiTableV2FilterComponent {
     constructor() {
+        /**
+         * Event emitted when the value of the input changes.
+         */
         this.filterChange = new EventEmitter();
         this.filter$ = new BehaviorSubject(null);
         this.form = new FormGroup({
@@ -916,6 +1319,12 @@ class EuiTableV2FilterComponent {
         });
         this.destroy$ = new Subject();
     }
+    /**
+     * @description
+     * Computes and returns the CSS classes for the component based on its current state.
+     *
+     * @returns {string} Space-separated string of CSS class names
+     */
     get cssClasses() {
         return [
             'eui-table-v2__filter',
@@ -932,6 +1341,11 @@ class EuiTableV2FilterComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Set the filter value and emit the change event.
+     *
+     * @param value Value of the input.
+     */
     setFilter(value) {
         this.filter$.next(value);
         this.filterChange.emit(value);
@@ -963,7 +1377,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['filterInput', { read: ElementRef }]
             }] } });
 
+/**
+ * @description
+ * Pipe used to highlight the matching string in the data of the table when used with filter feature.
+ *
+ * @example
+ * ```
+ * <td><span [innerHTML]="row.year | euiTableV2Highlight: strFilter"></span></td>
+ *
+ * strFilter = '19'
+ * ```
+ */
 class EuiTableV2HighlightPipe {
+    /**
+     * Wrap a matching string with a span element with a class name in the data of the table
+     *
+     * @param value Data displayed in a cell.
+     * @param strFilter Search string to highlight.
+     * @param className CSS class to add to the span element. Default: 'eui-table-v2--highlighted'
+     * @returns
+     */
     transform(value, strFilter, className = 'eui-table-v2--highlighted') {
         if (value) {
             if (strFilter && strFilter.length > 0) {
@@ -989,7 +1422,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 }]
         }] });
 
+/**
+ * @description
+ * Component used internally by `eui-table-v2` to make a column sortable.
+ */
 class EuiTableV2SortableColComponent {
+    /**
+     * @description
+     * Computes and returns the CSS classes for the component based on its current state.
+     *
+     * @returns {string} Space-separated string of CSS class names
+     */
     get cssClasses() {
         return ['eui-table-v2__sortable-col', this.sortDisabled ? 'eui-table-v2__sortable-col--disabled' : ''].join(' ').trim();
     }
@@ -997,8 +1440,23 @@ class EuiTableV2SortableColComponent {
         this.euiTableV2SortService = euiTableV2SortService;
         this.elementRef = elementRef;
         this.sortOrder = 'asc';
+        /**
+         * Wheter the column is sorted by defaut.
+         *
+         * @default false
+         */
         this.defaultOrder = false;
+        /**
+         * Wheter the sort is disabled on the column.
+         *
+         * @default false
+         */
         this.sortDisabled = false;
+        /**
+         * Wheter the sorting of the column can be cumulated with the one of other column.
+         *
+         * @default false
+         */
         this.isMultiSortable = false;
         this.order = null;
         this.isSorted = false;
@@ -1032,6 +1490,9 @@ class EuiTableV2SortableColComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Handles the click event on the sortable column.
+     */
     changeSort() {
         if (!this.sortDisabled) {
             if (this.order === 'asc') {
@@ -1046,6 +1507,10 @@ class EuiTableV2SortableColComponent {
             this.euiTableV2SortService.setSort(this.sortOn, this.order, this.isMultiSortable);
         }
     }
+    /**
+     * Handles the click event on the dropdown item when the column is multi-sortable.
+     * @param order An array of SortOrder. See {@link SortOrder}
+     */
     onDropdownItemClick(order) {
         this.euiTableV2SortService.setSort(this.sortOn, order, this.isMultiSortable);
     }
@@ -1076,6 +1541,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['euiDropdown']
             }] } });
 
+/**
+ * @description
+ * Module that provides the EuiTableV2 component and its dependencies
+ *
+ * @example
+ * ```
+ * \@NgModule({
+ *   imports: [EuiTableV2Module]
+ * })
+ * export class YourModule { }
+ * ```
+ */
 class EuiTableV2Module {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiTableV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: EuiTableV2Module, declarations: [EuiTableV2Component,