@exmg/exm-grid 1.2.2 → 1.2.3

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid.js

@@ -1,331 +1,10 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { ExmgElement } from '@exmg/lit-base/index.js';
-import { property, customElement, state } from 'lit/decorators.js';
-import { cache } from 'lit/directives/cache.js';
-import '@exmg/exm-sortable/exm-sortable.js';
+import { customElement } from 'lit/decorators.js';
 import { style as exmgGridTableStyles } from '../styles/exm-grid-styles-css.js';
-import { ExmRowSelectable } from './featrues/exm-row-selectable.js';
-import { ExmQuerySelectors } from './utils/exm-query-selectors.js';
-import { ExmRowExpandable } from './featrues/exm-row-expandable.js';
-import { ExmColumnSortable } from './featrues/exm-column-sortable.js';
-import { ExmRowSortable } from './featrues/exm-row-sortable.js';
-/**
- * ### Styling
- * The following custom properties and mixins are available for styling:
- *
- * Custom property | Description | Default
- * ----------------|-------------|----------
- * `--exm-arrow-upward-url` | Url to icon that is used for soring direction indicator | `url('/assets/arrow-upward.svg');`
- * `--exm-table-card-width` | table card width | `100%;`
- * `--exm-table-card-margin-bottom` | table bottom margin  | `5px;`
- * `--exm-table-color` | table text color | `#02182b;`
- * `--exm-table-background-color` | table background color | `#ffffff;`
- * `--exm-table-box-shadow` | table box shadow | `#{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},`
- * `--exm-table-row-divider-color` | table rows separator color | `#dbdbdb;`
- * `--exm-table-row-selected-color` | selected row text color | `#02182b;`
- * `--exm-table-row-selected-background-color` | selected row background color | `#e2f1fe;`
- * `--exm-table-row-hover-color` | row hover text color | `#02182b;`
- * `--exm-table-row-hover-background-color` | row hover background color | `#f1f1f1;`
- * `--exm-table-row-dragged-background-color` | sortable row background color when dragged | `#f1f1f1;`
- * `--exm-table-rows-expanded-divider-border` | border between row and expanded row detail | `none;`
- * `--exm-table-rows-expanded-border` | border around row and expanded row detail | `1px solid #dbdbdb;`
- * `--exm-table-rows-expanded-background-color` | background color of row and expanded row detail | `#e2f1fe;`
- * `--exm-table-rows-expanded-color` | text color of row and expanded row detail | `#02182b;`
- * `--exm-table-th-color` | header text color | `#0071dc;`
- * `--exm-table-columns-background-color` | header background color | `#ffffff;`
- * `--exm-table-th-sortable-hover-color` | sortable header hover text color | `#02182b;`
- * `--exm-table-th-height` | header height | `48px;`
- * `--exm-table-th-sort-margin-left` | header margin after text but before icon | `0px;`
- * `--exm-table-td-height` | row cell height | `48px;`
- * `--exm-table-th-sort-icon-height` | sort icon height | `1em;`
- * `--exm-table-th-sort-icon-width` | sort icon width | `1em;`
- * `--exm-table-col-number-padding-right` | right padding of number column | `10px;`
- * `--exm-table-checkbox-cell-width` | width of cell with checkbox | `24px;`
- */
-let ExmGrid = class ExmGrid extends ExmgElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Array of data which mapped to rows
-         */
-        this.items = [];
-        /**
-         * Feature that turn on sort by column
-         */
-        this.sortable = false;
-        /**
-         * Feature that allow sort rows
-         * If table has turn on feature `selectable` then it takes precedence and `rowSelectable` will be ignored
-         */
-        this.rowsSortable = false;
-        /**
-         * Feature that allow select rows
-         */
-        this.rowsSelectable = false;
-        /**
-         * By default a ros is also selactable by clicking anywhere inside the row when the rowSElectable option is enabled
-         */
-        this.disableRowClickSelection = false;
-        /**
-         * Map of column names that should be hidden
-         */
-        this.hiddenColumnNames = {};
-        /**
-         * Map of row id and selection state
-         * Useful for setup default selection or manipulating programmatically
-         */
-        this.selectedRowIds = {};
-        /**
-         * Map of row id and expandable row state
-         * Useful for setup default expanded rows or manipulating programmatically
-         */
-        this.expandedRowIds = {};
-        /**
-         * Set table layout. If fixed then text overflow will be hidden and ellipsis added.
-         */
-        this.tableLayout = 'auto';
-        this.withToolbar = false;
-        this.componentReady = false;
-    }
-    getQuerySelectors() {
-        if (!this.querySelectors) {
-            throw new Error('ExmQuerySelector not initialized yet');
-        }
-        return this.querySelectors;
-    }
-    getTable() {
-        return this.getQuerySelectors().getTable();
-    }
-    getTableBody() {
-        return this.getQuerySelectors().getTableBody();
-    }
-    findTableBody() {
-        if (this.querySelectors) {
-            return this.getTableBody() || undefined;
-        }
-        return undefined;
-    }
-    // eslint-disable-next-line
-    getColumns(selector = 'th') {
-        return this.getQuerySelectors().getColumns(selector);
-    }
-    getBodyRowSelector(selector = '') {
-        return this.getQuerySelectors().getBodyRowSelector(selector);
-    }
-    canSortRows() {
-        return !this.sortable && this.rowsSortable;
-    }
-    rowsOrderChange(e) {
-        setTimeout(() => {
-            const { sourceIndex, targetIndex } = e.detail;
-            const items = [...this.items];
-            const movedElement = items[sourceIndex];
-            items.splice(sourceIndex, 1);
-            items.splice(targetIndex, 0, movedElement);
-            this.dispatchEvent(new CustomEvent('exm-grid-rows-order-updated', {
-                composed: true,
-                bubbles: true,
-                detail: { sourceIndex, targetIndex },
-            }));
-            this.dispatchEvent(new CustomEvent('exm-grid-rows-order-changed', {
-                composed: true,
-                bubbles: true,
-                detail: { items },
-            }));
-        }, 0);
-    }
-    updateColumnVisibility(previousHiddenColumnNames = {}) {
-        let visibleColumns = 0;
-        this.getColumns().forEach((column, index) => {
-            const columnKey = column.getAttribute('data-column-key');
-            visibleColumns += this.hiddenColumnNames[columnKey || ''] ? 0 : 1;
-            if (columnKey && previousHiddenColumnNames[columnKey] !== this.hiddenColumnNames[columnKey]) {
-                const nextDisplayValue = this.hiddenColumnNames[columnKey] ? 'none' : 'table-cell';
-                column.style.display = nextDisplayValue;
-                this.getTable()
-                    .querySelectorAll(`tbody.grid-data tr:not(.grid-row-detail) td:nth-child(${index + 1})`)
-                    .forEach((cell) => {
-                    cell.style.display = nextDisplayValue;
-                });
-            }
-        });
-        this.updateAutoColspan(visibleColumns);
-    }
-    updateAutoColspan(visibleColumns) {
-        this.getTable()
-            .querySelectorAll('[data-auto-colspan]')
-            .forEach((element) => {
-            const offset = Number.parseInt(element.getAttribute('data-auto-span') || '0', 10);
-            element.setAttribute('colspan', (visibleColumns - offset).toString());
-        });
-    }
-    observeExpandedRowIds(changedProps) {
-        if (changedProps.has('expandedRowIds')) {
-            Object.entries(this.expandedRowIds).forEach(([rowId, nextExpandedState]) => {
-                const expendableToggle = this.getTableBody().querySelector(this.getBodyRowSelector(`[data-row-key="${rowId}"] ${this.expandableToggleSelector}`));
-                if (expendableToggle) {
-                    const isExpanded = expendableToggle.hasAttribute('data-is-expanded');
-                    if (isExpanded !== nextExpandedState) {
-                        expendableToggle.dispatchEvent(new MouseEvent('click'));
-                    }
-                }
-            });
-        }
-    }
-    observeSelectedRowIds(changedProps) {
-        if (changedProps.has('selectedRowIds')) {
-            Object.entries(this.selectedRowIds).forEach(([rowId, nextSelectionState]) => {
-                const row = this.getTableBody().querySelector(this.getBodyRowSelector(`[data-row-key="${rowId}"]`));
-                if (row) {
-                    const isSelected = row.hasAttribute('data-selected');
-                    if (isSelected !== nextSelectionState) {
-                        row.dispatchEvent(new MouseEvent('click'));
-                    }
-                }
-            });
-        }
-    }
-    observeItems(changedProps) {
-        if (changedProps.has('items') && this.rowSelectableFeature) {
-            this.rowSelectableFeature.syncSelectedItems();
-        }
-    }
-    async initGridAttributes() {
-        await this.updateComplete;
-        const toolbarSlot = this.shadowRoot.querySelector('slot[name="toolbar"]');
-        if (toolbarSlot && toolbarSlot.assignedNodes && toolbarSlot.assignedNodes().length) {
-            // make TS happy - this.withToolbar is declared but never read
-            this.withToolbar = this.withToolbar || true;
-        }
-    }
-    async firstUpdated() {
-        const table = this.shadowRoot.host.querySelector('table');
-        const tableBody = table.querySelector('tbody.grid-data');
-        this.querySelectors = new ExmQuerySelectors(table, tableBody);
-        this.initGridAttributes();
-        const bodyRows = this.querySelectors.getBodyRows();
-        if (this.sortable) {
-            this.columnSortableFeature = new ExmColumnSortable(this.querySelectors, (event) => this.dispatchEvent(event), this.defaultSortColumn, this.defaultSortDirection);
-            this.columnSortableFeature.initFeature();
-        }
-        if (this.canSortRows()) {
-            this.rowSortableFeature = new ExmRowSortable(this.querySelectors);
-            this.rowSortableFeature.initFeature();
-        }
-        if (this.rowsSelectable) {
-            this.rowSelectableFeature = new ExmRowSelectable(this.querySelectors, (event) => this.dispatchEvent(event), this.disableRowClickSelection, this.selectableCheckboxSelector);
-            this.rowSelectableFeature.initFeature(bodyRows);
-        }
-        if (this.expandableToggleSelector) {
-            this.rowExpandableFeature = new ExmRowExpandable(this.querySelectors, this.expandableToggleSelector);
-            this.rowExpandableFeature.initFeature();
-        }
-        this.updateColumnVisibility();
-        bodyRows.forEach((row) => row.setAttribute('data-initialized', ''));
-        this.querySelectors.getColumns('th:not([title])').forEach((col) => col.setAttribute('title', col.innerText));
-        this.querySelectors.getTable().setAttribute('data-table-layout', this.tableLayout);
-        await this.updateComplete;
-        this.componentReady = true;
-    }
-    updated(changedProps) {
-        if (changedProps.has('hiddenColumnNames') || changedProps.has('items')) {
-            this.updateColumnVisibility(changedProps.get('hiddenColumnNames'));
-        }
-        this.observeItems(changedProps);
-        this.observeExpandedRowIds(changedProps);
-        this.observeSelectedRowIds(changedProps);
-        if (this.componentReady && changedProps.has('items')) {
-            const bodyRows = this.querySelectors.getBodyRowsNotInitialized();
-            if (this.rowSelectableFeature) {
-                this.rowSelectableFeature.updateFeature(bodyRows);
-            }
-            if (this.rowExpandableFeature) {
-                this.rowExpandableFeature.updateFeature();
-            }
-            if (this.rowSortableFeature) {
-                this.rowSortableFeature.updateFeature();
-            }
-            bodyRows.forEach((row) => row.setAttribute('data-initialized', ''));
-        }
-    }
-    renderWithoutSortable() {
-        return html ` <slot></slot> `;
-    }
-    renderWithSortable() {
-        return html `
-      <exm-sortable
-        orientation="${'vertical'}"
-        animation-enabled
-        item-selector="tbody.grid-data &gt; tr:not(.grid-row-detail)"
-        handle-selector=".grid-row-drag-handler"
-        .sortableHostNode="${this.findTableBody()}"
-        @dom-order-change="${this.rowsOrderChange}"
-      >
-        <slot></slot>
-      </exm-sortable>
-    `;
-    }
-    render() {
-        return html `
-      <div class="table-card-container">
-        <slot name="toolbar"></slot>
-        <div class="table-card">
-          <div class="table-container">
-            ${cache(this.canSortRows() ? this.renderWithSortable() : this.renderWithoutSortable())}
-          </div>
-          <slot name="pagination"></slot>
-        </div>
-      </div>
-    `;
-    }
+import { ExmGridBase } from './exm-grid-base.js';
+let ExmGrid = class ExmGrid extends ExmGridBase {
 };
 ExmGrid.styles = [exmgGridTableStyles];
