From 63d3c9f469a4910c10c0124e33c3755bec917495 Mon Sep 17 00:00:00 2001 From: MattMo Date: Wed, 24 May 2023 16:02:51 -0700 Subject: [PATCH] Tried to improve the data table by exposing settings to control the classes of buttons and inputs. --- data-table.js | 31 ++++++++++++++++++++----------- yes-no-dialog.js | 4 ++-- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/data-table.js b/data-table.js index 0ebbebf..5af755d 100644 --- a/data-table.js +++ b/data-table.js @@ -243,13 +243,22 @@ class DataTable extends IgniteElement { } }), currentPage: 0, + headClass: "table-dark", + bodyClass: null, pendingSearch: null, showPageSize: true, + pageSizeClass: "form-select w-auto text-dark", + pageSizeSpanClass: "input-group-text bg-white text-dark", showSearchBox: true, + 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", showPages: true, showPageJumpTo: true, - refreshButton: true, + pageJumpToClass: "form-select border-0 w-auto text-dark", + showRefreshButton: true, + refreshButtonClass: "btn btn-secondary text-dark", refresh: null, pendingFilter: null, loading: false @@ -258,22 +267,22 @@ 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 g-3 mb-3").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( //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("input-group-text border-0 bg-white").child(``), + new span().class(this.pageSizeSpanClass).child(``), - new select().class("form-select border-0 w-auto").child( + new select().class(this.pageSizeClass).child( new list(this.pageSizeOptions, size => new option().child(size)) ).value(this.pageSize, true) ), //Row count - new span().show(this.showRowCount).class("bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0").innerHTML(this.filtered, filtered => filtered.length == 0 ? "No rows" : `${filtered.length} ${(filtered.length < 2 ? "row" : "rows")}`), + new span().show(this.showRowCount).class(this.rowCountClass).innerHTML(this.filtered, filtered => filtered.length == 0 ? "No rows" : `${filtered.length} ${(filtered.length < 2 ? "row" : "rows")}`), //Refresh button - new button().class("btn btn-secondary").child(new i().class("fa-solid fa-arrows-rotate")).onClick(async () => { + new button().show(this.showRefreshButton).class(this.refreshButtonClass).child(new i().class("fa-solid fa-arrows-rotate")).onClick(async () => { if (this.refresh instanceof Function) { this.loading = true; @@ -292,9 +301,9 @@ 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().class("input-group flex-nowrap w-auto flex-grow-1").child( - new span().class("input-group-text border-0 bg-white").child(``), + new span().class(this.searchBoxSpanClass).child(``), - new input().class("form-control") + new input().class(this.searchBoxClass) .value(this.filterSearch, true) .onEnter(() => this.filter()) .onChange(() => this.filter()) @@ -311,7 +320,7 @@ class DataTable extends IgniteElement { new div().class("mb-3").child( new table().class("table table-light align-middle mb-0 table-borderless").child( //Table columns - new thead().class("table-dark").child( + new thead().class(this.headClass).child( new tr().child( new list(this.columns, column => { return new th().class("text-nowrap").class(column.sortable, sortable => sortable ? "cursor-pointer" : null).attribute("scope", "col").child( @@ -336,7 +345,7 @@ class DataTable extends IgniteElement { ), //Table rows - new tbody().hide(this.loading).child( + new tbody().class(this.bodyClass).hide(this.loading).child( new pagination(this.filtered, this.pageSize, this.currentPage, row => new tr().child(new list(row.columns, column => new td().child(column)))) ) ), @@ -393,7 +402,7 @@ class DataTable extends IgniteElement { //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 select().class(this.pageJumpToClass).child( new population( this.pageCount, index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).innerText(`Page ${index + 1}`) diff --git a/yes-no-dialog.js b/yes-no-dialog.js index 02c71a9..16d4be6 100644 --- a/yes-no-dialog.js +++ b/yes-no-dialog.js @@ -1,6 +1,6 @@ import { IgniteElement } from "../ignite-html/ignite-element.js"; import { IgniteProperty } from "../ignite-html/ignite-html.js"; -import { IgniteTemplate, div, h2, h6, button } from "../ignite-html/ignite-template.js"; +import { IgniteTemplate, div, h2, h5, button } from "../ignite-html/ignite-template.js"; class YesNoDialog extends IgniteElement { constructor() { @@ -31,7 +31,7 @@ class YesNoDialog extends IgniteElement { //Title new h2().class("text-primary text-center mb-3").child(this.title), - new h6().show(this.description, description => description != null && description != undefined).class("text-center mb-4").child(this.description), + new h5().show(this.description, description => description != null && description != undefined).class("text-center mb-4").child(this.description), //Yes and No button new div().class("d-flex flex-row gap-3 w-100").child(