Metabase Embedding SDK 的 CollectionBrowserListColumns 详解集合项表格列的自定义与过滤【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase导读在 Metabase 的 Embedding SDK嵌入式分析 SDK中CollectionBrowser是用于在宿主应用中浏览集合Collection及其条目的核心 React 组件。CollectionBrowserListColumns则是该组件用于声明集合条目表格显示哪些列的联合类型union type。本文以仓库中该类型定义及其使用文档为骨架结合 CollectionBrowser.tsx 的真实实现与 columns.ts 的底层列定义系统讲解该类型的全部取值含义、与visibleColumns属性的配合方式、默认行为以及在 all 虚拟根集合等特殊场景下的表现帮助开发者准确控制嵌入式集合浏览器的列显示。CollectionBrowserListColumns 类型定义官方 API 片段在 docs/embedding/sdk/api/snippets/CollectionBrowserListColumns.md 中该类型的完整定义如下type CollectionBrowserListColumns | type | name | description | lastEditedBy | lastEditedAt | archive;这是一个由六个字符串字面量组成的联合类型表示集合条目表格中可显示的六种列。它被用作CollectionBrowserProps中visibleColumns属性的元素类型visibleColumns?: CollectionBrowserListColumns[];源码中的真实定义在 Embedding SDK 的源码中该类型与文档定义完全一致位于 CollectionBrowser.tsxexport type CollectionBrowserListColumns | type | name | description | lastEditedBy | lastEditedAt | archive;同时SDK 内部还维护了一份默认可见列清单 COLLECTION_BROWSER_LIST_COLUMNSconst COLLECTION_BROWSER_LIST_COLUMNS: CollectionBrowserListColumns[] [ type, name, lastEditedBy, lastEditedAt, archive, ];对比可见默认可见列不含description描述列其余五列默认均显示。这一默认清单也通过visibleColumns COLLECTION_BROWSER_LIST_COLUMNS作为CollectionBrowserInner的默认参数值生效见 CollectionBrowser.tsx 第 146 行。与核心表格列定义的对应关系六个列名并非 SDK 独有它们来自 Metabase 前端核心的集合内容列常量。在 frontend/src/metabase/common/collections/columns.ts 中export const COLLECTION_CONTENT_COLUMNS [ type, name, description, lastEditedBy, lastEditedAt, actionMenu, archive, ] as const;可以看到CollectionBrowserListColumns恰好是COLLECTION_CONTENT_COLUMNS去掉actionMenu操作菜单列SDK 场景下不暴露后的子集。而核心的DEFAULT_VISIBLE_COLUMNS_LIST见 columns.ts 第 18-24 行为[type, name, lastEditedBy, lastEditedAt, actionMenu]同样以type、name、编辑信息列为核心——这解释了为什么 SDK 默认隐藏描述列、突出内容定位信息。六个列的语义与取值说明列名语义展示内容type条目类型集合、仪表板、问题Question、模型Model等类型的图标/标识name条目名称集合或条目的显示名称description条目描述集合或条目的描述文本默认不显示lastEditedBy最后编辑者最近一次修改该条目的用户lastEditedAt最后编辑时间最近一次修改的时间戳archive归档操作将条目移入归档的操作入口默认显示其中type、name、description、lastEditedBy、lastEditedAt为展示型列archive为操作型列。在源码实现中这些列名通过getVisibleColumnsMap见 ItemsTable/utils.ts被转换为CollectionContentTableColumnsMap{ [key in CollectionContentTableColumn]: true }形式供底层CollectionItemsTable/ItemsTable判断每一列是否渲染。通过 visibleColumns 自定义列显示visibleColumns是CollectionBrowserProps中与该类型直接关联的属性见 CollectionBrowserProps.tsx 源码注释未提供时默认显示COLLECTION_BROWSER_LIST_COLUMNS中的五列type、name、lastEditedBy、lastEditedAt、archive。提供时仅显示传入数组中的列顺序按数组顺序渲染。典型用法示例import { CollectionBrowser } from metabase/embedding-sdk-react; CollectionBrowser collectionIdroot visibleColumns{[type, name, description]} /;上述配置将集合条目表格精简为类型 名称 描述三列隐藏编辑信息与归档操作适合只读的内容陈列场景。all 模式下的列行为特殊场景当collectionIdall时CollectionBrowser会展示一个虚拟根级列表聚合根集合、租户集合与用户个人集合见 CollectionBrowserProps 文档。在该虚拟根视图中存在一个关键实现细节lastEditedBy、lastEditedAt、archive三列会被自动过滤掉。原因在源码中有明确注释见 CollectionBrowser.tsx 第 176-187 行虚拟根行的数据是合成的synthesized不携带编辑信息也无法被归档因此这三列对每一行都会渲染为空值。实现通过getVisibleColumnsMap(visibleColumns.filter(...))在渲染前剔除这三列const allModeRootColumnsMap useMemo( () getVisibleColumnsMap( visibleColumns.filter( (column) ![lastEditedBy, lastEditedAt, archive].includes(column), ), ), [visibleColumns], );这意味着即使你在all模式下显式传入visibleColumns{[lastEditedBy, archive]}虚拟根列表也不会渲染这两列但当你进入具体的子集合后这些列会恢复正常显示。与 visibleEntityTypes 的配合CollectionBrowserListColumns负责显示哪些列而visibleEntityTypes负责显示哪些类型的实体collection | dashboard | question | model。两者共同决定集合浏览器的信息密度CollectionBrowser visibleEntityTypes{[dashboard, question]} // 只看仪表板与问题 visibleColumns{[type, name, lastEditedAt]} // 只显示三类列 /;在实现上visibleEntityTypes会通过ENTITY_NAME_MAP见 CollectionBrowser.tsx 第 70-77 行映射为后端模型类型如question→card、model→dataset再传给CollectionItemsTable的models参数过滤条目而visibleColumns则直接控制表格列渲染。常见使用场景与建议精简只读目录visibleColumns{[type, name, description]}隐藏编辑与归档操作适用于对外展示的数据目录。运维管理视图保留[type, name, lastEditedBy, lastEditedAt, archive]默认五列便于跟踪内容维护状态。窄屏嵌入只保留[name]或[type, name]配合pageSize默认 25控制单页密度。all 根视图注意在虚拟根集合中编辑信息列与归档列不会显示属预期行为无需额外处理。参考资料类型定义与组件实现CollectionBrowser.tsxSDK 组件文档CollectionBrowser 与 CollectionBrowserProps核心列定义与默认可见列columns.ts列映射工具函数ItemsTable/utils.ts组件属性片段CollectionBrowserProps.md【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/10 2:28:04 · 阅读 1.2k Metabase Embedding SDK 的 CollectionBrowserListColumns 详解：集合项表格列的自定义与过滤
Metabase Embedding SDK 的 CollectionBrowserListColumns 详解集合项表格列的自定义与过滤【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase导读在 Metabase 的 Embedding SDK嵌入式分析 SDK中CollectionBrowser是用于在宿主应用中浏览集合Collection及其条目的核心 React 组件。CollectionBrowserListColumns则是该组件用于声明集合条目表格显示哪些列的联合类型union type。本文以仓库中该类型定义及其使用文档为骨架结合 CollectionBrowser.tsx 的真实实现与 columns.ts 的底层列定义系统讲解该类型的全部取值含义、与visibleColumns属性的配合方式、默认行为以及在 all 虚拟根集合等特殊场景下的表现帮助开发者准确控制嵌入式集合浏览器的列显示。CollectionBrowserListColumns 类型定义官方 API 片段在 docs/embedding/sdk/api/snippets/CollectionBrowserListColumns.md 中该类型的完整定义如下type CollectionBrowserListColumns | type | name | description | lastEditedBy | lastEditedAt | archive;这是一个由六个字符串字面量组成的联合类型表示集合条目表格中可显示的六种列。它被用作CollectionBrowserProps中visibleColumns属性的元素类型visibleColumns?: CollectionBrowserListColumns[];源码中的真实定义在 Embedding SDK 的源码中该类型与文档定义完全一致位于 CollectionBrowser.tsxexport type CollectionBrowserListColumns | type | name | description | lastEditedBy | lastEditedAt | archive;同时SDK 内部还维护了一份默认可见列清单 COLLECTION_BROWSER_LIST_COLUMNSconst COLLECTION_BROWSER_LIST_COLUMNS: CollectionBrowserListColumns[] [ type, name, lastEditedBy, lastEditedAt, archive, ];对比可见默认可见列不含description描述列其余五列默认均显示。这一默认清单也通过visibleColumns COLLECTION_BROWSER_LIST_COLUMNS作为CollectionBrowserInner的默认参数值生效见 CollectionBrowser.tsx 第 146 行。与核心表格列定义的对应关系六个列名并非 SDK 独有它们来自 Metabase 前端核心的集合内容列常量。在 frontend/src/metabase/common/collections/columns.ts 中export const COLLECTION_CONTENT_COLUMNS [ type, name, description, lastEditedBy, lastEditedAt, actionMenu, archive, ] as const;可以看到CollectionBrowserListColumns恰好是COLLECTION_CONTENT_COLUMNS去掉actionMenu操作菜单列SDK 场景下不暴露后的子集。而核心的DEFAULT_VISIBLE_COLUMNS_LIST见 columns.ts 第 18-24 行为[type, name, lastEditedBy, lastEditedAt, actionMenu]同样以type、name、编辑信息列为核心——这解释了为什么 SDK 默认隐藏描述列、突出内容定位信息。六个列的语义与取值说明列名语义展示内容type条目类型集合、仪表板、问题Question、模型Model等类型的图标/标识name条目名称集合或条目的显示名称description条目描述集合或条目的描述文本默认不显示lastEditedBy最后编辑者最近一次修改该条目的用户lastEditedAt最后编辑时间最近一次修改的时间戳archive归档操作将条目移入归档的操作入口默认显示其中type、name、description、lastEditedBy、lastEditedAt为展示型列archive为操作型列。在源码实现中这些列名通过getVisibleColumnsMap见 ItemsTable/utils.ts被转换为CollectionContentTableColumnsMap{ [key in CollectionContentTableColumn]: true }形式供底层CollectionItemsTable/ItemsTable判断每一列是否渲染。通过 visibleColumns 自定义列显示visibleColumns是CollectionBrowserProps中与该类型直接关联的属性见 CollectionBrowserProps.tsx 源码注释未提供时默认显示COLLECTION_BROWSER_LIST_COLUMNS中的五列type、name、lastEditedBy、lastEditedAt、archive。提供时仅显示传入数组中的列顺序按数组顺序渲染。典型用法示例import { CollectionBrowser } from metabase/embedding-sdk-react; CollectionBrowser collectionIdroot visibleColumns{[type, name, description]} /;上述配置将集合条目表格精简为类型 名称 描述三列隐藏编辑信息与归档操作适合只读的内容陈列场景。all 模式下的列行为特殊场景当collectionIdall时CollectionBrowser会展示一个虚拟根级列表聚合根集合、租户集合与用户个人集合见 CollectionBrowserProps 文档。在该虚拟根视图中存在一个关键实现细节lastEditedBy、lastEditedAt、archive三列会被自动过滤掉。原因在源码中有明确注释见 CollectionBrowser.tsx 第 176-187 行虚拟根行的数据是合成的synthesized不携带编辑信息也无法被归档因此这三列对每一行都会渲染为空值。实现通过getVisibleColumnsMap(visibleColumns.filter(...))在渲染前剔除这三列const allModeRootColumnsMap useMemo( () getVisibleColumnsMap( visibleColumns.filter( (column) ![lastEditedBy, lastEditedAt, archive].includes(column), ), ), [visibleColumns], );这意味着即使你在all模式下显式传入visibleColumns{[lastEditedBy, archive]}虚拟根列表也不会渲染这两列但当你进入具体的子集合后这些列会恢复正常显示。与 visibleEntityTypes 的配合CollectionBrowserListColumns负责显示哪些列而visibleEntityTypes负责显示哪些类型的实体collection | dashboard | question | model。两者共同决定集合浏览器的信息密度CollectionBrowser visibleEntityTypes{[dashboard, question]} // 只看仪表板与问题 visibleColumns{[type, name, lastEditedAt]} // 只显示三类列 /;在实现上visibleEntityTypes会通过ENTITY_NAME_MAP见 CollectionBrowser.tsx 第 70-77 行映射为后端模型类型如question→card、model→dataset再传给CollectionItemsTable的models参数过滤条目而visibleColumns则直接控制表格列渲染。常见使用场景与建议精简只读目录visibleColumns{[type, name, description]}隐藏编辑与归档操作适用于对外展示的数据目录。运维管理视图保留[type, name, lastEditedBy, lastEditedAt, archive]默认五列便于跟踪内容维护状态。窄屏嵌入只保留[name]或[type, name]配合pageSize默认 25控制单页密度。all 根视图注意在虚拟根集合中编辑信息列与归档列不会显示属预期行为无需额外处理。参考资料类型定义与组件实现CollectionBrowser.tsxSDK 组件文档CollectionBrowser 与 CollectionBrowserProps核心列定义与默认可见列columns.ts列映射工具函数ItemsTable/utils.ts组件属性片段CollectionBrowserProps.md【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考