From b60659761bd20fdbd86e9354e270ba25782cde00 Mon Sep 17 00:00:00 2001 From: MattMo Date: Thu, 20 Apr 2023 16:14:35 -0700 Subject: [PATCH] Made data table more mobile friendly without having to hide certain controls unless they are explicitly hidden. --- data-table.js | 44 +++++++++++++++++++++++--------------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/data-table.js b/data-table.js index 6c98b79..9b28500 100644 --- a/data-table.js +++ b/data-table.js @@ -87,16 +87,17 @@ class DataTable extends IgniteElement { showPageSize: true, showSearchBox: true, showRowCount: true, + showPages: true, showPageJumpTo: true } } render() { return this.template.child( - new div().show([this.showPageSize, this.showSearchBox, this.showRowCount], (pageSize, searchBox, rowCount) => pageSize || searchBox || rowCount).class("row mb-3").child( - new div().class("col-12 col-sm-8 col-lg-6 d-flex flex-column flex-sm-row justify-content-start gap-3 flex-wrap flex-sm-nowrap").child( + new div().show([this.showPageSize, this.showSearchBox, this.showRowCount], (pageSize, searchBox, rowCount) => pageSize || searchBox || rowCount).class("row g-3 mb-3").child( + new div().class("col-12 col-sm-8 col-lg-8 d-flex flex-row justify-content-start gap-3 flex-nowrap").child( //Page size selector - new div().show(this.showPageSize).class("input-group d-none d-sm-flex flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child( + new div().show(this.showPageSize).class("input-group d-flex flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child( new span().class("input-group-text border-0 bg-white").child(``), new select().class("form-select border-0 w-auto").child( @@ -104,8 +105,13 @@ class DataTable extends IgniteElement { ).value(this.pageSize, true) ), - //Search box - new div().show(this.showSearchBox).class("input-group flex-nowrap w-auto flex-grow-1").child( + //Row count + new span().show(this.showRowCount).class("bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0").innerHTML(this.results, results => results.length == 0 ? "No rows" : `${results.length} ${(results.length < 2 ? "row" : "rows")}`) + ), + + //Search box + new div().show(this.showSearchBox).class("col-12 col-sm-4 col-lg-4 d-flex flex-row justify-content-end gap-3 flex-wrap").child( + new div().class("input-group flex-nowrap w-auto flex-grow-1").child( new span().class("input-group-text border-0 bg-white").child(``), new input().class("form-control") @@ -118,11 +124,6 @@ class DataTable extends IgniteElement { } }) ) - ), - - //Rows count - new div().class("d-none col-12 col-sm-4 col-lg-6 d-sm-flex flex-row justify-content-end gap-3 flex-wrap").child( - new span().class("bg-white p-2 rounded-2").innerHTML(this.results, results => results.length == 0 ? "No rows" : `${results.length} ${(results.length < 2 ? "row" : "rows")}`) ) ), @@ -148,13 +149,13 @@ class DataTable extends IgniteElement { ) ), - new div().class("row").child( - new div().class("col-12 d-flex flex-row gap-3 flex-wrap justify-content-around").child( - //Pages - new div().class("btn-group flex-wrap justify-content-center d-none d-sm-flex").child( + new div().class("row g-3").child( + //Pagination pages + new div().show(this.showPages).class("col-12 col-sm-9 col-lg-8 d-flex flex-row justify-content-start").child( + new div().class("btn-group flex-wrap justify-content-center d-flex flex-grow-1").style("max-width", "35em").child( //Previous page button new button() - .class("btn btn-secondary flex-grow-0") + .class("btn btn-secondary flex-grow-1") .child(``) .onClick(() => { if (this.currentPage > 0) { @@ -172,8 +173,7 @@ class DataTable extends IgniteElement { return null; } return new button() - .class("btn text-center flex-grow-0") - .style("width", "3em") + .class("btn text-center flex-grow-1") .class(current, current => current ? "btn-primary" : "btn-secondary") .innerText(filler ? "..." : index + 1) .onClick(() => this.currentPage = index) @@ -181,17 +181,19 @@ class DataTable extends IgniteElement { //Next page button new button() - .class("btn btn-secondary flex-grow-0") + .class("btn btn-secondary flex-grow-1") .child(``) .onClick(() => { if (this.currentPage < this.pageCount) { this.currentPage = this.currentPage + 1; } }), - ), + ) + ), - //Page jump to - new div().show(this.showPageJumpTo).class("input-group flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child( + //Page jump to select + new div().show(this.showPageJumpTo).class("col-12 col-sm-3 col-lg-4 d-flex flex-row justify-content-end").child( + new div().class("input-group flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child( new select().class("form-select border-0 w-auto").child( new population( this.pageCount,