Toggle datatypes visibility (#366)

* showDatatype setting added in view control panel

* removed shortcut

can be discussed later

* fixed linting issue and made sure the condition check is above div element

in table.jsx code
in the else part im directly returning the element by keeping a check  for settings.showDataTypes?
which helps to not add empty element

for setSetting issue
I used the similar code used just above the snippet and modified it

src/components/EditorCanvas/Table.jsx

@@ -354,7 +354,7 @@ export default function Table(props) {
               icon={<IconMinus />}
               onClick={() => deleteField(fieldData, tableData.id)}
             />
-          ) : (
+          ) : settings.showDataTypes ? (
             <div className="flex gap-1 items-center">
               {fieldData.primary && <IconKeyStroked />}
               {!fieldData.notNull && <span>?</span>}
@@ -362,13 +362,14 @@ export default function Table(props) {
                 {fieldData.type +
                   ((dbToTypes[database][fieldData.type].isSized ||
                     dbToTypes[database][fieldData.type].hasPrecision) &&
-                  fieldData.size &&
-                  fieldData.size !== ""
-                    ? "(" + fieldData.size + ")"
+                    fieldData.size &&
+                    fieldData.size !== ""
+                    ? `(${fieldData.size})`
                     : "")}
               </span>
             </div>
-          )}
+          ) : null
+          }
         </div>
       </div>
     );