- added Table field;

src/assets/scss/components/appForm.scss

@@ -45,6 +45,20 @@
   input[disabled], div.p-disabled:not(.p-inputswitch) {
     background-color: #e3e3e3;
   }
+
+  &.table {
+    div.addNewTableRow {
+      width: 100%;
+      text-align: center;
+      padding: 5px 0;
+      background: var(--table-border-color);
+      color: var(--primary-text);
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .appForm__fieldItem {

src/assets/scss/components/formBuilder.scss

@@ -61,7 +61,7 @@
 
   .label {
     p {
-      margin-bottom: 10px;
+      margin-bottom: 0;
 
       &.ql-indent-1 {
         padding-left: 3em;
@@ -179,4 +179,13 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+}
+
+.formElementSettings__repeaterItem {
+
+}
+
+.formElementSettings__subRepeater {
+  padding: 10px 20px;
+  background-color: #f9f9f9;
 }

src/assets/scss/components/layout.scss

@@ -24,6 +24,7 @@ body {
   flex-direction: column;
   flex-grow: 1;
 }
+
 .inner {
   display: flex;
   height: 100%;
@@ -102,4 +103,48 @@ body {
       }
     }
   }
+}
+
+:where(table) {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-indent: 0;
+  border-right: 1px solid var(--table-border-color);
+}
+
+td,
+th {
+  padding: 10px;
+  border-top: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
+  border-left: 1px solid var(--table-border-color);
+  background-color: white;
+  color: var(--global-textColor);
+  font-size: 15px;
+  text-align: left;
+  text-align: start;
+}
+
+th {
+  padding: 15px 10px;
+  font-weight: bold;
+}
+
+td {
+  input {
+    width: 100%;
+    padding: 3px 5px;
+  }
+}
+
+tfoot td,
+tfoot th {
+  border-top: 1px solid var(--table-border-color);
+  border-bottom: 0
+}
+
+table.striped tbody tr:nth-child(odd) td,
+table.striped tbody tr:nth-child(odd) th {
+  background-color: var(--table-border-color)
 }

src/assets/scss/components/misc.scss

@@ -106,6 +106,16 @@
   background-color: rgba(255,255,255,0.3)
 }
 
+.p-inputgroup {
+  align-items: center;
+}
+
+.flex-1 {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
 .mb-2 {
   margin-bottom: 4px;
 }

src/assets/scss/theme.scss

@@ -15,9 +15,10 @@
   --global-textColor: #4B5563;
   --theme-highlight-background: #BADEBE;
   --primary-text: #3B7C43;
+  --table-border-color: #B7B7B7B2;
   --message-error-background: #ffdbdb;
   --message-error-color: #C2504D;
-  --message-info-background: rgba(219, 234, 254, 0.70);
+  --message-info-background: rgba(183, 183, 183, 0.7);
   --message-info-color: #3B82F6;
 
   --card-full-background-color-2: #EEC137;