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,
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(`<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))
).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(`<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)
.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}`)

4
yes-no-dialog.js
View File

@ -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(