130 lines
3.3 KiB
TypeScript
130 lines
3.3 KiB
TypeScript
import { type ITableAction } from './dees-table.js';
|
|
import * as plugins from './00plugins.js';
|
|
import { html } from '@design.estate/dees-element';
|
|
|
|
interface ITableDemoData {
|
|
date: string;
|
|
amount: string;
|
|
description: string;
|
|
}
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
.demoWrapper {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px;
|
|
background: #000000;
|
|
}
|
|
</style>
|
|
<div class="demoWrapper">
|
|
<dees-table
|
|
heading1="Current Account Statement"
|
|
heading2="Bunq - Payment Account 2 - April 2021"
|
|
.editableFields="${['description']}"
|
|
.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',
|
|
},
|
|
]}
|
|
dataName="transactions"
|
|
.dataActions="${[
|
|
{
|
|
name: 'upload',
|
|
iconName: 'bell',
|
|
useTableBehaviour: 'upload',
|
|
type: ['inRow'],
|
|
actionFunc: async (optionsArg) => {
|
|
alert(optionsArg.item.amount);
|
|
},
|
|
},
|
|
{
|
|
name: 'visibility',
|
|
iconName: 'copy',
|
|
type: ['inRow'],
|
|
useTableBehaviour: 'preview',
|
|
actionFunc: async (itemArg: any) => {},
|
|
},
|
|
{
|
|
name: 'create new',
|
|
iconName: 'instagram',
|
|
type: ['header'],
|
|
useTableBehaviour: 'preview',
|
|
actionFunc: async (itemArg: any) => {},
|
|
},
|
|
{
|
|
name: 'to gallery',
|
|
iconName: 'message',
|
|
type: ['footer'],
|
|
useTableBehaviour: 'preview',
|
|
actionFunc: async (itemArg: any) => {},
|
|
},
|
|
{
|
|
name: 'copy',
|
|
iconName: 'copySolid',
|
|
type: ['contextmenu', 'inRow'],
|
|
action: async () => {
|
|
return null;
|
|
},
|
|
},
|
|
{
|
|
name: 'edit (from demo)',
|
|
iconName: 'penToSquare',
|
|
type: ['contextmenu'],
|
|
action: async () => {
|
|
return null;
|
|
},
|
|
},
|
|
{
|
|
name: 'paste',
|
|
iconName: 'pasteSolid',
|
|
type: ['contextmenu'],
|
|
action: async () => {
|
|
return null;
|
|
},
|
|
},
|
|
{
|
|
name: 'preview',
|
|
type: ['doubleClick', 'contextmenu'],
|
|
iconName: 'eye',
|
|
actionFunc: async (itemArg) => {
|
|
alert(itemArg.item.amount);
|
|
return null;
|
|
},
|
|
}
|
|
] as (ITableAction<ITableDemoData>)[] as any}"
|
|
.displayFunction=${(itemArg) => {
|
|
return {
|
|
...itemArg,
|
|
onlyDisplayProp: 'onlyDisplay',
|
|
};
|
|
}}
|
|
>This is a slotted Text</dees-table
|
|
>
|
|
</div>
|
|
`;
|