dees-catalog/ts_web/elements/dees-table.demo.ts

import { type ITableAction } from './dees-table.js';
import * as plugins from './plugins.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 (itemArg) => {
            alert(itemArg.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.amount);
            return null;
          },
        }
      ] as (ITableAction<ITableDemoData>)[] as any}"
      .displayFunction=${(itemArg) => {
        return {
          ...itemArg,
          onlyDisplayProp: 'onlyDisplay',
        };
      }}
      >This is a slotted Text</dees-table
    >
  </div>
`;