@budibase/frontend-core 3.23.38 → 3.23.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.23.38",
+  "version": "3.23.48",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -12,11 +12,11 @@
     "@budibase/bbui": "*",
     "@budibase/shared-core": "*",
     "@budibase/types": "*",
-    "ai": "^5.0.93",
+    "ai": "^6.0.3",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "83fecbd6e6b9e5f5d26369ce51d2173801925e3a"
+  "gitHead": "0a78faa2adbb8fb3b81de2b9b00352e60178f12f"
 }

package/src/api/agents.ts

@@ -1,136 +1,23 @@
 import {
-  AgentChat,
-  AgentToolSource,
-  AgentToolSourceWithTools,
-  ChatAgentRequest,
   CreateAgentRequest,
   CreateAgentResponse,
-  CreateToolSourceRequest,
-  FetchAgentHistoryResponse,
   FetchAgentsResponse,
-  Tool,
+  ToolMetadata,
   UpdateAgentRequest,
   UpdateAgentResponse,
 } from "@budibase/types"
 
-import { Header } from "@budibase/shared-core"
 import { BaseAPIClient } from "./types"
-import { readUIMessageStream, UIMessage, UIMessageChunk } from "ai"
-import { createSseToJsonTransformStream } from "../utils/utils"
 
 export interface AgentEndpoints {
-  agentChatStream: (
-    chat: AgentChat,
-    workspaceId: string
-  ) => Promise<AsyncIterable<UIMessage>>
-
-  removeChat: (chatId: string) => Promise<void>
-  fetchChats: (agentId: string) => Promise<FetchAgentHistoryResponse>
-
-  fetchToolSources: (agentId: string) => Promise<AgentToolSourceWithTools[]>
-  fetchAvailableTools: (toolSourceType: string) => Promise<Tool[]>
-  createToolSource: (
-    toolSource: CreateToolSourceRequest
-  ) => Promise<{ created: true }>
-  updateToolSource: (toolSource: AgentToolSource) => Promise<AgentToolSource>
-  deleteToolSource: (toolSourceId: string) => Promise<{ deleted: true }>
+  fetchTools: () => Promise<ToolMetadata[]>
   fetchAgents: () => Promise<FetchAgentsResponse>
   createAgent: (agent: CreateAgentRequest) => Promise<CreateAgentResponse>
   updateAgent: (agent: UpdateAgentRequest) => Promise<UpdateAgentResponse>
   deleteAgent: (agentId: string) => Promise<{ deleted: true }>
 }
 
-const throwOnErrorChunk = () =>
-  new TransformStream<UIMessageChunk, UIMessageChunk>({
-    transform(chunk, controller) {
-      if (chunk.type === "error") {
-        throw new Error(chunk.errorText || "Agent action failed")
-      }
-      controller.enqueue(chunk)
-    },
-  })
-
 export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
