@limetech/lime-elements
Version:
1,169 lines (1,168 loc) • 44.9 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { TabulatorFull, } from "tabulator-tables";
import { ColumnDefinitionFactory, createColumnSorter } from "./columns";
import { isEqual, has } from "lodash-es";
import { ElementPool } from "./element-pool";
import { TableSelection } from "./table-selection";
import { _mapLayout } from "./layout";
import { areRowsEqual } from "./utils";
import translate from "../../global/translations";
const FIRST_PAGE = 1;
/**
* @exampleComponent limel-example-table-basic
* @exampleComponent limel-example-table-custom-components
* @exampleComponent limel-example-table-header-menu
* @exampleComponent limel-example-table-movable-columns
* @exampleComponent limel-example-table-sorting-disabled
* @exampleComponent limel-example-table-pagination
* @exampleComponent limel-example-table-local
* @exampleComponent limel-example-table-remote
* @exampleComponent limel-example-table-activate-row
* @exampleComponent limel-example-table-selectable-rows
* @exampleComponent limel-example-table-default-sorted
* @exampleComponent limel-example-table-layout-default
* @exampleComponent limel-example-table-layout-stretch-last-column
* @exampleComponent limel-example-table-layout-stretch-columns
* @exampleComponent limel-example-table-layout-low-density
* @exampleComponent limel-example-table-interactive-rows
*/
export class Table {
constructor() {
/**
* Data to be displayed in the table. Provide a stable `id` on each row to keep
* scroll position, focus, and selections intact across updates.
*/
this.data = [];
/**
* Columns used to display the data
*/
this.columns = [];
/**
* Set to either `local` or `remote` to change how the table handles the
* loaded data. When in `local` mode, all sorting and pagination will be
* done locally with the data given. When in `remote` mode, the consumer
* is responsible to give the table new data when a `load` event occurs
*/
this.mode = 'local';
/**
* The initial sorted columns
*/
this.sorting = [];
/**
* Set to `false` to disable column sorting through header interactions.
* Programmatic sorting through the `sorting` prop and `sort` event remains available.
*/
this.sortableColumns = true;
/**
* Set to `true` to trigger loading animation
*/
this.loading = false;
/**
* The page to show
*/
this.page = FIRST_PAGE;
/**
* Defines the language for translations.
*/
this.language = 'en';
/**
* Location of the pagination controls.
* - `top`: Display pagination controls at the top of the table
* - `bottom`: Display pagination controls at the bottom of the table (default)
*/
this.paginationLocation = 'bottom';
this.initialized = false;
this.destroyed = false;
this.shouldSort = false;
this.getActiveRows = () => {
if (!this.tabulator) {
return [];
}
return this.tabulator.getRows('active');
};
this.getActiveRowsData = () => {
// Note: Tabulator.getData() creates copies of each data object
// and will break this.selection.has checks, hence why this function
// intentionally retrieves the data using the row components
return this.getActiveRows().map((row) => row.getData());
};
this.selectAllOnChange = (ev) => {
const selectAll = ev.detail;
ev.stopPropagation();
ev.preventDefault();
const newSelection = selectAll ? this.getActiveRowsData() : [];
this.select.emit(newSelection);
this.tableSelection.setSelection(newSelection);
this.selectAll.emit(selectAll);
};
this.getColumnOptions = () => {
if (!this.movableColumns) {
return {};
}
return {
movableColumns: true,
};
};
this.handleMoveColumn = (_, components) => {
if (!this.movableColumns) {
return;
}
const columns = components.map(this.findColumn).filter(Boolean);
this.changeColumns.emit(columns);
};
this.findColumn = (component) => {
return this.columns.find((column) => {
return (column.field === component.getField() &&
column.title === component.getDefinition().title);
});
};
this.getTranslation = (key) => {
return translate.get(key, this.language);
};
this.handleDataSorting = this.handleDataSorting.bind(this);
this.handlePageLoaded = this.handlePageLoaded.bind(this);
this.handleRenderComplete = this.handleRenderComplete.bind(this);
this.handleAjaxRequesting = this.handleAjaxRequesting.bind(this);
this.requestData = this.requestData.bind(this);
this.onClickRow = this.onClickRow.bind(this);
this.formatRow = this.formatRow.bind(this);
this.formatRows = this.formatRows.bind(this);
this.updateMaxPage = this.updateMaxPage.bind(this);
this.initTabulatorComponent = this.initTabulatorComponent.bind(this);
this.setSelection = this.setSelection.bind(this);
this.addColumnAggregator = this.addColumnAggregator.bind(this);
this.pool = new ElementPool(document);
this.columnFactory = new ColumnDefinitionFactory(this.pool);
}
componentWillLoad() {
this.initTableSelection();
}
componentDidLoad() {
this.destroyed = false;
this.init();
}
disconnectedCallback() {
this.destroyed = true;
this.initialized = false;
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
if (this.tabulator) {
this.tabulator.destroy();
this.tabulator = null;
}
this.pool.clear();
}
totalRowsChanged() {
this.updateMaxPage();
}
pageSizeChanged() {
this.updateMaxPage();
}
pageChanged() {
if (!this.tabulator) {
return;
}
if (this.tabulator.getPage() === this.page) {
return;
}
this.tabulator.setPage(this.page);
}
activeRowChanged() {
if (!this.tabulator) {
return;
}
this.formatRows();
}
updateData(newData = [], oldData = []) {
const newIds = this.getRowIds(newData);
const oldIds = this.getRowIds(oldData);
const shouldReplace = this.shouldReplaceData(newIds, oldIds);
const hasRowUpdates = !areRowsEqual(newData, oldData);
setTimeout(() => {
if (!this.tabulator || !this.initialized) {
return;
}
if (shouldReplace) {
this.pool.releaseAll();
this.tabulator.replaceData(newData);
this.setSelection();
return;
}
if (hasRowUpdates) {
this.tabulator.updateData(newData);
this.setSelection();
return;
}
if (newData.length > 0) {
this.tabulator.updateOrAddData(newData);
}
});
}
updateColumns(newColumns, oldColumns) {
if (!this.tabulator) {
return;
}
if (this.areSameColumns(newColumns, oldColumns)) {
return;
}
const columnsInTable = this.tabulator
.getColumns()
.filter((c) => c.getField());
const oldColumnsInTable = columnsInTable.map((c) => oldColumns.find((old) => old.field === c.getField()));
if (this.areSameColumns(newColumns, oldColumnsInTable)) {
return;
}
this.tabulator.setColumns(this.getColumnDefinitions());
this.shouldSort = true;
}
updateAggregates(newAggregates, oldAggregates) {
if (!this.tabulator) {
return;
}
if (isEqual(newAggregates, oldAggregates)) {
return;
}
if (!this.haveSameAggregateFields(newAggregates, oldAggregates)) {
this.init();
return;
}
this.tabulator.recalc();
this.tabulator.rowManager.redraw();
}
updateSelection(newSelection) {
if (!this.tableSelection) {
return;
}
this.tableSelection.setSelection(newSelection);
}
updateSelectable() {
if (this.tableSelection && !this.selectable) {
this.tableSelection = null;
}
this.initTableSelection();
this.init();
}
updateSortableColumns() {
if (!this.tabulator) {
return;
}
this.tabulator.setColumns(this.getColumnDefinitions());
this.shouldSort = true;
}
updateSorting(newValue, oldValue) {
const newSorting = this.getColumnSorter(newValue);
const oldSorting = this.getColumnSorter(oldValue);
if (isEqual(newSorting, oldSorting)) {
return;
}
this.tabulator.setSort(newSorting);
}
shouldReplaceData(newIds, oldIds) {
return (!this.areEqualIds(newIds, oldIds) ||
!this.isSameOrder(newIds, oldIds));
}
getRowIds(data) {
return data.map((item) => { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : item; });
}
areEqualIds(newIds, oldIds) {
const newIdSet = new Set(newIds);
const oldIdSet = new Set(oldIds);
return (newIdSet.size === oldIdSet.size &&
newIds.every((id) => oldIdSet.has(id)));
}
isSameOrder(newIds, oldIds) {
return newIds.every((id, index) => id === oldIds[index]);
}
areSameColumns(newColumns, oldColumns) {
return (newColumns.length === oldColumns.length &&
newColumns.every((column) => oldColumns.includes(column)));
}
haveSameAggregateFields(newAggregates, oldAggregates) {
const oldAggregateFields = (oldAggregates === null || oldAggregates === void 0 ? void 0 : oldAggregates.map((a) => a.field)) || [];
return ((newAggregates === null || newAggregates === void 0 ? void 0 : newAggregates.length) === (oldAggregates === null || oldAggregates === void 0 ? void 0 : oldAggregates.length) &&
!!(newAggregates === null || newAggregates === void 0 ? void 0 : newAggregates.every((a) => oldAggregateFields.includes(a.field))));
}
init() {
if (this.tabulator) {
this.pool.releaseAll();
this.tabulator.destroy();
this.initialized = false;
}
const table = this.host.shadowRoot.querySelector('#tabulator-table');
this.initTabulatorComponent(table);
}
/*
* Tabulator requires that the html element it's rendered inside
* has a size before it's created, otherwise it doesn't consider
* it self renderedy completely. (the callback "renderComplete"
* is never run).
*
* @param table {HTMLElement}
*
*/
initTabulatorComponent(table) {
// Some browsers do not implement the ResizeObserver API...
// If that's the case lets just create the table no
// matter if its rendered or not.
if (!('ResizeObserver' in window)) {
this.tabulator = this.createTabulator(table);
this.setSelection();
return;
}
this.resizeObserver = new ResizeObserver(() => {
requestAnimationFrame(() => {
var _a, _b;
if (this.destroyed) {
return;
}
this.tabulator = this.createTabulator(table);
this.setSelection();
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(table);
(_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
});
});
this.resizeObserver.observe(table);
}
createTabulator(table) {
const tabulator = new TabulatorFull(table, this.getOptions());
tabulator.on('rowClick', this.onClickRow);
tabulator.on('dataSorting', this.handleDataSorting);
tabulator.on('pageLoaded', this.handlePageLoaded);
tabulator.on('columnMoved', this.handleMoveColumn);
tabulator.on('renderComplete', this.handleRenderComplete);
tabulator.on('tableBuilt', () => {
var _a;
if (this.destroyed) {
tabulator.destroy();
return;
}
this.initialized = true;
if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) {
this.updateData(this.data, []);
if (this.isRemoteMode()) {
this.updateMaxPage();
}
}
else if (this.isRemoteMode()) {
this.tabulator.setData();
}
});
return tabulator;
}
initTableSelection() {
if (this.selectable) {
this.tableSelection = new TableSelection(() => this.tabulator, this.pool, this.select, (key) => this.getTranslation(key));
this.tableSelection.setSelection(this.selection);
}
}
setSelection() {
if (!(this.tabulator && this.tableSelection)) {
return;
}
this.tableSelection.setSelection(this.selection);
}
updateMaxPage() {
var _a;
(_a = this.tabulator) === null || _a === void 0 ? void 0 : _a.setMaxPage(this.calculatePageCount());
}
getOptions() {
const ajaxOptions = this.getAjaxOptions();
const paginationOptions = this.getPaginationOptions();
const columnOptions = this.getColumnOptions();
return Object.assign(Object.assign(Object.assign(Object.assign({ data: this.data, layout: _mapLayout(this.layout), columns: this.getColumnDefinitions() }, ajaxOptions), paginationOptions), { rowFormatter: this.formatRow, initialSort: this.getInitialSorting(), nestedFieldSeparator: false }), columnOptions);
}
getInitialSorting() {
if (this.currentSorting && this.currentSorting.length > 0) {
return this.getColumnSorter(this.currentSorting);
}
return this.getColumnSorter(this.sorting);
}
getColumnSorter(sorting) {
return sorting.map((sorter) => {
return {
column: String(sorter.column.field),
dir: sorter.direction.toLocaleLowerCase(),
};
});
}
getColumnDefinitions() {
const columnDefinitions = this.columns
.map(this.addColumnAggregator)
.map((column) => {
var _a;
const definition = this.columnFactory.create(column);
const columnSortable = (_a = column.headerSort) !== null && _a !== void 0 ? _a : true;
definition.headerSort = this.sortableColumns && columnSortable;
return definition;
});
if (this.tableSelection) {
return this.tableSelection.getColumnDefinitions(columnDefinitions);
}
return columnDefinitions;
}
addColumnAggregator(column) {
var _a;
if (!((_a = this.aggregates) === null || _a === void 0 ? void 0 : _a.length) || column.aggregator) {
return column;
}
const aggregate = this.aggregates.find((a) => a.field === column.field);
if (aggregate) {
column.aggregator = (col) => {
var _a;
if (!col) {
return;
}
const value = (_a = this.aggregates.find((a) => a.field === col.field)) === null || _a === void 0 ? void 0 : _a.value;
if (col.formatter) {
return col.formatter(value);
}
return value;
};
}
return column;
}
getAjaxOptions() {
if (!this.isRemoteMode()) {
return {};
}
// Tabulator needs a URL to be set, even though this one will never be
// used since we have our own custom `ajaxRequestFunc`
const remoteUrl = 'https://localhost';
return {
ajaxSorting: true,
ajaxURL: remoteUrl,
ajaxRequestFunc: this.requestData,
ajaxRequesting: this.handleAjaxRequesting,
};
}
handleAjaxRequesting() {
return !this.destroyed;
}
getPaginationOptions() {
if (!this.pageSize) {
return {};
}
return {
pagination: true,
paginationMode: this.isRemoteMode() ? 'remote' : 'local',
paginationSize: this.pageSize,
paginationInitialPage: this.page,
};
}
requestData(_, __, params) {
var _a, _b;
if (this.destroyed) {
return Promise.reject();
}
const sorters = (_a = params.sorters) !== null && _a !== void 0 ? _a : [];
const currentPage = (_b = params.page) !== null && _b !== void 0 ? _b : FIRST_PAGE;
if (this.page !== currentPage) {
this.changePage.emit(currentPage);
}
const columnSorters = sorters.map(createColumnSorter(this.columns));
const load = {
page: currentPage,
sorters: columnSorters,
};
// In order to make limel-table behave more like a controlled component,
// we always return the existing data from this function, therefore
// relying on the consumer component to handle the loading
// state via the loading prop, if it actually decides to load new data.
const resolveExistingData = Promise.resolve({
last_page: this.calculatePageCount(),
data: this.data,
});
if (!isEqual(this.currentLoad, load)) {
this.currentSorting = columnSorters;
this.currentLoad = load;
this.load.emit(load);
}
return resolveExistingData;
}
isRemoteMode() {
return this.mode === 'remote';
}
handleDataSorting(sorters) {
var _a, _b;
const columnSorters = sorters.map(createColumnSorter(this.columns));
if (this.isRemoteMode()) {
const tabulatorPage = (_b = (_a = this.tabulator) === null || _a === void 0 ? void 0 : _a.getPage) === null || _b === void 0 ? void 0 : _b.call(_a);
const currentPage = typeof tabulatorPage === 'number' ? tabulatorPage : this.page;
const load = {
page: currentPage !== null && currentPage !== void 0 ? currentPage : FIRST_PAGE,
sorters: columnSorters,
};
if (!isEqual(this.currentLoad, load)) {
this.currentSorting = columnSorters;
this.currentLoad = load;
this.load.emit(load);
}
return;
}
if (columnSorters.length === 0) {
return;
}
this.sort.emit(columnSorters);
}
handlePageLoaded(page) {
if (this.isRemoteMode()) {
return;
}
this.changePage.emit(page);
}
handleRenderComplete() {
if (this.tabulator && this.shouldSort) {
this.shouldSort = false;
this.tabulator.setSort(this.getInitialSorting());
}
}
onClickRow(event, row) {
if (row.getPosition === undefined) {
// Not a data row, probably a CalcComponent
return;
}
if (event.defaultPrevented) {
return;
}
if (this.isActiveRow(row)) {
this.activeRow = null;
}
else {
this.activeRow = row.getData();
}
this.activate.emit(this.activeRow);
}
formatRows() {
// eslint-disable-next-line unicorn/no-array-for-each
this.tabulator.getRows().forEach(this.formatRow);
}
formatRow(row) {
if (this.isActiveRow(row)) {
row.getElement().classList.add('active');
}
else {
row.getElement().classList.remove('active');
}
const interactiveFeedbackElement = row
.getElement()
.querySelectorAll('.interactive-feedback');
if (interactiveFeedbackElement.length === 0) {
const element = row.getElement().ownerDocument.createElement('div');
element.classList.add('interactive-feedback');
row.getElement().prepend(element);
}
}
isActiveRow(row) {
var _a;
if (!this.activeRow) {
return false;
}
const activeRowId = (_a = this.activeRow.id) !== null && _a !== void 0 ? _a : null;
if (activeRowId !== null) {
return activeRowId === row.getData().id;
}
return this.activeRow === row.getData();
}
calculatePageCount() {
let total = this.totalRows;
if (!total) {
total = this.data.length;
}
return Math.ceil(total / this.pageSize);
}
hasAggregation(columns) {
return columns.some((column) => has(column, 'aggregator'));
}
render() {
var _a, _b;
const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
return (h(Host, { key: '83aff83d2e82d2b6bb71cca08a0f9532f084edf7', class: {
'has-low-density': this.layout === 'lowDensity',
'has-pagination-on-top': this.paginationLocation === 'top',
} }, h("div", { key: '159ef3258158b9987c2023612bc9975163253d91', id: "tabulator-container", class: {
'has-pagination': totalRows > this.pageSize,
'has-aggregation': this.hasAggregation(this.columns),
'has-movable-columns': this.movableColumns,
'has-rowselector': this.selectable,
'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
} }, h("div", { key: '74fbcc4af5ee32f05f19987127f1c26c71794cd3', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'b9da01750a35d99e2ea2f6ba024c5a3b25ac1aef', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'dc3936c5ea3999ded14c4929ad7a03eef11418b1', id: "tabulator-table" }))));
}
renderSelectAll() {
var _a, _b, _c;
if (!this.selectable) {
return;
}
const showSelectAll = !this.loading && this.tableSelection;
return (h("div", { class: "select-all", style: { display: showSelectAll ? 'inline-block' : 'none' } }, h("limel-checkbox", { class: "hide-label", onChange: this.selectAllOnChange, disabled: this.data.length === 0, checked: (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection, indeterminate: ((_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection) &&
((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) < this.data.length, label: this.getTranslation('table.select-all') })));
}
renderEmptyMessage() {
const showEmptyMessage = !this.loading && this.data.length === 0 && this.emptyMessage;
return (h("div", { id: "tabulator-empty-text", style: { display: showEmptyMessage ? 'flex' : 'none' } }, h("span", null, this.emptyMessage)));
}
static get is() { return "limel-table"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table.scss"]
};
}
static get styleUrls() {
return {
"$": ["table.css"]
};
}
static get properties() {
return {
"data": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "object[]",
"resolved": "object[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Data to be displayed in the table. Provide a stable `id` on each row to keep\nscroll position, focus, and selections intact across updates."
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"columns": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Column[]",
"resolved": "Column<any>[]",
"references": {
"Column": {
"location": "import",
"path": "./table.types",
"id": "src/components/table/table.types.ts::Column",
"referenceLocation": "Column"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Columns used to display the data"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"mode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'local' | 'remote'",
"resolved": "\"local\" | \"remote\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to either `local` or `remote` to change how the table handles the\nloaded data. When in `local` mode, all sorting and pagination will be\ndone locally with the data given. When in `remote` mode, the consumer\nis responsible to give the table new data when a `load` event occurs"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "mode",
"defaultValue": "'local'"
},
"layout": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Layout",
"resolved": "\"default\" | \"lowDensity\" | \"stretchColumns\" | \"stretchLastColumn\"",
"references": {
"Layout": {
"location": "import",
"path": "./layout",
"id": "src/components/table/layout.ts::Layout",
"referenceLocation": "Layout"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the layout of the table, based on how width of the columns are calculated.\n\n- `default`: makes columns as wide as their contents.\n- `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.\n- `stretchColumns`: stretches all columns to fill the available width when possible.\n- `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "layout"
},
"pageSize": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of rows per page"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "page-size"
},
"totalRows": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The number of total rows available for the data"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "total-rows"
},
"sorting": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ColumnSorter[]",
"resolved": "ColumnSorter[]",
"references": {
"ColumnSorter": {
"location": "import",
"path": "./table.types",
"id": "src/components/table/table.types.ts::ColumnSorter",
"referenceLocation": "ColumnSorter"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The initial sorted columns"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"activeRow": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "RowData",
"resolved": "{ id?: string | number; }",
"references": {
"RowData": {
"location": "import",
"path": "./table.types",
"id": "src/components/table/table.types.ts::RowData",
"referenceLocation": "RowData"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Active row in the table"
},
"getter": false,
"setter": false
},
"movableColumns": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to enable reordering of the columns by dragging them"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "movable-columns"
},
"sortableColumns": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `false` to disable column sorting through header interactions.\nProgrammatic sorting through the `sorting` prop and `sort` event remains available."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "sortable-columns",
"defaultValue": "true"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to trigger loading animation"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "loading",
"defaultValue": "false"
},
"page": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The page to show"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "page",
"defaultValue": "FIRST_PAGE"
},
"emptyMessage": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A message to display when the table has no data"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "empty-message"
},
"aggregates": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ColumnAggregate[]",
"resolved": "ColumnAggregate[]",
"references": {
"ColumnAggregate": {
"location": "import",
"path": "./table.types",
"id": "src/components/table/table.types.ts::ColumnAggregate",
"referenceLocation": "ColumnAggregate"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Column aggregates to be displayed in the table"
},
"getter": false,
"setter": false
},
"selectable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enables row selection"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "selectable"
},
"selection": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "object[]",
"resolved": "object[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Selected data. Requires `selectable` to be true."
},
"getter": false,
"setter": false
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Languages",
"resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
"references": {
"Languages": {
"location": "import",
"path": "../date-picker/date.types",
"id": "src/components/date-picker/date.types.ts::Languages",
"referenceLocation": "Languages"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the language for translations."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "language",
"defaultValue": "'en'"
},
"paginationLocation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'top' | 'bottom'",
"resolved": "\"bottom\" | \"top\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Location of the pagination controls.\n- `top`: Display pagination controls at the top of the table\n- `bottom`: Display pagination controls at the bottom of the table (default)"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "pagination-location",
"defaultValue": "'bottom'"
}
};
}
static get events() {
return [{
"method": "sort",
"name": "sort",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when `mode` is `local` the data is sorted"
},
"complexType": {
"original": "ColumnSorter[]",
"resolved": "ColumnSorter[]",
"references": {
"ColumnSorter": {
"location": "import",
"path": "./table.types",
"id": "src/components/table/table.types.ts::ColumnSorter",
"referenceLocation": "ColumnSorter"
}
}
}
}, {
"method": "changePage",
"name": "changePage",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when a new page has been set"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "load",
"name": "load",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when `mode` is `remote` and the table is loading new data. The\nconsumer is responsible for giving the table new data"
},
"complexType": {
"original": "TableParams",
"resolved": "TableParams",
"references": {
"TableParams": {
"location": "import",
"path": "./table.types",
"id": "src/components/table/table.types.ts::TableParams",
"referenceLocation": "TableParams"
}
}
}
}, {
"method": "activate",
"name": "activate",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when a row is activated"
},
"complexType": {
"original": "object",
"resolved": "object",
"references": {}
}
}, {
"method": "changeColumns",
"name": "changeColumns",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the columns have been changed"
},
"complexType": {
"original": "Column[]",
"resolved": "Column<any>[]",
"references": {
"Column": {
"location": "import",
"path": "./table.types",
"id": "src/components/table/table.types.ts::Column",
"referenceLocation": "Column"
}
}
}
}, {
"method": "select",
"name": "select",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the row selection has been changed"
},
"complexType": {
"original": "object[]",
"resolved": "object[]",
"references": {}
}
}, {
"method": "selectAll",
"name": "selectAll",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the select all rows state is toggled"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "totalRows",
"methodName": "totalRowsChanged"
}, {
"propName": "pageSize",
"methodName": "pageSizeChanged"
}, {
"propName": "page",
"methodName": "pageChanged"
}, {
"propName": "activeRow",
"methodName": "activeRowChanged"
}, {
"propName": "data",
"methodName": "updateData"
}, {
"propName": "columns",
"methodName": "updateColumns"
}, {
"propName": "aggregates",
"methodName": "updateAggregates"
}, {
"propName": "selection",
"methodName": "updateSelection"
}, {
"propName": "selectable",
"methodName": "updateSelectable"
}, {
"propName": "sortableColumns",
"methodName": "updateSortableColumns"
}, {
"propName": "sorting",
"methodName": "updateSorting"
}];
}
}