From 9403309b3da2bdf28948c2a704e8997763a9a38c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 17 Jun 2020 16:57:27 +0300
Subject: [PATCH] Add gridlines and striped demos

---
 public/themes/luna-amber/theme.css            | 77 ++++++++++++++----
 public/themes/luna-blue/theme.css             | 77 ++++++++++++++----
 public/themes/luna-green/theme.css            | 77 ++++++++++++++----
 public/themes/luna-pink/theme.css             | 77 ++++++++++++++----
 public/themes/nova-accent/theme.css           | 77 ++++++++++++++----
 public/themes/nova-alt/theme.css              | 77 ++++++++++++++----
 public/themes/nova-vue/theme.css              | 77 ++++++++++++++----
 public/themes/nova/theme.css                  | 77 ++++++++++++++----
 public/themes/rhea/theme.css                  | 77 ++++++++++++++----
 public/themes/saga-blue/theme.css             | 71 +++++++++++++----
 public/themes/saga-green/theme.css            | 71 +++++++++++++----
 public/themes/saga-orange/theme.css           | 71 +++++++++++++----
 public/themes/vela-blue/theme.css             | 71 +++++++++++++----
 public/themes/vela-green/theme.css            | 71 +++++++++++++----
 public/themes/vela-orange/theme.css           | 71 +++++++++++++----
 public/themes/vela-purple/theme.css           | 71 +++++++++++++----
 src/AppMenu.vue                               |  2 +
 src/router.js                                 | 10 +++
 .../datatable/DataTableGridLinesDemo.vue      | 79 +++++++++++++++++++
 src/views/datatable/DataTableStripedDemo.vue  | 79 +++++++++++++++++++
 20 files changed, 1109 insertions(+), 251 deletions(-)
 create mode 100644 src/views/datatable/DataTableGridLinesDemo.vue
 create mode 100644 src/views/datatable/DataTableStripedDemo.vue

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 1247d8338..3904baef1 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1356,7 +1356,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #FFE082;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #323232;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #FFE082;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #323232;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #FFE082;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #252525;
   color: #dedede;
-  border: 1px solid #191919;
+  border: solid #191919;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 0f566cefd..da7661e8c 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1356,7 +1356,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #81D4FA;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #323232;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #81D4FA;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #323232;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #81D4FA;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #252525;
   color: #dedede;
-  border: 1px solid #191919;
+  border: solid #191919;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 70e72f986..7e84ca1d6 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1356,7 +1356,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #C5E1A5;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #323232;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #C5E1A5;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #323232;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #C5E1A5;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #252525;
   color: #dedede;
-  border: 1px solid #191919;
+  border: solid #191919;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index cad170049..3be8468be 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1356,7 +1356,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #F48FB1;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #323232;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #F48FB1;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #323232;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #F48FB1;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #252525;
   color: #dedede;
-  border: 1px solid #191919;
+  border: solid #191919;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #323232;
   color: #dedede;
   border: 1px solid #191919;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index f83b9b4b4..ffcc2591e 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1356,7 +1356,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #d95f00;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #f9f9f9;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #d95f00;
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #f9f9f9;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #d95f00;
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #f4f4f4;
   color: #333333;
-  border: 1px solid #c8c8c8;
+  border: solid #c8c8c8;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 3b37334cc..fb3ed044c 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1356,7 +1356,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #007ad9;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #f9f9f9;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #007ad9;
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #f9f9f9;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #007ad9;
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #f4f4f4;
   color: #333333;
-  border: 1px solid #c8c8c8;
+  border: solid #c8c8c8;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 24614ff59..2e2761d4b 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1356,7 +1356,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #41b883;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #f9f9f9;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #41b883;
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #f9f9f9;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #41b883;
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #f4f4f4;
   color: #333333;
-  border: 1px solid #c8c8c8;
+  border: solid #c8c8c8;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 03bf216a3..80967d8ac 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1356,7 +1356,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #007ad9;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #f9f9f9;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #007ad9;
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #f9f9f9;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #007ad9;
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #f4f4f4;
   color: #333333;
-  border: 1px solid #c8c8c8;
+  border: solid #c8c8c8;
+  border-width: 1px;
   padding: 0;
   border-radius: 3px;
 }