-  agentChatStream: async (chat, workspaceId) => {
-    const body: ChatAgentRequest = chat
-
-    const response = await fetch("/api/agent/chat/stream", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        [Header.APP_ID]: workspaceId,
-      },
-      body: JSON.stringify(body),
-      credentials: "same-origin",
-    })
-
-    if (!response.ok) {
-      const errorBody = await response.json()
-      throw new Error(
-        errorBody.message || `HTTP error! status: ${response.status}`
-      )
-    }
-
-    if (!response.body) {
-      throw new Error("Failed to get response body")
-    }
-
-    const chunkStream = response.body
-      .pipeThrough(new TextDecoderStream())
-      .pipeThrough(createSseToJsonTransformStream<UIMessageChunk>())
-      .pipeThrough(throwOnErrorChunk())
-
-    return readUIMessageStream({
-      stream: chunkStream,
-      terminateOnError: true,
-    })
-  },
-
-  removeChat: async (chatId: string) => {
-    return await API.delete({
-      url: `/api/agent/chats/${chatId}`,
-    })
-  },
-
-  fetchChats: async (agentId: string) => {
-    return await API.get({
-      url: `/api/agent/${agentId}/chats`,
-    })
-  },
-
-  fetchToolSources: async (agentId: string) => {
-    return await API.get({
-      url: `/api/agent/${agentId}/toolsource`,
-    })
-  },
-
-  fetchAvailableTools: async (toolSourceType: string) => {
-    return await API.get({
-      url: `/api/agent/toolsource/${toolSourceType}/tools`,
-    })
-  },
-
-  createToolSource: async (toolSource: CreateToolSourceRequest) => {
-    return await API.post({
-      url: "/api/agent/toolsource",
-      body: toolSource as any,
-    })
-  },
-
-  updateToolSource: async (toolSource: AgentToolSource) => {
-    return await API.put({
-      url: "/api/agent/toolsource",
-      body: toolSource as any,
-    })
-  },
-
-  deleteToolSource: async (toolSourceId: string) => {
-    return await API.delete({
-      url: `/api/agent/toolsource/${toolSourceId}`,
-    })
-  },
-
   fetchAgents: async () => {
     return await API.get({
       url: "/api/agent",
@@ -156,4 +43,10 @@ export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
       url: `/api/agent/${agentId}`,
     })
   },
+
+  fetchTools: async () => {
+    return await API.get({
+      url: `/api/agent/tools`,
+    })
+  },
 })

package/src/api/automations.ts

