Skip to content
Snippets Groups Projects
Commit a228e756 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Create readme and beautify

parent fdf7214e
No related branches found
No related tags found
No related merge requests found
Pipeline #213033 failed
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
packages/tabulator-table/README.md
+ 22
− 1
View file @ a228e756
......@@ -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
......
packages/tabulator-table/src/tabulator-table.js
+ 66
− 68
View file @ a228e756
......@@ -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>
......
packages/tabulator-table/test/unit.js
+ 2
− 2
View file @ a228e756
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 () => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment