Add default ordering as attribute

See issue #5

packages/data-table-view/README.md

@@ -19,8 +19,11 @@
     - example `<vpu-data-table-view exportable></pu-data-table-view>`
 - `export-name` (optional, default: 'Data Export'): add name for download file (without extension)
     - example `<vpu-data-table-view exportable export-name="All Items"></pu-data-table-view>`
-- `column-searching` (optional, default false): add search fields for every column
+- `column-searching` (optional, default: false): add search fields for every column
     - example `<vpu-data-table-view column-searching></pu-data-table-view>`
+- `default-ordering` (optional, default: [ ]): set the default ordering as column and direction
+    - example `<vpu-data-table-view default-ordering='[1,"asc"]'></pu-data-table-view>` 
+    - example `<vpu-data-table-view default-ordering='[[0,"desc"],[2,"asc"]]'></pu-data-table-view>` 
 
 # Local development
 ```bash

packages/data-table-view/src/data-table-view.js

@@ -39,6 +39,7 @@ export class DataTableView extends LitElement {
         this.exportable = false;
         this.exportName = 'Data Export';
         this.columnSearching = false;
+        this.defaultOrder = [];
     }
 
     setCSSStyle(style) {
@@ -58,6 +59,7 @@ export class DataTableView extends LitElement {
             exportable: { type: Boolean },
             exportName: { type: String, attribute: 'export-name' },
             columnSearching: { type: Boolean, attribute: 'column-searching'},
+            defaultOrder: { type: Array, attribute: 'default-order'}
         };
     }
 
@@ -69,6 +71,10 @@ export class DataTableView extends LitElement {
         this.columnDefs = defs;
         return this;
     }
+    set_defaultOrder(order) {
+        this.defaultOrder = order;
+        return this;
+    }
     add_row(row) {
         this.data.push(row);
         this.table.row.add(row);
@@ -180,7 +186,7 @@ export class DataTableView extends LitElement {
 
         this.table.clear();
         if (this.data.length) { this.table.rows.add(this.data); }
-        this.table.draw();
+        this.table.order(this.defaultOrder).draw();
 
         new $.fn.dataTable.Responsive(this.table, {
             details: true

packages/data-table-view/src/vpu-data-table-view-demo.js

@@ -68,6 +68,27 @@ class DataTableViewDemo extends ScopedElementsMixin(LitElement) {
                     .set_columnDefs(vdtv2_columnDefs)
                     .set_datatable([]);
             }
+            /*
+                    Third Table: ordering demo
+             */
+            const vdtv3 = that.shadowRoot.querySelector('#vdtv3');
+            if (vdtv3 !== null) {
+                const vdtv3_columnDefs = [
+                    { targets: [0,1,2], visible: true},
+                ];
+                vdtv3.set_columns([{title:'City'}, {title:'Zip'}, {title:'Museum'}])
+                    .set_columnDefs(vdtv3_columnDefs)
+                    // .set_defaultOrder([[1,"desc"],[2,"asc"]])
+                    .set_datatable([
+                        { '0': 'Graz', '1': '8020', '2': 'Alte Galerie'},
+                        { '0': 'Graz', '1': '8020', '2': 'Kunsthaus'},
+                        { '0': 'Graz', '1': '8010', '2': 'Haus der Wissenschaft'},
+                        { '0': 'Graz', '1': '8010', '2': 'Landeszeughaus'},
+                        { '0': 'Linz', '1': '4020', '2': 'Lentos Kunstmuseum'},
+                        { '0': 'Linz', '1': '4020', '2': 'Ars Electronica Center'},
+                        { '0': 'Wien', '1': '1010', '2': 'Museum für Plansprachen'},
+                    ]);
+            }
         });
     }
 
@@ -182,7 +203,9 @@ class DataTableViewDemo extends ScopedElementsMixin(LitElement) {
                      <div class="box">
                         <label for="id-sum">Sum of column <b>Number</b> is</label>
                         <input type="text" readonly value="" name="sum" id="id-sum">
-                        <vpu-data-table-view paging searching exportable export-name="Demo Export" column-searching
+                        <vpu-data-table-view paging searching column-searching
+                                             default-order='[1,"asc"]'
+                                             exportable export-name="Demo Export"
                                              lang="${this.lang}" id="vdtv1"></vpu-data-table-view>
                     </div>
                     <h4>DataTable: no data, no paging, no searching</h4>
@@ -190,6 +213,11 @@ class DataTableViewDemo extends ScopedElementsMixin(LitElement) {
                         <button class="button is-small" @click="${this.vdtv2_add_rows}">add something...</button>
                         <vpu-data-table-view lang="${this.lang}" id="vdtv2"></vpu-data-table-view>
                     </div>
+                    <h4>DataTable: ordering by column 'zip' desc, 'museum' asc</h4>
+                    <div class="box">
+                        <vpu-data-table-view default-order='[[1,"desc"],[2,"asc"]]'
+                                             lang="${this.lang}" id="vdtv3"></vpu-data-table-view>
+                    </div>
                 </div>
 
             </section>