@@ -10,6 +10,7 @@ import {
   SearchAutomationLogsResponse,
   TestAutomationRequest,
   TestAutomationResponse,
+  TestProgressState,
   TriggerAutomationRequest,
   TriggerAutomationResponse,
   UpdateAutomationRequest,
@@ -40,8 +41,10 @@ export interface AutomationEndpoints {
   ) => Promise<TriggerAutomationResponse>
   testAutomation: (
     automationdId: string,
-    data: TestAutomationRequest
+    data: TestAutomationRequest,
+    options?: { async?: boolean }
   ) => Promise<TestAutomationResponse>
+  getAutomationTestStatus: (automationId: string) => Promise<TestProgressState>
   getAutomationDefinitions: () => Promise<GetAutomationStepDefinitionsResponse>
   getAutomationLogs: (
     options: SearchAutomationLogsRequest
@@ -69,13 +72,25 @@ export const buildAutomationEndpoints = (
    * @param automationId the ID of the automation to test
    * @param data the test data to run against the automation
    */
-  testAutomation: async (automationId, data) => {
+  testAutomation: async (automationId, data, options = {}) => {
+    const params = new URLSearchParams()
+    if (options.async) {
+      params.set("async", "true")
+    }
+    const qs = params.toString()
+    const url = `/api/automations/${automationId}/test${qs ? `?${qs}` : ""}`
     return await API.post({
-      url: `/api/automations/${automationId}/test`,
+      url,
       body: data,
     })
   },
 
+  getAutomationTestStatus: async automationId => {
+    return await API.get({
+      url: `/api/automations/${automationId}/test/status`,
+    })
+  },
+
   /**
    * Gets a list of all automations.
    */

package/src/api/chatApps.ts

@@ -0,0 +1,190 @@
+import {
+  ChatAgentRequest,
+  ChatConversation,
+  ChatConversationRequest,
+  CreateChatConversationRequest,
+  ChatApp,
+  FetchAgentHistoryResponse,
+  UpdateChatAppRequest,
+} from "@budibase/types"
+import { Header } from "@budibase/shared-core"
+import { BaseAPIClient } from "./types"
+import { readUIMessageStream, UIMessage, UIMessageChunk } from "ai"
+import { createSseToJsonTransformStream } from "../utils/utils"
+
+export interface ChatAppEndpoints {
+  streamChatConversation: (
+    chat: ChatConversationRequest,
+    workspaceId: string
+  ) => Promise<AsyncIterable<UIMessage>>
+  deleteChatConversation: (
+    chatConversationId: string,
+    chatAppId: string
+  ) => Promise<void>
+  fetchChatConversation: (
+    chatAppId: string,
+    chatConversationId: string
+  ) => Promise<ChatConversation>
+  fetchChatHistory: (chatAppId: string) => Promise<FetchAgentHistoryResponse>
+  fetchChatApp: (workspaceId?: string) => Promise<ChatApp | null>
+  setChatAppAgent: (chatAppId: string, agentId: string) => Promise<ChatApp>
+  createChatConversation: (
+    chat: CreateChatConversationRequest,
+    workspaceId?: string
+  ) => Promise<ChatConversation>
+  updateChatApp: (chatApp: UpdateChatAppRequest) => Promise<ChatApp>
+}
+
+const throwOnErrorChunk = () =>
+  new TransformStream<UIMessageChunk, UIMessageChunk>({
+    transform(chunk, controller) {
+      if (chunk.type === "error") {
+        throw new Error(chunk.errorText || "Agent action failed")
+      }
+      controller.enqueue(chunk)
+    },
+  })
+
+export const buildChatAppEndpoints = (
+  API: BaseAPIClient
+): ChatAppEndpoints => ({
+  streamChatConversation: async (chat, workspaceId) => {
+    if (!chat.chatAppId) {
+      throw new Error("chatAppId is required to stream a chat conversation")
+    }
+
+    const body: ChatAgentRequest = chat
+    const conversationId = chat._id || "new"
+
+    const response = await fetch(
+      `/api/chatapps/${chat.chatAppId}/conversations/${conversationId}/stream`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          [Header.APP_ID]: workspaceId,
+        },
+        body: JSON.stringify(body),
+        credentials: "same-origin",
+      }
+    )
+
+    if (!response.ok) {
+      const errorBody = await response.json()
+      throw new Error(
+        errorBody.message || `HTTP error! status: ${response.status}`
+      )
+    }
+
+    if (!response.body) {
+      throw new Error("Failed to get response body")
+    }
+
+    const chunkStream = response.body
+      .pipeThrough(new TextDecoderStream())
+      .pipeThrough(createSseToJsonTransformStream<UIMessageChunk>())
+      .pipeThrough(throwOnErrorChunk())
+
+    return readUIMessageStream({
+      stream: chunkStream,
+      terminateOnError: true,
+    })
+  },
+
+  deleteChatConversation: async (
+    chatConversationId: string,
+    chatAppId: string
+  ) => {
+    return await API.delete({
+      url: `/api/chatapps/${chatAppId}/conversations/${chatConversationId}`,
+    })
+  },
+
+  fetchChatConversation: async (
+    chatAppId: string,
+    chatConversationId: string
+  ) => {
+    return await API.get({
+      url: `/api/chatapps/${chatAppId}/conversations/${chatConversationId}`,
+    })
+  },
+
+  fetchChatHistory: async (chatAppId: string) => {
+    return await API.get({
+      url: `/api/chatapps/${chatAppId}/conversations`,
+    })
+  },
+
+  fetchChatApp: async (workspaceId?: string) => {
+    const url = "/api/chatapps"
+    const headers = workspaceId
+      ? {
+          [Header.APP_ID]: workspaceId,
+        }
+      : undefined
+    return await API.get({
+      url,
+      ...(headers && { headers }),
+    })
+  },
+
+  setChatAppAgent: async (chatAppId: string, agentId: string) => {
+    if (!chatAppId) {
+      throw new Error("chatAppId is required to set chat app agent")
+    }
+    if (!agentId) {
+      throw new Error("agentId is required to set chat app agent")
+    }
+    return await API.post({
+      url: `/api/chatapps/${chatAppId}/agent`,
+      body: { agentId } as any,
+    })
+  },
+
+  createChatConversation: async (
+    chat: CreateChatConversationRequest,
+    workspaceId?: string
+  ) => {
+    const resolvedWorkspaceId = workspaceId || API.getAppID()
+    const { chatAppId } = chat
+    if (!chatAppId) {
+      throw new Error("chatAppId is required to create a chat conversation")
+    }
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    }
+
+    if (resolvedWorkspaceId) {
+      headers[Header.APP_ID] = resolvedWorkspaceId
+    }
+
+    const response = await fetch(`/api/chatapps/${chatAppId}/conversations`, {
+      method: "POST",
+      headers,
+      credentials: "same-origin",
+      body: JSON.stringify(chat),
+    })
+
+    if (!response.ok) {
+      const errorBody = await response.json().catch(() => null)
+      throw new Error(
+        errorBody?.message || `HTTP error! status: ${response.status}`
+      )
+    }
+
+    return (await response.json()) as ChatConversation
+  },
+
+  updateChatApp: async (chatApp: UpdateChatAppRequest) => {
+    if (!chatApp._id) {
+      throw new Error("chatAppId is required to update a chat app")
+    }
+    return await API.put({
+      url: `/api/chatapps/${chatApp._id}`,
+      body: chatApp as any,
+    })
+  },
+})

package/src/api/datasources.ts

@@ -7,6 +7,8 @@ import {
   DeleteDatasourceResponse,
   FetchDatasourceInfoRequest,
   FetchDatasourceInfoResponse,
+  FetchDatasourceRelationshipInfoRequest,
+  FetchDatasourceRelationshipInfoResponse,
   FetchDatasourceViewInfoRequest,
   FetchDatasourceViewInfoResponse,
   UpdateDatasourceRequest,
@@ -41,6 +43,9 @@ export interface DatasourceEndpoints {
   fetchViewInfoForDatasource: (
     datasource: Datasource
   ) => Promise<FetchDatasourceViewInfoResponse>
+  fetchRelationshipInfoForDatasource: (
+    datasource: Datasource
+  ) => Promise<FetchDatasourceRelationshipInfoResponse>
 }
 
 export const buildDatasourceEndpoints = (
@@ -134,4 +139,17 @@ export const buildDatasourceEndpoints = (
       body: { datasource },
     })
   },
+
+  /**
+   * Fetch relationship names available within the datasource
+   */
+  fetchRelationshipInfoForDatasource: async (datasource: Datasource) => {
+    return await API.post<
+      FetchDatasourceRelationshipInfoRequest,
+      FetchDatasourceRelationshipInfoResponse
+    >({
+      url: `/api/datasources/relationships`,
+      body: { datasource },
+    })
+  },
 })

