feat: show function output column in data view

client/src/components/grid/Grid.tsx

@@ -32,6 +32,7 @@ import type { AttuGridType } from './Types';
  * @param handlesort how to sort table, if it's undefined, then you can not sort table
  * @param order 'desc' | 'asc'. sort direction
  * @param order order by which table field
+ * @param addSpacerColumn control spacer column display. default is false
  * @returns
  */
 const AttuGrid: FC<AttuGridType> = props => {
@@ -44,8 +45,8 @@ const AttuGrid: FC<AttuGridType> = props => {
   const {
     rowCount = 20,
     rowsPerPage = 10,
-    tableHeaderHeight = 43.5,
-    rowHeight = 41,
+    tableHeaderHeight = 44,
+    rowHeight = 42,
     pagerHeight = 52,
     primaryKey = 'id',
     showToolbar = false,
@@ -79,6 +80,7 @@ const AttuGrid: FC<AttuGridType> = props => {
     hideOnDisable,
     rowDecorator = () => ({}),
     sx = {},
+    addSpacerColumn = false,
   } = props;
 
   const _isSelected = (row: { [x: string]: any }) => {
@@ -131,7 +133,7 @@ const AttuGrid: FC<AttuGridType> = props => {
         containerHeight -
         tableHeaderHeight -
         (showPagination ? pagerHeight : 0) -
-        (hasToolbar ? 47 : 0);
+        (hasToolbar ? 42 : 0);
 
       const rowCount = Math.floor(totalHeight / rowHeight);
 
@@ -226,6 +228,7 @@ const AttuGrid: FC<AttuGridType> = props => {
           orderBy={orderBy}
           rowHeight={rowHeight}
           rowDecorator={rowDecorator}
+          addSpacerColumn={addSpacerColumn}
         ></Table>
         {rowCount && showPagination ? (
           <TablePagination

client/src/components/grid/Table.tsx

@@ -16,6 +16,26 @@ import CopyButton from '../advancedSearch/CopyButton';
 import type { Theme } from '@mui/material/styles';
 import type { TableType } from './Types';
 
+/**
+ * Enhanced Table Component
+ *
+ * Usage example with spacer column:
+ * <AttuGrid
+ *   colDefinitions={[
+ *     { id: 'name', label: 'Name', disablePadding: false },
+ *     { id: 'age', label: 'Age', disablePadding: false }
+ *   ]}
+ *   addSpacerColumn={true} // This will add a spacer column that absorbs remaining space
+ *   // ... other props
+ * />
+ *
+ * The spacer column will:
+ * - Have width: 'auto' and minWidth: 'auto'
+ * - Display no content
+ * - Naturally absorb remaining horizontal space without forcing table width
+ * - Prevent unnecessary horizontal scrollbars
+ */
+
 const EnhancedTable: FC<TableType> = props => {
   let {
     selected,
@@ -44,10 +64,30 @@ const EnhancedTable: FC<TableType> = props => {
     orderBy,
     rowDecorator = () => ({}),
     rowHeight,
+    // whether to add a spacer column to control space distribution
+    addSpacerColumn = false,
   } = props;
 
   const hasData = rows && rows.length > 0;
 
+  // Add spacer column definition if needed
+  const finalColDefinitions = addSpacerColumn
+    ? [
+        ...colDefinitions,
+        {
+          id: '__spacer__',
+          align: 'left' as const,
+          disablePadding: false,
+          label: '',
+          getStyle: () => ({
+            width: '66.7%',
+            minWidth: 'auto',
+          }),
+          formatter: () => null,
+        },
+      ]
+    : colDefinitions;
+
   return (
     <TableContainer
       sx={theme => ({
@@ -70,7 +110,7 @@ const EnhancedTable: FC<TableType> = props => {
         >
           {!headEditable ? (
             <EnhancedTableHead
-              colDefinitions={colDefinitions}
+              colDefinitions={finalColDefinitions}
               numSelected={selected.length}
               order={order}
               orderBy={orderBy}
@@ -144,12 +184,30 @@ const EnhancedTable: FC<TableType> = props => {
                         </TableCell>
                       )}
 
-                      {colDefinitions.map((colDef, i) => {
+                      {finalColDefinitions.map((colDef, i) => {
                         const { actionBarConfigs = [], needCopy = false } =
                           colDef;
                         const cellStyleFromDef = colDef.getStyle
                           ? colDef.getStyle(row[colDef.id])
                           : {};
+
+                        // Skip rendering for spacer column
+                        if (colDef.id === '__spacer__') {
+                          return (
+                            <TableCell
+                              key={colDef.id}
+                              sx={[
+                                (theme: Theme) => ({
+                                  borderBottom: `1px solid ${theme.palette.divider}`,
+                                }),
+                                cellStyleFromDef,
+                              ]}
+                            >
+                              {/* Empty content for spacer column */}
+                            </TableCell>
+                          );
+                        }
+
                         return colDef.showActionCell ? (
                           <TableCell
                             sx={
@@ -323,8 +381,8 @@ const EnhancedTable: FC<TableType> = props => {
                     })}
                     colSpan={
                       openCheckBox
-                        ? colDefinitions.length + 1
-                        : colDefinitions.length
+                        ? finalColDefinitions.length + 1
+                        : finalColDefinitions.length
                     }
                   >
                     {noData}
@@ -344,8 +402,8 @@ const EnhancedTable: FC<TableType> = props => {
                   })}
                   colSpan={
                     openCheckBox
-                      ? colDefinitions.length + 1
-                      : colDefinitions.length
+                      ? finalColDefinitions.length + 1
+                      : finalColDefinitions.length
                   }
                 >
                   <LoadingTable />

client/src/components/grid/Types.ts

@@ -99,6 +99,8 @@ export type TableType = {
   order?: SortDirection;
   orderBy?: string;
   ref?: Ref<HTMLDivElement>;
+  // whether to add a spacer column to control space distribution
+  addSpacerColumn?: boolean;
 };
 
 export type ColDefinitionsType = {
@@ -159,6 +161,8 @@ export type AttuGridType = ToolBarType & {
   pagerHeight?: number;
   rowDecorator?: (row: any) => SxProps<Theme> | React.CSSProperties;
   sx?: SxProps<Theme>;
+  // whether to add a spacer column to control space distribution
+  addSpacerColumn?: boolean;
 };
 
 export type ActionBarType = {

client/src/hooks/Query.ts

@@ -59,23 +59,24 @@ export const useQuery = (params: {
   };
 
   // query function
-  const query = async (
-    page: number = currentPage,
-    consistency_level = queryState.consistencyLevel,
-    _outputFields = queryState.outputFields,
-    expr = queryState.expr
-  ) => {
+  const query = async (page: number = currentPage, queryState: QueryState) => {
     if (!collection || !collection.loaded) return;
-    const _expr = getPageExpr(page, expr);
+    const _expr = getPageExpr(page, queryState.expr);
 
     onQueryStart(_expr);
 
+    // each queryState.outputFields can not be a function output
+    const outputFields = queryState.outputFields.filter(
+      f =>
+        !collection.schema.fields.find(ff => ff.name === f)?.is_function_output
+    );
+
     try {
       const queryParams = {
         expr: _expr,
-        output_fields: _outputFields,
+        output_fields: outputFields,
         limit: pageSize || 10,
-        consistency_level,
+        consistency_level: queryState.consistencyLevel,
         // travel_timestamp: timeTravelInfo.timestamp,
       };
 
@@ -111,7 +112,7 @@ export const useQuery = (params: {
 
       onQueryEnd?.(res);
     } catch (e: any) {
-      reset();
+      reset(true);
     } finally {
       onQueryFinally?.();
     }
@@ -142,9 +143,11 @@ export const useQuery = (params: {
   };
 
   // reset
-  const reset = () => {
+  const reset = (clearData = false) => {
     setCurrentPage(0);
-    setQueryResult({ data: [], latency: 0 });
+    if (clearData) {
+      setQueryResult({ data: [], latency: 0 });
+    }
 
     pageCache.current.clear();
   };
@@ -166,12 +169,7 @@ export const useQuery = (params: {
     count(queryState.consistencyLevel, queryState.expr);
 
     // Then fetch actual data
-    query(
-      currentPage,
-      queryState.consistencyLevel,
-      queryState.outputFields,
-      queryState.expr
-    );
+    query(currentPage, queryState);
   }, [
     pageSize,
     queryState.outputFields,
@@ -181,6 +179,19 @@ export const useQuery = (params: {
     queryState.tick,
   ]);
 
+  // Reset state when collection changes
+  useEffect(() => {
+    // Immediately reset when collection changes to avoid showing stale data
+    setQueryResult({ data: [], latency: 0 });
+    setCurrentPage(0);
+    pageCache.current.clear();
+
+    // Set total to collection row count as fallback
+    if (collection) {
+      setTotal(collection.rowCount || 0);
+    }
+  }, [collection.collection_name]);
+
   return {
     // total query count
     total,

client/src/pages/databases/Databases.tsx

@@ -227,9 +227,7 @@ const Databases = () => {
       // if query state not found, and the schema is ready, create new query state
       if (!query && c.schema) {
         setQueryState(prevState => {
-          const fields = [...c.schema.fields].filter(
-            f => !f.is_function_output
-          );
+          const fields = c.schema.fields;
           return [
             ...prevState,
             {

client/src/pages/databases/collections/Collections.tsx

@@ -468,8 +468,8 @@ const Collections = () => {
           page={currentPage}
           onPageChange={handlePageChange}
           rowsPerPage={pageSize}
-          tableHeaderHeight={46}
-          rowHeight={41}
+          tableHeaderHeight={44}
+          rowHeight={42}
           setRowsPerPage={handlePageSize}
           isLoading={loading}
           handleSort={handleGridSort}