fix(gui): highlight required column if value is null/undefined

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/Grid.vue

@@ -18,6 +18,7 @@ import {
   createEventHook,
   extractPkFromRow,
   inject,
+  isColumnRequiredAndNull,
   message,
   onClickOutside,
   onMounted,
@@ -478,9 +479,10 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
                     :key="columnObj.id"
                     class="cell relative cursor-pointer nc-grid-cell"
                     :class="{
-                      active:
+                      'active':
                         (isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex) ||
                         (isUIAllowed('xcDatatableEditable') && selectedRange(rowIndex, colIndex)),
+                      'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                     }"
                     :data-key="rowIndex + columnObj.id"
                     :data-col="columnObj.id"
@@ -707,4 +709,8 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
 tbody tr:hover {
   @apply bg-gray-100 bg-opacity-50;
 }
+
+.nc-required-cell {
+  box-shadow: inset 0 0 2px #f00;
+}
 </style>