feature(Table): added first logic of table

README.md

@@ -136,6 +136,7 @@ export class AppModule {}
 * [Description List](/src/description-list/README.md)
 * [Dotnav](/src/dotnav/README.md)
 * [Tabs](/src/tabs/README.md)
+* [Table](/src/table/README.md)
 
 ### In Progress
 
@@ -190,7 +191,6 @@ export class AppModule {}
 * [Subnav](/src//README.md)
 * [SVG](/src//README.md)
 * [Switcher](/src//README.md)
-* [Table](/src//README.md)
 * [Text](/src//README.md)
 * [Thumbnav](/src//README.md)
 * [Tile](/src//README.md)

develop/src/app/app.components.module.ts

@@ -17,6 +17,7 @@ import { LoadingComponent } from '../../../src/loading/loading.component';
 import { AlertComponent } from '../../../src/alert/alert.component';
 import { SpinnerComponent } from '../../../src/spinner/spinner.component';
 import { TabsComponent } from '../../../src/tabs/tabs.component';
+import { TableComponent } from '../../../src/table/table.component';
 
 import { DescriptionListComponent } from '../../../src/description-list/description-list.component';
 import { RegularMarkdownComponent } from './markdown-reader/markdown-regular.component';
@@ -46,7 +47,8 @@ import { NavComponent } from './nav-view/nav-component';
     DotnavComponent,
     LoadingComponent,
     SpinnerComponent,
-    TabsComponent
+    TabsComponent,
+    TableComponent
   ]
 })
 export class AppComponentsModule {}

develop/src/app/app.routing.module.ts

@@ -27,6 +27,7 @@ import { DotnavViewComponent } from './dotnav-view/dotnav-view.component';
 import { LoadingViewComponent } from './loading-view/loading-view.component';
 import { SpinnerViewComponent } from './spinner-view/spinner-view.component';
 import { TabsViewComponent } from './tabs-view/tabs-view.component';
+import { TableViewComponent } from './table-view/table-view.component';
 
 @Module({
   imports: [
@@ -124,6 +125,10 @@ import { TabsViewComponent } from './tabs-view/tabs-view.component';
           path: '/ui-kit/tabs',
           component: TabsViewComponent
         },
+        {
+          path: '/ui-kit/table',
+          component: TableViewComponent
+        },
       ],
       { log: true, baseUrl: '/ui-kit' }
     )

develop/src/app/nav-view/nav-component.ts

@@ -42,6 +42,7 @@ import { Nav } from '../../../../src/nav';
         <a href="/ui-kit/loading"><rx-button palette="primary">Loading</rx-button> </a>
         <a href="/ui-kit/spinner"><rx-button palette="primary">Spinner</rx-button> </a>
         <a href="/ui-kit/tabs"><rx-button palette="primary">Tabs</rx-button> </a>
+        <a href="/ui-kit/table"><rx-button palette="primary">Table</rx-button> </a>
 
         <!-- <rx-button
           palette="danger"

develop/src/app/table-view/data.ts

@@ -0,0 +1,66 @@
+export const DATA = [
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  },
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  },
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  },
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  },
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  },
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  },
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  },
+  {
+    country: 'Bulgaria',
+    events: 'Blue Mountains Tour',
+    time: '5 Sep, 9p.m.',
+    fees: 'US$600',
+    time2: '5 Sep, 9p.m.',
+    fees2: 'US$600'
+  }
+];

develop/src/app/table-view/table-view.component.ts