@@ -1972,7 +1994,7 @@
   background: #ffffff;
   color: #333333;
   border: 1px solid #c8c8c8;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 3px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 9cfe8dc24..3fdc1485c 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1356,7 +1356,7 @@
   background: #ffffff;
   color: #666666;
   border: 1px solid #dadada;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 2px;
@@ -1446,19 +1446,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #AFD3C8;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #f8f8f8;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #AFD3C8;
-  color: #385048;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #385048;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #385048;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #eaeaea;
   color: #666666;
@@ -1473,6 +1460,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #f8f8f8;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #AFD3C8;
+  color: #385048;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #385048;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #385048;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.72845rem 0.85rem;
 }
@@ -1535,7 +1556,7 @@
   background: #ffffff;
   color: #666666;
   border: 1px solid #dadada;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 2px;
@@ -1751,7 +1772,8 @@
 .p-paginator {
   background: #ffffff;
   color: #666666;
-  border: 1px solid #dadada;
+  border: solid #dadada;
+  border-width: 1px;
   padding: 0;
   border-radius: 2px;
 }
@@ -1972,7 +1994,7 @@
   background: #ffffff;
   color: #666666;
   border: 1px solid #dadada;
-  border-width: 1px;
+  border-width: 0 1px 1px 1px;
   padding: 0.571rem 1rem;
   font-weight: normal;
   border-bottom-left-radius: 2px;
@@ -2080,6 +2102,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.749875rem 0.875rem;
 }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 595f4eeda..e330a6a18 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1447,19 +1447,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #2196F3;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #2196F3;
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -1474,6 +1461,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #fbfcfc;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #2196F3;
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.5rem 0.5rem;
 }
@@ -1752,7 +1773,8 @@
 .p-paginator {
   background: #ffffff;
   color: #6c757d;
-  border: 1px solid #e9ecef;
+  border: solid #e9ecef;
+  border-width: 0;
   padding: 0.5rem 1rem;
   border-radius: 4px;
 }
@@ -2081,6 +2103,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.875rem 0.875rem;
 }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index c3a05bb11..e0b1c17c6 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1447,19 +1447,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #4CAF50;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #4CAF50;
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -1474,6 +1461,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #fbfcfc;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #4CAF50;
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.5rem 0.5rem;
 }
@@ -1752,7 +1773,8 @@
 .p-paginator {
   background: #ffffff;
   color: #6c757d;
-  border: 1px solid #e9ecef;
+  border: solid #e9ecef;
+  border-width: 0;
   padding: 0.5rem 1rem;
   border-radius: 4px;
 }
@@ -2081,6 +2103,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.875rem 0.875rem;
 }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 45b4adba6..5de21dc39 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1447,19 +1447,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #FFC107;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #FFC107;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -1474,6 +1461,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #fbfcfc;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #FFC107;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.5rem 0.5rem;
 }
@@ -1752,7 +1773,8 @@
 .p-paginator {
   background: #ffffff;
   color: #6c757d;
-  border: 1px solid #e9ecef;
+  border: solid #e9ecef;
+  border-width: 0;
   padding: 0.5rem 1rem;
   border-radius: 4px;
 }
@@ -2081,6 +2103,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.875rem 0.875rem;
 }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index be8f2f4b8..63b9d0a5c 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1447,19 +1447,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #64B5F6;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #283951;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #64B5F6;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #17212f;
   color: rgba(255, 255, 255, 0.87);
@@ -1474,6 +1461,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #283951;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #64B5F6;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.5rem 0.5rem;
 }
@@ -1752,7 +1773,8 @@
 .p-paginator {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.6);
-  border: 0 none;
+  border: solid #304562;
+  border-width: 1px;
   padding: 0.5rem 1rem;
   border-radius: 4px;
 }
@@ -2081,6 +2103,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.875rem 0.875rem;
 }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 3874269ee..6aeb53888 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1447,19 +1447,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #81C784;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #283951;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #81C784;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #17212f;
   color: rgba(255, 255, 255, 0.87);
@@ -1474,6 +1461,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #283951;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #81C784;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.5rem 0.5rem;
 }
@@ -1752,7 +1773,8 @@
 .p-paginator {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.6);
-  border: 0 none;
+  border: solid #304562;
+  border-width: 1px;
   padding: 0.5rem 1rem;
   border-radius: 4px;
 }
@@ -2081,6 +2103,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.875rem 0.875rem;
 }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 154a3e7f1..5d84f9fc5 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1447,19 +1447,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #FFD54F;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #283951;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #FFD54F;
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212529;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212529;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #17212f;
   color: rgba(255, 255, 255, 0.87);
