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

Made table rounded without having to user overflow hidden.

Browse Source
This commit is contained in:
MattMo 2023-04-22 20:21:45 -07:00
parent be22d0acd7
commit dde2e5293a
1 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
data-table.js
View File

@ -31,6 +31,26 @@ class DataTable extends IgniteElement {
super();
}
get styles() {
return /*css*/`
bt-data-table table thead th:first-child {
border-top-left-radius: var(--bs-border-radius);
}
bt-data-table table thead th:last-child {
border-top-right-radius: var(--bs-border-radius);
}
bt-data-table table tbody tr:last-child td:first-child {
border-bottom-left-radius: var(--bs-border-radius);
}
bt-data-table table tbody tr:last-child td:last-child {
border-bottom-right-radius: var(--bs-border-radius);
}
`;
}
get properties() {
return {
columns: [],
@ -128,7 +148,7 @@ class DataTable extends IgniteElement {
),
//Rows
new div().class("table-responsive rounded-2 mb-3").child(
new div().class("mb-3").child(
new table().class("table table-striped align-middle mb-0 table-borderless").child(
//Table columns
new thead().class("table-dark").child(