package/src/api/index.ts

@@ -47,6 +47,7 @@ import { buildMigrationEndpoints } from "./migrations"
 import { buildRowActionEndpoints } from "./rowActions"
 import { buildOAuth2Endpoints } from "./oauth2"
 import { buildAgentEndpoints } from "./agents"
+import { buildChatAppEndpoints } from "./chatApps"
 import { buildFeatureFlagEndpoints } from "./features"
 import { buildNavigationEndpoints } from "./navigation"
 import { buildWorkspaceAppEndpoints } from "./workspaceApps"
@@ -313,6 +314,7 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
     ...buildLogsEndpoints(API),
     ...buildMigrationEndpoints(API),
     ...buildAgentEndpoints(API),
+    ...buildChatAppEndpoints(API),
     ...buildFeatureFlagEndpoints(API),
     deployment: buildDeploymentEndpoints(API),
     viewV2: buildViewV2Endpoints(API),

package/src/api/tables.ts

@@ -18,6 +18,8 @@ import {
   MigrateTableResponse,
   MigrateTableRequest,
   DeleteTableResponse,
+  PublishTableRequest,
+  PublishTableResponse,
 } from "@budibase/types"
 import { BaseAPIClient } from "./types"
 
@@ -52,6 +54,10 @@ export interface TableEndpoints {
     oldColumn: string,
     newColumn: string
   ) => Promise<MigrateTableResponse>