-__decorate([
-    property({ type: Array })
-], ExmGrid.prototype, "items", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ExmGrid.prototype, "sortable", void 0);
-__decorate([
-    property({ type: String, attribute: 'default-sort-column' })
-], ExmGrid.prototype, "defaultSortColumn", void 0);
-__decorate([
-    property({ type: String, attribute: 'default-sort-direction' })
-], ExmGrid.prototype, "defaultSortDirection", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'rows-sortable' })
-], ExmGrid.prototype, "rowsSortable", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'rows-selectable' })
-], ExmGrid.prototype, "rowsSelectable", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'disable-row-click-selection' })
-], ExmGrid.prototype, "disableRowClickSelection", void 0);
-__decorate([
-    property({ type: String, attribute: 'selectable-checkbox-selector' })
-], ExmGrid.prototype, "selectableCheckboxSelector", void 0);
-__decorate([
-    property({ type: Object })
-], ExmGrid.prototype, "hiddenColumnNames", void 0);
-__decorate([
-    property({ type: Object })
-], ExmGrid.prototype, "selectedRowIds", void 0);
-__decorate([
-    property({ type: Object })
-], ExmGrid.prototype, "expandedRowIds", void 0);
-__decorate([
-    property({ type: String, attribute: 'expandable-toggle-selector', reflect: true })
-], ExmGrid.prototype, "expandableToggleSelector", void 0);
-__decorate([
-    property({ type: String, attribute: 'table-layout', reflect: true })
-], ExmGrid.prototype, "tableLayout", void 0);
-__decorate([
-    state()
-], ExmGrid.prototype, "querySelectors", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'data-with-toolbar' })
-], ExmGrid.prototype, "withToolbar", void 0);
 ExmGrid = __decorate([
     customElement('exm-grid')
 ], ExmGrid);

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-outlined-grid.d.ts

