column list in database widget

packages/web/src/appobj/AppObjectList.js

@@ -37,6 +37,7 @@ function AppObjectListItem({
   isExpandable,
   SubItems,
   getCommonProps,
+  expandOnClick,
 }) {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
@@ -51,12 +52,22 @@ function AppObjectListItem({
   let commonProps = {
     prefix: SubItems ? (
       <ExpandIconHolder2>
-        {expandable ? <ExpandIcon isExpanded={isExpanded} /> : <ExpandIcon isBlank />}
+        {expandable ? (
+          <ExpandIcon
+            isExpanded={isExpanded}
+            onClick={e => {
+              setIsExpanded(v => !v);
+              e.stopPropagation();
+            }}
+          />
+        ) : (
+          <ExpandIcon isBlank />
+        )}
       </ExpandIconHolder2>
     ) : null,
   };
 
-  if (SubItems) {
+  if (SubItems && expandOnClick) {
     commonProps.onClick2 = () => setIsExpanded(v => !v);
   }
   if (onObjectClick) {
@@ -107,6 +118,7 @@ export function AppObjectList({
   groupOrdered = undefined,
   isExpandable = undefined,
   getCommonProps = undefined,
+  expandOnClick = false,
 }) {
   const createComponent = data => (
     <AppObjectListItem
@@ -118,6 +130,7 @@ export function AppObjectList({
       SubItems={SubItems}
       isExpandable={isExpandable}
       getCommonProps={getCommonProps}
+      expandOnClick={expandOnClick}
     />
   );
 

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -12,6 +12,7 @@ import { findEngineDriver } from 'dbgate-tools';
 import useExtensions from '../utility/useExtensions';
 import useOpenNewTab from '../utility/useOpenNewTab';
 import uuidv1 from 'uuid/v1';
+import { AppObjectList } from './AppObjectList';
 
 const icons = {
   tables: 'img table',

packages/web/src/appobj/SubColumnParamList.js

@@ -0,0 +1,33 @@
+import { findForeignKeyForColumn } from 'dbgate-tools';
+import React from 'react';
+import { getColumnIcon } from '../datagrid/ColumnLabel';
+import { AppObjectCore } from './AppObjectCore';
+import { AppObjectList } from './AppObjectList';
+
+function ColumnAppObject({ data, commonProps }) {
+  const { columnName, dataType } = data;
+  return (
+    <AppObjectCore
+      {...commonProps}
+      data={data}
+      title={columnName}
+      extInfo={dataType}
+      icon={getColumnIcon(data, true)}
+    />
+  );
+}
+ColumnAppObject.extractKey = ({ columnName }) => columnName;
+
+export default function SubColumnParamList({ data }) {
+  const { columns } = data;
+
+  return (
+    <AppObjectList
+      list={(columns || []).map(col => ({
+        ...col,
+        foreignKey: findForeignKeyForColumn(data, col),
+      }))}
+      AppObjectComponent={ColumnAppObject}
+    />
+  );
+}