diff --git a/packages/data-table-view/README.md b/packages/data-table-view/README.md index fb7bebff88500bb0925703d49f52095f061edf5a..929b27f5a059352603a67027fcc913a6f5c02614 100644 --- a/packages/data-table-view/README.md +++ b/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 diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js index 5750d542b9fee0d48f09bdfcd5a3a39d5eca4170..cf9f154c8ea77fcaded231fde011267d4eb76cc4 100644 --- a/packages/data-table-view/src/data-table-view.js +++ b/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 diff --git a/packages/data-table-view/src/vpu-data-table-view-demo.js b/packages/data-table-view/src/vpu-data-table-view-demo.js index 0bb69fb24ebb28936449902479327ea1de10359e..cd48ad2e964ab10821eb9b4b8a0f2b3d0bd8a795 100644 --- a/packages/data-table-view/src/vpu-data-table-view-demo.js +++ b/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>