From 2870ae49cee87d0fe66c2230e3fa36c0c8159c62 Mon Sep 17 00:00:00 2001 From: MattMo Date: Mon, 10 Jul 2023 16:38:24 -0700 Subject: [PATCH] Improved the page size, row count and search box row, it now handles resizing better. --- data-table.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/data-table.js b/data-table.js index 9e38979..1488ad5 100644 --- a/data-table.js +++ b/data-table.js @@ -275,7 +275,7 @@ class DataTable extends IgniteElement { searchBoxClass: "form-control bg-white", searchBoxSpanClass: "input-group-text bg-white text-dark", showRowCount: true, - rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark", + rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark text-nowrap", showPages: true, showPageJumpTo: true, pageJumpToClass: "form-select border-0 w-auto text-dark", @@ -289,8 +289,8 @@ class DataTable extends IgniteElement { render() { return this.template.child( - new div().show([this.showPageSize, this.showSearchBox, this.showRowCount, this.showRefreshButton], (pageSize, searchBox, rowCount, refreshButton) => pageSize || searchBox || rowCount || refreshButton).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( + new div().show([this.showPageSize, this.showSearchBox, this.showRowCount, this.showRefreshButton], (pageSize, searchBox, rowCount, refreshButton) => pageSize || searchBox || rowCount || refreshButton).class("d-flex flex-column flex-sm-row gap-3 justify-content-between flex-wrap mb-3").child( + new div().class("d-flex flex-row justify-content-start gap-3 flex-nowrap flex-fill").child( //Page size selector 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(this.pageSizeSpanClass).child(``), @@ -321,7 +321,7 @@ class DataTable extends IgniteElement { ), //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().show(this.showSearchBox).class("d-flex flex-row justify-content-end gap-3 flex-wrap flex-fill").style("max-width", "576px").child( new div().class("input-group flex-nowrap w-auto flex-grow-1").child( new span().class(this.searchBoxSpanClass).child(``),