@@ -0,0 +1,44 @@
+import {
+  LitElement,
+  Component,
+  html,
+  css,
+  query,
+  OnUpdateFirst
+} from '@rxdi/lit-html';
+import { Animations, animateElement } from '../../../../src/styles/animations';
+import { DATA } from './data';
+
+/**
+ * @customElement table-view-component
+ */
+@Component({
+  selector: 'table-view-component',
+  style: css`
+    ${Animations}
+    .container {
+      margin: 0px auto;
+      padding: 50px;
+      text-align: center;
+      user-select: none;
+    }
+  `,
+  template(this: TableViewComponent) {
+    return html`
+      <div class="container">
+        <rx-table
+          .columns=${['Country', 'Events', 'Time', 'Fees', 'МЯУ', 'МЯУ2']}
+          .data=${DATA}
+        ></rx-table>
+      </div>
+    `;
+  }
+})
+export class TableViewComponent extends LitElement implements OnUpdateFirst {
+  @query('div')
+  private container: HTMLElement;
+
+  OnUpdateFirst() {
+    animateElement(this.container, 'bounceInDown');
+  }
+}

docs/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no"><title>@rxdi client side example</title><meta name="theme-color" content="#33383a"><style>body{margin:0;padding:0;color:#f8f8f8;font-family:Roboto,sans-serif;background-color:#23272c;overflow:visible}</style><base href="/"><meta name="mobile-web-app-capable" content="yes"><meta name="mobile-web-app-status-bar-style" content="black"><meta name="mobile-web-app-title" content="Expenses"><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><script async>window.onerror=((r,o,t)=>(Swal.fire({type:"error",title:"Oops...",text:r,footer:`<p><strong>File:</strong> ${o}</p>&nbsp<p><strong>Line:</strong> ${t}</p>`}),!0));</script></head><body> <div id="app"></div> </body><script type="text/javascript" src="/ui-kit/main.0f56c3e3.js"></script></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no"><title>@rxdi client side example</title><meta name="theme-color" content="#33383a"><style>body{margin:0;padding:0;color:#f8f8f8;font-family:Roboto,sans-serif;background-color:#23272c;overflow:visible}</style><base href="/"><meta name="mobile-web-app-capable" content="yes"><meta name="mobile-web-app-status-bar-style" content="black"><meta name="mobile-web-app-title" content="Expenses"><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><script async>window.onerror=((r,o,t)=>(Swal.fire({type:"error",title:"Oops...",text:r,footer:`<p><strong>File:</strong> ${o}</p>&nbsp<p><strong>Line:</strong> ${t}</p>`}),!0));</script></head><body> <div id="app"></div> </body><script type="text/javascript" src="/ui-kit/main.d8c7734a.js"></script></html>

docs/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no"><title>@rxdi client side example</title><meta name="theme-color" content="#33383a"><style>body{margin:0;padding:0;color:#f8f8f8;font-family:Roboto,sans-serif;background-color:#23272c;overflow:visible}</style><base href="/"><meta name="mobile-web-app-capable" content="yes"><meta name="mobile-web-app-status-bar-style" content="black"><meta name="mobile-web-app-title" content="Expenses"><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><script async>window.onerror=((r,o,t)=>(Swal.fire({type:"error",title:"Oops...",text:r,footer:`<p><strong>File:</strong> ${o}</p>&nbsp<p><strong>Line:</strong> ${t}</p>`}),!0));</script></head><body> <div id="app"></div> </body><script type="text/javascript" src="/ui-kit/main.0f56c3e3.js"></script></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no"><title>@rxdi client side example</title><meta name="theme-color" content="#33383a"><style>body{margin:0;padding:0;color:#f8f8f8;font-family:Roboto,sans-serif;background-color:#23272c;overflow:visible}</style><base href="/"><meta name="mobile-web-app-capable" content="yes"><meta name="mobile-web-app-status-bar-style" content="black"><meta name="mobile-web-app-title" content="Expenses"><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><script async>window.onerror=((r,o,t)=>(Swal.fire({type:"error",title:"Oops...",text:r,footer:`<p><strong>File:</strong> ${o}</p>&nbsp<p><strong>Line:</strong> ${t}</p>`}),!0));</script></head><body> <div id="app"></div> </body><script type="text/javascript" src="/ui-kit/main.d8c7734a.js"></script></html>