@@ -0,0 +1,9 @@
+import { ExmGridBase } from './exm-grid-base.js';
+export declare class ExmOutlinedGrid extends ExmGridBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-outlined-grid': ExmOutlinedGrid;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-outlined-grid.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style as exmgGridTableStyles, gridOutlineStyles } from '../styles/exm-grid-styles-css.js';
+import { ExmGridBase } from './exm-grid-base.js';
+let ExmOutlinedGrid = class ExmOutlinedGrid extends ExmGridBase {
+};
+ExmOutlinedGrid.styles = [exmgGridTableStyles, gridOutlineStyles];
+ExmOutlinedGrid = __decorate([
+    customElement('exm-outlined-grid')
+], ExmOutlinedGrid);
+export { ExmOutlinedGrid };
+//# sourceMappingURL=exm-outlined-grid.js.map

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { EventDetailRowsOrderChanged, EventDetailRowsOrderUpdated, EventDetailSelectedRowsChange, EventDetailSortChange, SORT_DIRECTION, } from './table/types/exm-grid-types.js';
 export { ExmGrid } from './table/exm-grid.js';
+export { ExmGridBase } from './table/exm-grid-base.js';
+export { ExmOutlinedGrid } from './table/exm-outlined-grid.js';
 export { ExmGridPagination } from './table/exm-grid-pagination.js';
 export { ExmGridBaseToolbar } from './table/exm-grid-base-toolbar.js';
 export { ExmGridSmartToolbar } from './table/exm-grid-smart-toolbar.js';