@@ -1474,6 +1461,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #283951;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #FFD54F;
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #212529;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #212529;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.5rem 0.5rem;
 }
@@ -1752,7 +1773,8 @@
 .p-paginator {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.6);
-  border: 0 none;
+  border: solid #304562;
+  border-width: 1px;
   padding: 0.5rem 1rem;
   border-radius: 4px;
 }
@@ -2081,6 +2103,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.875rem 0.875rem;
 }
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 2d9ae058e..f5c08064a 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1447,19 +1447,6 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #BA68C8;
 }
-.p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background: #283951;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #BA68C8;
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-.p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #17212f;
   color: rgba(255, 255, 255, 0.87);
@@ -1474,6 +1461,40 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+  background: #283951;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
+  background: #BA68C8;
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
 .p-datatable.p-datatable-sm .p-datatable-header {
   padding: 0.5rem 0.5rem;
 }
@@ -1752,7 +1773,8 @@
 .p-paginator {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.6);
-  border: 0 none;
+  border: solid #304562;
+  border-width: 1px;
   padding: 0.5rem 1rem;
   border-radius: 4px;
 }
@@ -2081,6 +2103,27 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable.p-treetable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-top {
+  border-width: 0 1px 0 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
+  border-width: 1px;
+}
+.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+  border-width: 1px;
+}
 .p-treetable.p-treetable-sm .p-treetable-header {
   padding: 0.875rem 0.875rem;
 }
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index c2e9786b1..98fedfd0e 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -80,6 +80,8 @@
                                     <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
                                     <li><router-link to="/datatable/templating">Templating</router-link></li>
                                     <li><router-link to="/datatable/size">Size</router-link></li>
+                                    <li><router-link to="/datatable/gridlines">GridLines</router-link></li>
+                                    <li><router-link to="/datatable/striped">Striped</router-link></li>
                                     <li><router-link to="/datatable/colgroup">ColGroup</router-link></li>
                                     <li><router-link to="/datatable/paginator">Paginator</router-link></li>
                                     <li><router-link to="/datatable/sort">Sort</router-link></li>
diff --git a/src/router.js b/src/router.js
index 331e400b1..206b16c5b 100755
--- a/src/router.js
+++ b/src/router.js
@@ -265,6 +265,16 @@ export default new Router({
 			path: '/datatable/contextmenu',
 			name: 'datatablecontextmenu',
 			component: () => import('./views/datatable/DataTableContextMenuDemo.vue')
+        },
+        {
+			path: '/datatable/gridlines',
+			name: 'datatablegridlines',
+			component: () => import('./views/datatable/DataTableGridLinesDemo.vue')
+        },
+        {
+			path: '/datatable/striped',
+			name: 'datatablestriped',
+			component: () => import('./views/datatable/DataTableStripedDemo.vue')
         },
 		{
 			path: '/dataview',
diff --git a/src/views/datatable/DataTableGridLinesDemo.vue b/src/views/datatable/DataTableGridLinesDemo.vue
new file mode 100644
index 000000000..481669690
--- /dev/null
+++ b/src/views/datatable/DataTableGridLinesDemo.vue
@@ -0,0 +1,79 @@
+<template>
+	<div>
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable <span>GridLines</span></h1>
+				<p>Adding <i>p-datatable-gridlines</i> displays borders between cells. Note: Some themes may always displays gridlines by design.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<DataTable :value="cars" class="p-datatable-gridlines">
+                <template #header>
+                    Header
+                </template>
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+                <template #footer>
+                    Footer
+                </template>
+            </DataTable>
+		</div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableStripedDemo.vue b/src/views/datatable/DataTableStripedDemo.vue
new file mode 100644
index 000000000..1dfd6cd4b
--- /dev/null
+++ b/src/views/datatable/DataTableStripedDemo.vue
@@ -0,0 +1,79 @@
+<template>
+	<div>
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable <span>Striped Rows</span></h1>
+				<p>Adding <i>p-datatable-striped</i> displays striped rows.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<DataTable :value="cars" class="p-datatable-striped">
+                <template #header>
+                    Header
+                </template>
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+                <template #footer>
+                    Footer
+                </template>
+            </DataTable>
+		</div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    }
+}
+</script>
\ No newline at end of file