2021-10-07 16:01:05 +00:00
|
|
|
import {
|
|
|
|
customElement,
|
|
|
|
html,
|
|
|
|
DeesElement,
|
|
|
|
property,
|
|
|
|
TemplateResult,
|
|
|
|
cssManager,
|
|
|
|
css,
|
|
|
|
unsafeCSS,
|
|
|
|
} from '@designestate/dees-element';
|
|
|
|
|
|
|
|
import * as domtools from '@designestate/dees-domtools';
|
|
|
|
|
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'dees-table': DeesTable<any>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@customElement('dees-table')
|
|
|
|
export class DeesTable<T> extends DeesElement {
|
|
|
|
public static demo = () => html`
|
|
|
|
<style>
|
|
|
|
.demoWrapper {
|
|
|
|
box-sizing: border-box;
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
padding: 60px;
|
|
|
|
background: #000000;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="demoWrapper">
|
|
|
|
<dees-table
|
|
|
|
heading1="Current Account Statement"
|
|
|
|
heading2="Bunq - Payment Account 2 - April 2021"
|
|
|
|
.data=${[
|
|
|
|
{
|
|
|
|
date: '2021-04-01',
|
|
|
|
amount: '2464.65 €',
|
|
|
|
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
date: '2021-04-02',
|
|
|
|
amount: '165.65 €',
|
|
|
|
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
date: '2021-04-03',
|
|
|
|
amount: '2999,00 €',
|
|
|
|
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
date: '2021-04-01',
|
|
|
|
amount: '2464.65 €',
|
|
|
|
description: 'Office-Supplies - STAPLES BREMEN',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
date: '2021-04-01',
|
|
|
|
amount: '2464.65 €',
|
|
|
|
description: 'Office-Supplies - STAPLES BREMEN',
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
>This is a slotted Text</dees-table
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
@property()
|
|
|
|
public heading1: string;
|
|
|
|
|
|
|
|
@property()
|
|
|
|
public heading2: string;
|
|
|
|
|
|
|
|
@property({
|
2021-10-07 16:47:36 +00:00
|
|
|
type: Array,
|
2021-10-07 16:01:05 +00:00
|
|
|
})
|
|
|
|
public data: T[] = [];
|
|
|
|
|
|
|
|
@property()
|
|
|
|
public selectedDataRow: T;
|
|
|
|
|
|
|
|
@property({
|
|
|
|
type: String,
|
|
|
|
})
|
|
|
|
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
|
|
|
|
|
|
|
@property({
|
|
|
|
type: String,
|
|
|
|
})
|
|
|
|
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
}
|
|
|
|
|
|
|
|
public static styles = [
|
|
|
|
cssManager.defaultStyles,
|
|
|
|
css`
|
|
|
|
.mainbox {
|
|
|
|
color: #fff;
|
|
|
|
font-family: Roboto Mono;
|
|
|
|
padding: 20px;
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
min-height: 50px;
|
|
|
|
background: #393939;
|
|
|
|
border-radius: 3px;
|
|
|
|
}
|
|
|
|
.headingSeparation {
|
|
|
|
margin-top: 7px;
|
|
|
|
border-bottom: 1px solid #bcbcbc;
|
|
|
|
}
|
|
|
|
|
|
|
|
table,
|
|
|
|
.noDataSet {
|
|
|
|
margin-top: 20px;
|
|
|
|
color: #fff;
|
|
|
|
border-collapse: collapse;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.noDataSet {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
tr {
|
|
|
|
border-bottom: 1px dashed #808080;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
tr:last-child {
|
|
|
|
border-bottom: none;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
tr:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
tr:hover .innerCellContainer {
|
|
|
|
background: #ffffff10;
|
|
|
|
}
|
|
|
|
tr:first-child:hover {
|
|
|
|
cursor: auto;
|
|
|
|
}
|
|
|
|
tr:first-child:hover .innerCellContainer {
|
|
|
|
background: none;
|
|
|
|
}
|
2021-10-07 16:47:36 +00:00
|
|
|
tr.selected .innerCellContainer {
|
|
|
|
background: #ffffff20
|
|
|
|
}
|
2021-10-07 16:01:05 +00:00
|
|
|
th {
|
|
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
th,
|
|
|
|
td {
|
|
|
|
padding: 3px 0px;
|
|
|
|
border-right: 1px dashed #808080;
|
|
|
|
}
|
|
|
|
.innerCellContainer {
|
|
|
|
padding: 7px 10px;
|
|
|
|
}
|
|
|
|
th:first-child .innerCellContainer,
|
|
|
|
td:first-child .innerCellContainer {
|
|
|
|
padding-left: 0px;
|
|
|
|
}
|
|
|
|
th:last-child .innerCellContainer,
|
|
|
|
td:last-child .innerCellContainer {
|
|
|
|
padding-right: 0px;
|
|
|
|
}
|
|
|
|
th:last-child,
|
|
|
|
td:last-child {
|
|
|
|
border-right: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tableStatistics {
|
|
|
|
padding: 5px 20px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #ffffff90;
|
|
|
|
background: #00000050;
|
|
|
|
margin: 20px -20px -20px -20px;
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
];
|
|
|
|
|
|
|
|
public render(): TemplateResult {
|
|
|
|
return html`
|
|
|
|
<div class="mainbox">
|
|
|
|
<!-- the heading part -->
|
|
|
|
<div>${this.heading1}</div>
|
|
|
|
<div>${this.heading2}</div>
|
|
|
|
<div class="headingSeparation"></div>
|
|
|
|
|
|
|
|
<!-- the actual table -->
|
|
|
|
<style></style>
|
|
|
|
${this.data.length > 0
|
|
|
|
? (() => {
|
|
|
|
const headings: string[] = Object.keys(this.data[0]);
|
|
|
|
return html`
|
|
|
|
<table>
|
|
|
|
<tr>
|
2021-10-07 16:47:36 +00:00
|
|
|
${headings.map(
|
|
|
|
(headingArg) => html`
|
|
|
|
<th>
|
|
|
|
<div class="innerCellContainer">${headingArg}</div>
|
|
|
|
</th>
|
|
|
|
`
|
|
|
|
)}
|
2021-10-07 16:01:05 +00:00
|
|
|
</tr>
|
2021-10-07 16:47:36 +00:00
|
|
|
${this.data.map(
|
|
|
|
(itemArg) => html`
|
|
|
|
<tr
|
|
|
|
@click=${() => {
|
|
|
|
this.selectedDataRow = itemArg;
|
|
|
|
}}
|
|
|
|
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
|
|
|
>
|
|
|
|
${headings.map(
|
|
|
|
(headingArg) => html`
|
|
|
|
<td>
|
|
|
|
<div class="innerCellContainer">${itemArg[headingArg]}</div>
|
|
|
|
</td>
|
|
|
|
`
|
|
|
|
)}
|
|
|
|
</tr>
|
|
|
|
`
|
|
|
|
)}
|
2021-10-07 16:01:05 +00:00
|
|
|
</table>
|
|
|
|
`;
|
|
|
|
})()
|
|
|
|
: html` <div class="noDataSet">No data set!</div> `}
|
|
|
|
<div class="tableStatistics">
|
|
|
|
${this.data.length} data rows (total) |
|
2021-10-07 16:47:36 +00:00
|
|
|
${this.selectedDataRow ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected` : html`No row selected`}
|
2021-10-07 16:01:05 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
public async firstUpdated() {}
|
|
|
|
}
|