diff --git a/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx b/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
index f32db83c8e..cf110654cb 100644
--- a/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
+++ b/web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { useSQLiteDatabase } from '../../hooks/use-sqlite-database'
-import DataTable from './data-table'
+import TablePanel from './table-panel'
 import TableSelector from './table-selector'
 
 type SQLiteFilePreviewProps = {
@@ -149,40 +149,12 @@ const SQLiteFilePreview: FC<SQLiteFilePreviewProps> = ({
           isLoading={tableState.isLoading}
         />
       </div>
-      <div
-        ref={tableScrollRef}
-        className="min-h-0 min-w-0 flex-1 overflow-auto rounded-lg bg-components-panel-bg"
-      >
-        {tableState.isLoading
-          ? (
-              <div className="flex h-full w-full items-center justify-center">
-                <Loading type="area" />
-              </div>
-            )
-          : tableState.error
-            ? (
-                <div className="flex h-full w-full items-center justify-center text-text-tertiary">
-                  <span className="system-sm-regular">
-                    {t('skillSidebar.sqlitePreview.loadError')}
-                  </span>
-                </div>
-              )
-            : tableState.data
-              ? (
-                  <DataTable
-                    columns={tableState.data.columns}
-                    values={tableState.data.values}
-                    scrollRef={tableScrollRef}
-                  />
-                )
-              : (
-                  <div className="flex h-full w-full items-center justify-center text-text-tertiary">
-                    <span className="system-sm-regular">
-                      {t('skillSidebar.sqlitePreview.emptyRows')}
-                    </span>
-                  </div>
-                )}
-      </div>
+      <TablePanel
+        data={tableState.data}
+        isLoading={tableState.isLoading}
+        error={tableState.error}
+        scrollRef={tableScrollRef}
+      />
     </div>
   )
 }
diff --git a/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-panel.tsx b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-panel.tsx
new file mode 100644
index 0000000000..1a2c57267d
--- /dev/null
+++ b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-panel.tsx
@@ -0,0 +1,61 @@
+import type { FC, RefObject } from 'react'
+import type { SQLiteQueryResult } from '../../hooks/sqlite/types'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import DataTable from './data-table'
+
+type TablePanelProps = {
+  data: SQLiteQueryResult | null
+  isLoading: boolean
+  error: Error | null
+  scrollRef: RefObject<HTMLDivElement | null>
+}
+
+const TablePanel: FC<TablePanelProps> = ({
+  data,
+  isLoading,
+  error,
+  scrollRef,
+}) => {
+  const { t } = useTranslation('workflow')
+
+  return (
+    <div
+      ref={scrollRef}
+      className="min-h-0 min-w-0 flex-1 overflow-auto rounded-lg bg-components-panel-bg"
+    >
+      {isLoading
+        ? (
+            <div className="flex h-full w-full items-center justify-center">
+              <Loading type="area" />
+            </div>
+          )
+        : error
+          ? (
+              <div className="flex h-full w-full items-center justify-center text-text-tertiary">
+                <span className="system-sm-regular">
+                  {t('skillSidebar.sqlitePreview.loadError')}
+                </span>
+              </div>
+            )
+          : data
+            ? (
+                <DataTable
+                  columns={data.columns}
+                  values={data.values}
+                  scrollRef={scrollRef}
+                />
+              )
+            : (
+                <div className="flex h-full w-full items-center justify-center text-text-tertiary">
+                  <span className="system-sm-regular">
+                    {t('skillSidebar.sqlitePreview.emptyRows')}
+                  </span>
+                </div>
+              )}
+    </div>
+  )
+}
+
+export default React.memo(TablePanel)