@@ -8,7 +10,7 @@ export { ExmGridToolbar } from './table/exm-grid-toolbar.js';
 export { EventDetailGridToolbarSettingChanged, Action, Filter, FilterConfigType, FilterSingleSelectConfig, BaseFilterConfig, BaseSettingConfig, Setting, SettingConfigId, SettingConfigType, SettingSelectionListConfig, SettingSelectionListItem, } from './table/types/exm-grid-toolbar-types.js';
 export { ToolbarSearch } from './search/exm-toolbar-search.js';
 export { ExmGridToolbarFilters, EventSelectPayload } from './table/exm-grid-toolbar-filters.js';
-export { style as gridStyles } from './styles/exm-grid-styles-css.js';
+export { style as gridStyles, gridOutlineStyles } from './styles/exm-grid-styles-css.js';
 export { style as gridBaseToolbarStyles } from './styles/exm-grid-base-toolbar-styles-css.js';
 export { style as gridCommonStyles } from './styles/exm-grid-common-styles-css.js';
 export { style as gridPaginationStyles } from './styles/exm-grid-pagination-styles-css.js';

package/dist/index.js

@@ -1,4 +1,6 @@
 export { ExmGrid } from './table/exm-grid.js';
+export { ExmGridBase } from './table/exm-grid-base.js';
+export { ExmOutlinedGrid } from './table/exm-outlined-grid.js';
 export { ExmGridPagination } from './table/exm-grid-pagination.js';
 export { ExmGridBaseToolbar } from './table/exm-grid-base-toolbar.js';
 export { ExmGridSmartToolbar } from './table/exm-grid-smart-toolbar.js';
