web: Add placeholder text

web/src/components/Common/Forms/DataTable.tsx

@@ -372,7 +372,7 @@ interface DataTableProps {
 
 function computeTableHeight(data: any[]): string {
   const numRows = data.length;
-  const height = 70 + Math.min(numRows, 15) * 28;
+  const height = 70 + Math.max(Math.min(numRows, 15), 1) * 28;
   return `${height}px`;
 }
 
@@ -425,6 +425,7 @@ const DataTable = (props: DataTableProps) => {
         columns: columns,
         height: height,
         index: "Name",
+        placeholder: "No data",
       });
       tableRef.current.on("tableBuilt", () => {
         setTableBuilt(true);

web/src/components/Common/Forms/Tables.css

@@ -82,4 +82,15 @@
 
 .tabulator-col-group-cols {
   font-size: 12px;
+}
+
+.tabulator-placeholder {
+    width: 100px !important;
+}
+
+
+.tabulator-placeholder * {
+    font-weight: normal !important;
+    font-size: 14px !important;
+    color: var(--contrast-60) !important;
 }