+  publishTable: (
+    tableId: string,
+    opts?: PublishTableRequest
+  ) => Promise<PublishTableResponse>
 }
 
 export const buildTableEndpoints = (API: BaseAPIClient): TableEndpoints => ({
@@ -191,6 +197,13 @@ export const buildTableEndpoints = (API: BaseAPIClient): TableEndpoints => ({
     })
   },
 
+  publishTable: async (tableId, opts) => {
+    return await API.post<PublishTableRequest, PublishTableResponse>({
+      url: `/api/tables/${tableId}/publish`,
+      body: opts,
+    })
+  },
+
   /**
    * Duplicates a table without its data.
    * @param tableId the ID of the table to duplicate

package/src/api/types.ts

@@ -35,6 +35,7 @@ import { UserEndpoints } from "./user"
 import { ViewEndpoints } from "./views"
 import { ViewV2Endpoints } from "./viewsV2"
 import { AgentEndpoints } from "./agents"
+import { ChatAppEndpoints } from "./chatApps"
 import { NavigationEndpoints } from "./navigation"
 import { WorkspaceAppEndpoints } from "./workspaceApps"
 import { ResourceEndpoints } from "./resource"
@@ -113,6 +114,7 @@ export type APIError = {
 export type APIClient = BaseAPIClient &
   AIEndpoints &
   AgentEndpoints &
+  ChatAppEndpoints &
   AnalyticsEndpoints &
   AppEndpoints &
   AttachmentEndpoints &

package/src/components/Chatbox/index.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { MarkdownViewer, notifications } from "@budibase/bbui"
-  import type { AgentChat } from "@budibase/types"
+  import type {
+    ChatConversation,
+    ChatConversationRequest,
+  } from "@budibase/types"
+  import { Header } from "@budibase/shared-core"
   import BBAI from "../../icons/BBAI.svelte"
   import { tick } from "svelte"
   import { onDestroy } from "svelte"
@@ -10,14 +14,21 @@
   import type { UIMessage } from "ai"
   import { v4 as uuidv4 } from "uuid"
 
-  export let API = createAPIClient()
-
   export let workspaceId: string
-  export let chat: AgentChat
+  export let API = createAPIClient({
+    attachHeaders: headers => {
+      if (workspaceId) {
+        headers[Header.APP_ID] = workspaceId
+      }
+    },
+  })
+  type ChatConversationLike = ChatConversation | ChatConversationRequest
+
+  export let chat: ChatConversationLike
   export let loading: boolean = false
 
   const dispatch = createEventDispatcher<{
-    chatSaved: { chatId?: string; chat: AgentChat }
+    chatSaved: { chatId?: string; chat: ChatConversationLike }
   }>()
 
   let inputValue = ""
@@ -25,12 +36,32 @@
   let observer: MutationObserver
   let textareaElement: HTMLTextAreaElement
   let lastFocusedChatId: string | undefined
-  let lastFocusedNewChat: AgentChat | undefined
+  let lastFocusedNewChat: ChatConversationLike | undefined
 
   $: if (chat?.messages?.length) {
     scrollToBottom()
   }
 
+  const ensureChatApp = async (): Promise<string | undefined> => {
+    if (chat?.chatAppId) {
+      return chat.chatAppId
+    }
+    try {
+      const chatApp = await API.fetchChatApp(workspaceId)
+      if (chatApp?._id) {
+        const baseChat = chat || { title: "", messages: [], chatAppId: "" }
+        chat = {
+          ...baseChat,
+          chatAppId: chatApp._id,
+        }
+        return chatApp._id
+      }
+    } catch (err) {
+      console.error(err)
+    }
+    return undefined
+  }
+
   async function scrollToBottom() {
     await tick()
     if (chatAreaElement) {
@@ -46,8 +77,41 @@
   }
 
   async function prompt() {
+    const resolvedChatAppId = await ensureChatApp()
+
     if (!chat) {
-      chat = { title: "", messages: [] }
+      chat = { title: "", messages: [], chatAppId: "" }
+    }
+
+    const chatAppId = chat.chatAppId || resolvedChatAppId
+
+    if (!chatAppId) {
+      notifications.error("Chat app could not be created")
+      return
+    }
+
+    if (!chat._id && (!chat.messages || chat.messages.length === 0)) {
+      try {
+        const newChat = await API.createChatConversation(
+          {
+            chatAppId,
+            title: chat.title,
+          },
+          workspaceId
+        )
+
+        chat = {
+          ...chat,
+          ...newChat,
+          chatAppId,
+        }
+      } catch (err: any) {
+        console.error(err)
+        notifications.error(
+          err?.message || "Could not start a new chat conversation"
+        )
+        return
+      }
     }
 
     const userMessage: UIMessage = {
@@ -56,8 +120,9 @@
       parts: [{ type: "text", text: inputValue }],
     }
 
-    const updatedChat: AgentChat = {
+    const updatedChat: ChatConversationLike = {
       ...chat,
+      chatAppId: chat.chatAppId,
       messages: [...chat.messages, userMessage],
     }
 
@@ -68,16 +133,41 @@
     loading = true
 
     try {
-      const messageStream = await API.agentChatStream(updatedChat, workspaceId)
+      const messageStream = await API.streamChatConversation(
+        updatedChat,
+        workspaceId
+      )
+
+      let streamedMessages: UIMessage[] = [...updatedChat.messages]
 
       for await (const message of messageStream) {
+        streamedMessages = [...streamedMessages, message]
         chat = {
           ...updatedChat,
-          messages: [...updatedChat.messages, message],
+          messages: streamedMessages,
         }
         scrollToBottom()
       }
 
+      // When a chat is created for the first time the server generates the ID.
+      // If we don't have it locally yet, retrieve the saved conversation so
+      // subsequent prompts append to the same document instead of creating a new one.
+      if (!chat._id && chat.chatAppId) {
+        try {
+          const history = await API.fetchChatHistory(chat.chatAppId)
+          const lastMessageId = chat.messages[chat.messages.length - 1]?.id
+          const savedConversation =
+            history?.find(convo =>
+              convo.messages.some(message => message.id === lastMessageId)
+            ) || history?.[0]
+          if (savedConversation) {
+            chat = savedConversation
+          }
+        } catch (historyError) {
+          console.error(historyError)
+        }
+      }
+
       loading = false
       dispatch("chatSaved", { chatId: chat._id, chat })
     } catch (err: any) {
@@ -93,6 +183,8 @@
   }
 
   onMount(async () => {
+    await ensureChatApp()
+
     // Ensure we always autoscroll to reveal new messages
     observer = new MutationObserver(async () => {
       await tick()

package/src/components/grid/cells/HeaderCell.svelte

@@ -6,7 +6,12 @@
   import { getColumnIcon } from "../../../utils/schema"
   import MigrationModal from "../controls/MigrationModal.svelte"
   import { debounce } from "../../../utils/utils"
-  import { FieldType, FormulaType, SortOrder } from "@budibase/types"
+  import {
+    FieldType,
+    FormulaType,
+    SortOrder,
+    isStaticFormula,
+  } from "@budibase/types"
   import { TableNames } from "../../../constants"
   import GridPopover from "../overlays/GridPopover.svelte"
 
@@ -73,7 +78,11 @@
         descending: "high-low",
       }
     }
-    switch (column?.schema?.type) {
+    let schemaType = column.schema?.type
+    if (isStaticFormula(column.schema)) {
+      schemaType = column.schema.responseType
+    }
+    switch (schemaType) {
       case FieldType.NUMBER:
       case FieldType.BIGINT:
         return {

package/src/components/grid/cells/TextCell.svelte

@@ -11,10 +11,19 @@
 
   let input
   let active = false
+  let isComposing = false
 
   $: editable = focused && !readonly
   $: displayValue = format?.(value) ?? value ?? ""
 
+  const handleCompositionStart = () => {
+    isComposing = true
+  }
+
+  const handleCompositionEnd = () => {
+    isComposing = false
+  }
+
   const handleChange = e => {
     onChange(e.target.value)
   }
@@ -23,6 +32,9 @@
     if (!active) {
       return false
     }
+    if (e.key === "Enter" && (isComposing || e.isComposing)) {
+      return true
+    }
     if (e.key === "Enter") {
       input?.blur()
       const event = new KeyboardEvent("keydown", { key: "ArrowDown" })
@@ -46,6 +58,8 @@
     bind:this={input}
     on:focus={() => (active = true)}
     on:blur={() => (active = false)}
+    on:compositionstart={handleCompositionStart}
+    on:compositionend={handleCompositionEnd}
     {type}
     value={value ?? ""}
     on:change={handleChange}

package/src/components/grid/overlays/KeyboardManager.svelte

@@ -46,6 +46,10 @@
       }
     }
 
+    if (e.key === "Enter" && e.isComposing) {
+      return
+    }
+
     // Sugar for preventing default
     const handle = fn => {
       e.preventDefault()

package/src/components/grid/stores/rows.ts

@@ -35,6 +35,7 @@ interface RowStore {
 interface RowDerivedStore {
   rows: RowStore["rows"]
   rowLookupMap: Readable<Record<string, IndexedUIRow>>
+  rowCount: Readable<number>
 }
 
 interface RowActionStore {
@@ -168,12 +169,15 @@ export const deriveStores = (context: StoreContext): RowDerivedStore => {
     return map
   })
 
+  const rowCount = derived(rows, $rows => $rows.length)
+
   return {
     rows: {
       ...rows,
       subscribe: enrichedRows.subscribe,
     },
     rowLookupMap,
+    rowCount,
   }
 }
 

package/src/fetch/DataFetch.ts

@@ -241,6 +241,7 @@ export default abstract class BaseDataFetch<
       if (
         fieldSchema?.type === FieldType.NUMBER ||
         fieldSchema?.type === FieldType.BIGINT ||
+        fieldSchema?.responseType === FieldType.NUMBER ||
         ("calculationType" in fieldSchema && fieldSchema?.calculationType)
       ) {
         this.options.sortType = SortType.NUMBER

package/src/utils/{table.js → table.ts}

@@ -1,6 +1,7 @@
 import * as sharedCore from "@budibase/shared-core"
+import { UIFieldSchema, isStaticFormula } from "@budibase/types"
 
-export function canBeDisplayColumn(column) {
+export function canBeDisplayColumn(column: UIFieldSchema) {
   if (!sharedCore.canBeDisplayColumn(column.type)) {
     return false
   }
@@ -11,16 +12,20 @@ export function canBeDisplayColumn(column) {
   return true
 }
 
-export function canBeSortColumn(column) {
+export function canBeSortColumn(columnSchema: UIFieldSchema) {
   // Allow sorting by calculation columns
-  if (column.calculationType) {
+  if (columnSchema.calculationType) {
     return true
   }
-  if (!sharedCore.canBeSortColumn(column.type)) {
+  // Allow static-only formula columns to be sorted
+  if (isStaticFormula(columnSchema)) {
+    return true
+  }
+  if (!sharedCore.canBeSortColumn(columnSchema.type)) {
     return false
   }
   // If it's a related column (only available in the frontend), don't allow using it as display column
-  if (column.related) {
+  if (columnSchema.related) {
     return false
   }
   return true