@@ -7,7 +9,7 @@ export { ExmGridToolbar } from './table/exm-grid-toolbar.js';
 export { FilterConfigType, SettingConfigId, SettingConfigType } from './table/types/exm-grid-toolbar-types.js';
 export { ToolbarSearch } from './search/exm-toolbar-search.js';
 export { ExmGridToolbarFilters } from './table/exm-grid-toolbar-filters.js';
-export { style as gridStyles } from './styles/exm-grid-styles-css.js';
+export { gridOutlineStyles, style as gridStyles } from './styles/exm-grid-styles-css.js';
 export { style as gridBaseToolbarStyles } from './styles/exm-grid-base-toolbar-styles-css.js';
 export { style as gridCommonStyles } from './styles/exm-grid-common-styles-css.js';
 export { style as gridPaginationStyles } from './styles/exm-grid-pagination-styles-css.js';

package/dist/styles/exm-grid-styles-css.d.ts

@@ -1 +1,2 @@
+export declare const gridOutlineStyles: import("lit").CSSResult;
 export declare const style: import("lit").CSSResult;

package/dist/styles/exm-grid-styles-css.js

@@ -1,5 +1,18 @@
 import { css } from 'lit';
 
+const gridOutlineStyles = css `
+  :host {
+    --exm-theme-table-surface: var(--md-sys-color-background);
+    --exm-theme-table-toolbar-background-color: var(--md-sys-color-background);
+    --exm-table-th-background-color: var(--md-sys-color-background);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 1rem;
+
+    tr:nth-child(odd) {
+      background-color: #cbc9d429;
+    }
+  }
+`;
 const style = css `
   :host {
     -moz-osx-font-smoothing: grayscale;
@@ -413,5 +426,5 @@ const style = css `
   }
 `;
 
-export { style };
+export { gridOutlineStyles, style };
 //# sourceMappingURL=exm-grid-styles-css.js.map

package/dist/table/exm-grid-base.d.ts

@@ -0,0 +1,124 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import '@exmg/exm-sortable/exm-sortable.js';
+import { SORT_DIRECTION } from './types/exm-grid-types.js';
+type GenericPropertyValues<T, V = unknown> = Map<T, V>;
+type Props = Exclude<keyof ExmGridBase, number | symbol>;
+type SmartPropertyValue = GenericPropertyValues<Props>;
+/**
+ * ### Styling
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--exm-arrow-upward-url` | Url to icon that is used for soring direction indicator | `url('/assets/arrow-upward.svg');`
+ * `--exm-table-card-width` | table card width | `100%;`
+ * `--exm-table-card-margin-bottom` | table bottom margin  | `5px;`
+ * `--exm-table-color` | table text color | `#02182b;`
+ * `--exm-table-background-color` | table background color | `#ffffff;`
+ * `--exm-table-box-shadow` | table box shadow | `#{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},`
+ * `--exm-table-row-divider-color` | table rows separator color | `#dbdbdb;`
+ * `--exm-table-row-selected-color` | selected row text color | `#02182b;`
+ * `--exm-table-row-selected-background-color` | selected row background color | `#e2f1fe;`
+ * `--exm-table-row-hover-color` | row hover text color | `#02182b;`
+ * `--exm-table-row-hover-background-color` | row hover background color | `#f1f1f1;`
+ * `--exm-table-row-dragged-background-color` | sortable row background color when dragged | `#f1f1f1;`
+ * `--exm-table-rows-expanded-divider-border` | border between row and expanded row detail | `none;`
+ * `--exm-table-rows-expanded-border` | border around row and expanded row detail | `1px solid #dbdbdb;`
+ * `--exm-table-rows-expanded-background-color` | background color of row and expanded row detail | `#e2f1fe;`
+ * `--exm-table-rows-expanded-color` | text color of row and expanded row detail | `#02182b;`
+ * `--exm-table-th-color` | header text color | `#0071dc;`
+ * `--exm-table-columns-background-color` | header background color | `#ffffff;`
+ * `--exm-table-th-sortable-hover-color` | sortable header hover text color | `#02182b;`
+ * `--exm-table-th-height` | header height | `48px;`
+ * `--exm-table-th-sort-margin-left` | header margin after text but before icon | `0px;`
+ * `--exm-table-td-height` | row cell height | `48px;`
+ * `--exm-table-th-sort-icon-height` | sort icon height | `1em;`
+ * `--exm-table-th-sort-icon-width` | sort icon width | `1em;`
+ * `--exm-table-col-number-padding-right` | right padding of number column | `10px;`
+ * `--exm-table-checkbox-cell-width` | width of cell with checkbox | `24px;`
+ */
+export declare class ExmGridBase extends ExmgElement {
+    /**
+     * Array of data which mapped to rows
+     */
+    items: unknown[];
+    /**
+     * Feature that turn on sort by column
+     */
+    sortable: boolean;
+    /**
+     * Name of sort column which should be sorted by default
+     */
+    defaultSortColumn?: string;
+    /**
+     * Default sort direction
+     */
+    defaultSortDirection?: SORT_DIRECTION;
+    /**
+     * Feature that allow sort rows
+     * If table has turn on feature `selectable` then it takes precedence and `rowSelectable` will be ignored
+     */
+    rowsSortable: boolean;
+    /**
+     * Feature that allow select rows
+     */
+    rowsSelectable: boolean;
+    /**
+     * By default a ros is also selactable by clicking anywhere inside the row when the rowSElectable option is enabled
+     */
+    disableRowClickSelection: boolean;
+    /**
+     * If rows are selectable you can also pass selector to checkboxes.
+     * We can have checkboxes in thead or / and tbody.
+     */
+    selectableCheckboxSelector?: string;
+    /**
+     * Map of column names that should be hidden
+     */
+    hiddenColumnNames: Record<string, string>;
+    /**
+     * Map of row id and selection state
+     * Useful for setup default selection or manipulating programmatically
+     */
+    selectedRowIds: Record<string, boolean>;
+    /**
+     * Map of row id and expandable row state
+     * Useful for setup default expanded rows or manipulating programmatically
+     */
+    expandedRowIds: Record<string, boolean>;
+    /**
+     * Selector to element inside row which will trigger expand / collapse action on related row detail
+     */
+    expandableToggleSelector?: string;
+    /**
+     * Set table layout. If fixed then text overflow will be hidden and ellipsis added.
+     */
+    tableLayout: 'fixed' | 'auto';
+    private querySelectors?;
+    withToolbar: boolean;
+    private rowSelectableFeature?;
+    private rowExpandableFeature?;
+    private rowSortableFeature?;
+    private columnSortableFeature?;
+    private componentReady;
+    private getQuerySelectors;
+    private getTable;
+    private getTableBody;
+    private findTableBody;
+    private getColumns;
+    private getBodyRowSelector;
+    private canSortRows;
+    private rowsOrderChange;
+    private updateColumnVisibility;
+    private updateAutoColspan;
+    private observeExpandedRowIds;
+    private observeSelectedRowIds;
+    private observeItems;
+    private initGridAttributes;
+    protected firstUpdated(): Promise<void>;
+    protected updated(changedProps: SmartPropertyValue): void;
+    private renderWithoutSortable;
+    private renderWithSortable;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};