Merge branch 'sticky_footer'

Author: RafaelGB

package.json

@@ -25,7 +25,7 @@
 		"@types/jest": "28.1.6",
 		"@testing-library/jest-dom": "5.16.4",
     	"@testing-library/react": "13.3.0",
-		"@types/node": "18.0.6",
+		"@types/node": "18.6.1",
 		"@types/react": "18.0.15",
 		"@types/react-dom": "18.0.6",
 		"@types/react-color": "3.0.6",
@@ -50,7 +50,7 @@
 	},
 	"dependencies": {
 		"@emotion/styled": "11.9.3",
-		"@mui/material": "5.9.1",
+		"@mui/material": "5.9.2",
 		"@mui/icons-material": "5.8.4",
 		"@popperjs/core": "2.11.5",
 		"immutability-helper": "3.1.1",
@@ -63,7 +63,7 @@
 		"react-dom": "18.2.0",
 		"react-csv": "2.2.2",
 		"react-popper": "2.3.0",
-		"@tanstack/react-table": "8.3.3",
+		"@tanstack/react-table": "8.3.6",
 		"@tanstack/match-sorter-utils": "8.1.1",
 		"react-select": "5.4.0",
 		"react-color": "2.19.3",

src/components/Table.tsx

@@ -250,14 +250,18 @@ export function Table(tableData: TableDataType) {
   const [rowTemplateState, setRowTemplateState] = React.useState(
     view.diskConfig.yaml.config.current_row_template
   );
-  const rowTemplatesOptions = get_tfiles_from_folder(
-    view.diskConfig.yaml.config.row_templates_folder
-  ).map((tfile) => {
-    return {
-      value: tfile.path,
-      label: tfile.path,
-    };
-  });
+  const rowTemplatesOptions = React.useMemo(
+    () =>
+      get_tfiles_from_folder(
+        view.diskConfig.yaml.config.row_templates_folder
+      ).map((tfile) => {
+        return {
+          value: tfile.path,
+          label: tfile.path,
+        };
+      }),
+    []
+  );
 
   function handleChangeRowTemplate(
     newValue: OnChangeValue<RowTemplateOption, false>,
@@ -443,10 +447,11 @@ export function Table(tableData: TableDataType) {
             isClearable={true}
             isMulti={false}
             onChange={handleChangeRowTemplate}
-            defaultValue={{ label: "Choose a Template", value: "None" }}
+            placeholder={<div>Without template. Select one to use...</div>}
             menuPortalTarget={document.body}
             menuShouldBlockScroll={true}
             isSearchable
+            menuPlacement="top"
           />
         </div>
         {/* ENDS NEW ROW */}

src/components/styles/RowTemplateStyles.ts

@@ -9,6 +9,14 @@ const CustomTemplateSelectorStyles: StylesConfig<any, true, GroupBase<any>> = {
             width: 'auto',
         }
     },
+    placeholder: (styles) => {
+        return {
+            ...styles,
+            fontSize: '12px',
+            textAlign: 'left',
+            minWidth: '17rem',
+        }
+    }
 }
 
 export default CustomTemplateSelectorStyles;

styles.css

@@ -286,20 +286,23 @@ div.database-plugin__checkbox {
   align-items: center;
   font-size: 0.875rem;
   cursor: pointer;
+  position: sticky;
+  bottom: 0;
+  background-color: var(--background-primary);
 }
 
-.database-plugin__add-row:hover {
+.database-plugin__add-row .svg-icon:hover {
   background-color: var(--background-secondary);
   color: var(--text-accent-hover);
+  padding: 0.3rem;
 }
 
 .database-plugin__add-row .database-plugin__td {
   border: none;
   background-color: transparent;
   color: var(--text-muted);
-  flex-direction: row;
-  align-items: center;
-  display: inline-grid;
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 .database-plugin__th {