diff --git a/packages/tabulator-table/README.md b/packages/tabulator-table/README.md
index 7277484d8d3c3a9728336d5a0685730507363e69..cdcb4ed50a3ead4b36ba302211db69235b073dec 100644
--- a/packages/tabulator-table/README.md
+++ b/packages/tabulator-table/README.md
@@ -35,9 +35,30 @@ Or you can include the JS files directly via CDN:
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<dbp-tabulator-table lang="de"></dbp-tabulator-table>`
-
+- `identifier` (optional string, default: `table`): set the css selector id of the table element
+ - example `<dbp-tabulator-table identifier="my-table-id"></dbp-tabulator-table>`
+- `options` (optional object, can be set later, default: `{
+ layout: "fitColumns", autoColumns: true, }`): set the options for the tabulator table
+ - example `<dbp-tabulator-table otions="{'myoption': 'a'}"></dbp-tabulator-table>`
+- `data` (optional array, can be set later or can be updated): set the data for the tabulator table
+ - example `<dbp-tabulator-table data="[{a: 123, b: 123}, {a: 234, b: 234}]"></dbp-tabulator-table>`
+- `pagination-enabled` (optional bool, default: `false`): set to true if you want a pagination shown
+ - example `<dbp-tabulator-table pagination-enabled></dbp-tabulator-table>`
+- `pagination-size` (optional number, default: `10`): sets the pagination size, if pagination is enabled
+ - example `<dbp-tabulator-table pagination-size="20"></dbp-tabulator-table>`
+- `select-all-enabled` (optional bool, default: `false`): enables a select all button in the left upper corner
+ - example `<dbp-tabulator-table select-all-enabled></dbp-tabulator-table>`
+
+
+## Important functions
+- `setData(data)`: This function sets data of the tabulator table.
+ - `data` is an array of datas which should be shown in the table.
## Note
+In best practice `options` is set if the dom is already rendered.
+You can set this attribute with the css selector. (e.g.: `this._('#my-table-component).options = myoptions`)
+
+Set data only works if the options are set before.
## Local development
diff --git a/packages/tabulator-table/src/tabulator-table.js b/packages/tabulator-table/src/tabulator-table.js
index 1a5b27df66525f9c91aac9fda36405fedf8dc765..d3c4dbdaa1f7620510c82ec1fedc31eaa5ff952e 100644
--- a/packages/tabulator-table/src/tabulator-table.js
+++ b/packages/tabulator-table/src/tabulator-table.js
@@ -5,7 +5,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import {TabulatorFull as Tabulator} from 'tabulator-tables';
import * as commonUtils from "@dbp-toolkit/common/utils";
import {name as pkgName} from "@dbp-toolkit/tabulator-table/package.json";
-
+import {classMap} from 'lit/directives/class-map.js';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
@@ -18,7 +18,7 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable = null;
this.identifier = 'table';
this.options = {
- layout:"fitColumns",
+ layout: "fitColumns",
autoColumns: true,
};
this.data = [];
@@ -42,11 +42,6 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
};
}
- static get scopedElements() {
- return {
- };
- }
-
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === 'lang') {
@@ -54,9 +49,8 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
if (this.tabulatorTable) {
this.tabulatorTable.setLocale(this.lang);
}
- }
- else if (propName === 'options' && this.options !== null && !this.tableReady
- && !this.initalization) {
+ } else if (propName === 'options' && this.options !== null && !this.tableReady
+ && !this.initalization) {
this.buildTable();
}
});
@@ -161,8 +155,7 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
}
rowClickFunction(e, row) {
- if (
- this.tabulatorTable !== null &&
+ if (this.tabulatorTable !== null &&
this.tabulatorTable.getSelectedRows().length ===
this.tabulatorTable.getRows("visible").length) {
this._('#select_all').checked = true;
@@ -216,20 +209,20 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getGeneralCSS()}
${commonStyles.getTabulatorStyles()}
${commonStyles.getRadioAndCheckboxCss()}
-
+
.select-all-icon {
height: 40px;
position: absolute;
top: -2px;
}
-
+
.checkmark {
height: 20px;
width: 20px;
left: 10px;
top: 8px;
}
-
+
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
padding-top: 4px;
padding-bottom: 4px;
@@ -246,14 +239,14 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page[disabled] {
opacity: 0.4;
}
-
+
.tabulator .tabulator-footer {
- background-color: var(--dbp-background);
- color: var(--dbp-content);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
}
-
+
.tabulator .tabulator-footer .tabulator-footer-contents {
- flex-direction: column;
+ flex-direction: column;
}
.tabulator .tabulator-footer .tabulator-paginator {
@@ -261,100 +254,105 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
display: flex;
align-items: center;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator label {
- color: var(--dbp-content);
- font-weight: 400;
+ color: var(--dbp-content);
+ font-weight: 400;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page-size {
- box-sizing: border-box;
- border: var(--dbp-border);
- border-radius: var(--dbp-border-radius);
- padding: calc(0.5em - 1px) 1.7em calc(0.5em - 1px) 0.75em;
- cursor: pointer;
- background-position-x: calc(100% - 0.4rem);
- background-size: auto 45%;
- min-height: 40px;
+ box-sizing: border-box;
+ border: var(--dbp-border);
+ border-radius: var(--dbp-border-radius);
+ padding: calc(0.5em - 1px) 1.7em calc(0.5em - 1px) 0.75em;
+ cursor: pointer;
+ background-position-x: calc(100% - 0.4rem);
+ background-size: auto 45%;
+ min-height: 40px;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page {
- opacity: unset;
- border-radius: var(--dbp-border-radius);
- cursor: pointer;
- padding: calc(0.375em - 1px) 0.75em;
- text-align: center;
- white-space: nowrap;
- font-size: inherit;
- font-weight: bolder;
- font-family: inherit;
- transition: all 0.15s ease 0s, color 0.15s ease 0s;
- background: var(--dbp-secondary-surface);
- color: var(--dbp-on-secondary-surface);
- border-color: var(--dbp-secondary-surface-border-color);
- box-sizing: border-box;
- min-height: 40px;
+ opacity: unset;
+ border-radius: var(--dbp-border-radius);
+ cursor: pointer;
+ padding: calc(0.375em - 1px) 0.75em;
+ text-align: center;
+ white-space: nowrap;
+ font-size: inherit;
+ font-weight: bolder;
+ font-family: inherit;
+ transition: all 0.15s ease 0s, color 0.15s ease 0s;
+ background: var(--dbp-secondary-surface);
+ color: var(--dbp-on-secondary-surface);
+ border-color: var(--dbp-secondary-surface-border-color);
+ box-sizing: border-box;
+ min-height: 40px;
}
+ .filename {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ white-space: nowrap;
+ }
-
@media only screen and (orientation: portrait) and (max-width: 768px) {
.mobile-hidden {
display: none;
}
-
+
#custom-pagination, .tabulator-footer {
position: sticky;
bottom: 0;
z-index: 10;
}
-
+
.tabulator {
- overflow: visible;
+ overflow: visible;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page {
border: none;
}
-
+
.tabulator .tabulator-footer .tabulator-footer-contents .tabulator-paginator .tabulator-pages {
display: none;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator {
text-align: center;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator label {
display: none;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page {
border: none;
}
-
+
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page-size {
padding-right: 1.5em;
background-size: auto 40%;
}
-
+
button[data-page="prev"]::after, button[data-page="next"]::after, button[data-page="first"]::after, button[data-page="last"]::after {
- content: '\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0';
- background-color: var(--dbp-content);
- mask-repeat: no-repeat;
- mask-position: center center;
- padding: 0 0 0.25%;
- mask-size: 1.4rem !important;
+ content: '\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0';
+ background-color: var(--dbp-content);
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ padding: 0 0 0.25%;
+ mask-size: 1.4rem !important;
}
button[data-page="first"]::after {
content: '\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0';
mask-image: url("${unsafeCSS(iconPath)}angle-double-left.svg");
}
-
+
button[data-page="prev"]::after {
- mask-image: url("${unsafeCSS(iconPath)}chevron-left.svg");
+ mask-image: url("${unsafeCSS(iconPath)}chevron-left.svg");
}
button[data-page="next"]::after {
@@ -380,7 +378,7 @@ export class TabulatorTable extends ScopedElementsMixin(DBPLitElement) {
<link rel="stylesheet" href="${tabulatorCss}"/>
<div class="table-wrapper">
<div id=${this.identifier}></div>
- <div class='tabulator' id='custom-pagination'>
+ <div class='tabulator ${classMap({hidden: !this.paginationEnabled})}' id='custom-pagination'>
<div class='tabulator-footer'>
<div class='tabulator-footer-contents'>
<span class='tabulator-paginator'></span>
diff --git a/packages/tabulator-table/test/unit.js b/packages/tabulator-table/test/unit.js
index 948c967fba2013079f36f733d0ac4c10ba497b1b..8a1ba0baf5fd49d695284dc86ddaa7c27591be7c 100644
--- a/packages/tabulator-table/test/unit.js
+++ b/packages/tabulator-table/test/unit.js
@@ -1,6 +1,6 @@
import {assert} from '@esm-bundle/chai';
-import '../src/dbp-theme-switcher';
+import '../src/dbp-tabulator-table';
import '../src/demo';
suite('dbp-tabulator-table basics', () => {
@@ -21,7 +21,7 @@ suite('dbp-tabulator-table basics', () => {
});
});
-suite('dbp-theme-switcher demo', () => {
+suite('dbp-tabulator-table demo', () => {
let node;
setup(async () => {