MontoyaTech/ignite-html-bootstrap
MontoyaTech/ignite-html-bootstrap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Tried to improve the data table by exposing settings to control the classes of buttons and inputs.

Browse Source
This commit is contained in:
MattMo 2023-05-24 16:02:51 -07:00
parent 159ce7313a
commit 63d3c9f469
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
data-table.js
View File

@ -243,13 +243,22 @@ class DataTable extends IgniteElement {
} }
}), }),
currentPage: 0, currentPage: 0,
headClass: "table-dark",
bodyClass: null,
pendingSearch: null, pendingSearch: null,
showPageSize: true, showPageSize: true,
pageSizeClass: "form-select w-auto text-dark",
pageSizeSpanClass: "input-group-text bg-white text-dark",
showSearchBox: true, showSearchBox: true,
searchBoxClass: "form-control bg-white",
searchBoxSpanClass: "input-group-text bg-white text-dark",
showRowCount: true, showRowCount: true,
rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark",
showPages: true, showPages: true,
showPageJumpTo: true, showPageJumpTo: true,
refreshButton: true, pageJumpToClass: "form-select border-0 w-auto text-dark",
showRefreshButton: true,
refreshButtonClass: "btn btn-secondary text-dark",
refresh: null, refresh: null,
pendingFilter: null, pendingFilter: null,
loading: false loading: false
@ -258,22 +267,22 @@ class DataTable extends IgniteElement {
render() { render() {
return this.template.child( 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( 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 //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 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(`<i class="fa-solid fa-list-ul"></i>`), new span().class(this.pageSizeSpanClass).child(`<i class="fa-solid fa-list-ul"></i>`),
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)) new list(this.pageSizeOptions, size => new option().child(size))
).value(this.pageSize, true) ).value(this.pageSize, true)
), ),
//Row count //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 //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) { if (this.refresh instanceof Function) {
this.loading = true; this.loading = true;
@ -292,9 +301,9 @@ class DataTable extends IgniteElement {
//Search box //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("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 div().class("input-group flex-nowrap w-auto flex-grow-1").child(
new span().class("input-group-text border-0 bg-white").child(`<i class="fa-solid fa-magnifying-glass"></i>`), new span().class(this.searchBoxSpanClass).child(`<i class="fa-solid fa-magnifying-glass"></i>`),
new input().class("form-control") new input().class(this.searchBoxClass)
.value(this.filterSearch, true) .value(this.filterSearch, true)
.onEnter(() => this.filter()) .onEnter(() => this.filter())
.onChange(() => this.filter()) .onChange(() => this.filter())
@ -311,7 +320,7 @@ class DataTable extends IgniteElement {
new div().class("mb-3").child( new div().class("mb-3").child(
new table().class("table table-light align-middle mb-0 table-borderless").child( new table().class("table table-light align-middle mb-0 table-borderless").child(
//Table columns //Table columns
new thead().class("table-dark").child( new thead().class(this.headClass).child(
new tr().child( new tr().child(
new list(this.columns, column => { new list(this.columns, column => {
return new th().class("text-nowrap").class(column.sortable, sortable => sortable ? "cursor-pointer" : null).attribute("scope", "col").child( 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 //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)))) 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 //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().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 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( new population(
this.pageCount, this.pageCount,
index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).innerText(`Page ${index + 1}`) index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).innerText(`Page ${index + 1}`)

4
yes-no-dialog.js
View File

@ -1,6 +1,6 @@
import { IgniteElement } from "../ignite-html/ignite-element.js"; import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteProperty } from "../ignite-html/ignite-html.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 { class YesNoDialog extends IgniteElement {
constructor() { constructor() {
@ -31,7 +31,7 @@ class YesNoDialog extends IgniteElement {
//Title //Title
new h2().class("text-primary text-center mb-3").child(this.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 //Yes and No button
new div().class("d-flex flex-row gap-3 w-100").child( new div().class("d-flex flex-row gap-3 w-100").child(