From e4c1ea950b61f452f58b386989399e018e4f3df6 Mon Sep 17 00:00:00 2001 From: MattMo Date: Thu, 20 Apr 2023 10:22:33 -0700 Subject: [PATCH] Working on making data table more mobile friendly. --- data-table.js | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/data-table.js b/data-table.js index 74f1fee..1b0ece1 100644 --- a/data-table.js +++ b/data-table.js @@ -94,10 +94,10 @@ class DataTable extends IgniteElement { 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 d-flex flex-row justify-content-between gap-3").child( - new div().class("d-flex flex-row gap-3").child( + new div().class("col-12 d-flex flex-row justify-content-between gap-3 flex-wrap").child( + new div().class("d-flex flex-row gap-3 flex-wrap flex-grow-1 flex-sm-grow-0").child( //Page size selector - new div().show(this.showPageSize).class("input-group flex-nowrap w-auto").child( + new div().show(this.showPageSize).class("input-group 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( @@ -106,7 +106,7 @@ class DataTable extends IgniteElement { ), //Search box - new div().show(this.showSearchBox).class("input-group flex-nowrap").child( + new div().show(this.showSearchBox).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") @@ -122,20 +122,22 @@ class DataTable extends IgniteElement { ), //Rows count - new div().show(this.showRowCount).class("bg-white p-2 rounded-2 d-flex align-items-center justify-content-center").innerHTML(this.results, results => results.length == 0 ? "No rows" : `${results.length} ${(results.length < 2 ? "row" : "rows")}`) + new div().show(this.showRowCount).class("d-sm-flex d-none align-items-center justify-content-end text-nowrap flex-grow-1").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")}`) + ) ) ), - new div().class("table-responsive overflow-hidden rounded-2 mb-3").child( + new div().class("table-responsive rounded-2 mb-3").child( new table().class("table table-striped align-middle mb-0").child( //Table columns new thead().class("table-dark").child( new tr().child( new list(this.columns, column => { if (column instanceof DataColumn) { - return new th().attribute("scope", "col").child(column.name); + return new th().class("text-nowrap").attribute("scope", "col").child(column.name); } else { - return new th().attribute("scope", "col").child(column); + return new th().class("text-nowrap").attribute("scope", "col").child(column); } }) ) @@ -149,12 +151,12 @@ class DataTable extends IgniteElement { ), new div().class("row").child( - new div().class("col-12 d-flex flex-row gap-3 flex-wrap").child( + new div().class("col-12 d-flex flex-row gap-3 flex-wrap justify-content-between").child( //Pages - new div().class("btn-group").child( + new div().class("btn-group flex-wrap justify-content-center d-none d-sm-flex").child( //Previous page button new button() - .class("btn btn-secondary") + .class("btn btn-secondary flex-grow-0") .child(``) .onClick(() => { if (this.currentPage > 0) { @@ -172,7 +174,7 @@ class DataTable extends IgniteElement { return null; } return new button() - .class("btn text-center") + .class("btn text-center flex-grow-0") .style("width", "3em") .class(current, current => current ? "btn-primary" : "btn-secondary") .innerText(filler ? "..." : index + 1) @@ -181,7 +183,7 @@ class DataTable extends IgniteElement { //Next page button new button() - .class("btn btn-secondary") + .class("btn btn-secondary flex-grow-0") .child(``) .onClick(() => { if (this.currentPage < this.pageCount) { @@ -191,11 +193,11 @@ class DataTable extends IgniteElement { ), //Page jump to - new div().show(this.showPageJumpTo).class("input-group flex-nowrap w-auto").child( + new div().show(this.showPageJumpTo).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, - index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).child(index + 1) + index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).innerText(`Page ${index + 1}`) ) ).value(this.currentPage, true) )