diff --git a/.changeset/document-table-cell-requirement.md b/.changeset/document-table-cell-requirement.md
new file mode 100644
index 0000000000..8a8b82bc90
--- /dev/null
+++ b/.changeset/document-table-cell-requirement.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Documented the requirement that `ColumnConfig.cell` and custom `RowRenderFn` renders must return a cell component (`Cell`, `CellText`, or `CellProfile`) as the top-level element.
+
+Affected components: Table, Cell, CellText, CellProfile
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 271b78fca4..25de0f3190 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -17,6 +17,34 @@ yarn add @backstage/ui
- [Backstage Readme](https://github.com/backstage/backstage/blob/master/README.md)
- [Backstage Documentation](https://backstage.io/docs)
+## Table Cell Requirement
+
+When using the `Table` component, every cell rendered via `ColumnConfig.cell` (or
+inside a custom `RowRenderFn`) **must** return a cell component as the top-level
+element. The available cell components are:
+
+- **`CellText`** — displays a title with optional description and icon.
+- **`CellProfile`** — displays an avatar with a name and optional description.
+- **`Cell`** — a generic wrapper for fully custom cell content.
+
+Returning bare text, React fragments, or other elements without wrapping them in
+one of these cell components will break the table layout.
+
+```tsx
+// ✅ Correct — CellText is the top-level element
+cell: item => ;
+
+// ✅ Correct — Cell wraps custom content
+cell: item => (
+ |
+
+ |
+);
+
+// ❌ Wrong — bare text without a cell wrapper
+cell: item => {item.name};
+```
+
## Writing Changesets for Components
When creating changesets for component-specific changes, add component metadata to help maintain documentation:
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index b254b4f773..f55efe8c89 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -766,7 +766,7 @@ export const Cell: {
displayName: string;
};
-// @public (undocumented)
+// @public
export type CellOwnProps = {
className?: string;
};
@@ -774,7 +774,7 @@ export type CellOwnProps = {
// @public (undocumented)
export const CellProfile: (props: CellProfileProps) => JSX_2.Element;
-// @public (undocumented)
+// @public
export type CellProfileOwnProps = {
src?: string;
name?: string;
@@ -784,12 +784,12 @@ export type CellProfileOwnProps = {
className?: string;
};
-// @public (undocumented)
+// @public
export interface CellProfileProps
extends CellProfileOwnProps,
Omit {}
-// @public (undocumented)
+// @public
export interface CellProps
extends CellOwnProps,
Omit {}
@@ -800,7 +800,7 @@ export const CellText: {
displayName: string;
};
-// @public (undocumented)
+// @public
export type CellTextOwnProps = {
title: string;
description?: string;
@@ -810,7 +810,7 @@ export type CellTextOwnProps = {
className?: string;
};
-// @public (undocumented)
+// @public
export interface CellTextProps
extends CellTextOwnProps,
Omit {}
@@ -849,9 +849,8 @@ export interface CheckboxProps
// @public (undocumented)
export const Column: (props: ColumnProps) => JSX_2.Element;
-// @public (undocumented)
+// @public
export interface ColumnConfig {
- // (undocumented)
cell: (item: T) => ReactElement;
// (undocumented)
defaultWidth?: ColumnSize | null;
@@ -2068,7 +2067,7 @@ export interface RowProps
extends RowOwnProps,
Omit, keyof RowOwnProps> {}
-// @public (undocumented)
+// @public
export type RowRenderFn = (params: {
item: T;
index: number;
diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts
index 0736afa05b..030ac44ae0 100644
--- a/packages/ui/src/components/Table/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -93,17 +93,35 @@ export interface ColumnProps
extends ColumnOwnProps,
Omit {}
-/** @public */
+/**
+ * Own props for the {@link Cell} component.
+ *
+ * @public
+ */
export type CellOwnProps = {
className?: string;
};
-/** @public */
+/**
+ * Props for the {@link Cell} component.
+ *
+ * `Cell` is a generic cell wrapper for custom cell content. When rendering
+ * cells via {@link ColumnConfig.cell} or a custom {@link RowRenderFn}, the
+ * returned element **must** be a cell component (`Cell`, `CellText`, or
+ * `CellProfile`) at the top level. Returning bare text or other elements
+ * without a cell wrapper will break the table layout.
+ *
+ * @public
+ */
export interface CellProps
extends CellOwnProps,
Omit {}
-/** @public */
+/**
+ * Own props for the {@link CellText} component.
+ *
+ * @public
+ */
export type CellTextOwnProps = {
title: string;
description?: string;
@@ -113,12 +131,25 @@ export type CellTextOwnProps = {
className?: string;
};
-/** @public */
+/**
+ * Props for the {@link CellText} component.
+ *
+ * `CellText` renders a table cell with a title and optional description. It
+ * is one of the cell components (`Cell`, `CellText`, `CellProfile`) that
+ * **must** be used as the top-level element returned from
+ * {@link ColumnConfig.cell} or a custom {@link RowRenderFn}.
+ *
+ * @public
+ */
export interface CellTextProps
extends CellTextOwnProps,
Omit {}
-/** @public */
+/**
+ * Own props for the {@link CellProfile} component.
+ *
+ * @public
+ */
export type CellProfileOwnProps = {
src?: string;
name?: string;
@@ -128,7 +159,16 @@ export type CellProfileOwnProps = {
className?: string;
};
-/** @public */
+/**
+ * Props for the {@link CellProfile} component.
+ *
+ * `CellProfile` renders a table cell with an avatar, name, and optional
+ * description. It is one of the cell components (`Cell`, `CellText`,
+ * `CellProfile`) that **must** be used as the top-level element returned
+ * from {@link ColumnConfig.cell} or a custom {@link RowRenderFn}.
+ *
+ * @public
+ */
export interface CellProfileProps
extends CellProfileOwnProps,
Omit {}
@@ -151,10 +191,27 @@ export interface PagePagination extends TablePaginationProps {
/** @public */
export type TablePaginationType = NoPagination | PagePagination;
-/** @public */
+/**
+ * Configuration for a single table column.
+ *
+ * @public
+ */
export interface ColumnConfig {
id: string;
label: string;
+ /**
+ * Renders the cell content for this column.
+ *
+ * **Important:** The returned element **must** be a cell component at the
+ * top level — either `Cell`, `CellText`, or `CellProfile`. Returning bare
+ * text, fragments, or other elements without a cell wrapper will break the
+ * table layout.
+ *
+ * @example
+ * ```tsx
+ * cell: item =>
+ * ```
+ */
cell: (item: T) => ReactElement;
header?: () => ReactElement;
isSortable?: boolean;
@@ -173,7 +230,16 @@ export interface RowConfig {
getIsDisabled?: (item: T) => boolean;
}
-/** @public */
+/**
+ * Custom render function for table rows.
+ *
+ * When using a custom row render function, each cell rendered inside the row
+ * **must** use a cell component (`Cell`, `CellText`, or `CellProfile`) as
+ * the top-level element. Returning bare text or other elements without a
+ * cell wrapper will break the table layout.
+ *
+ * @public
+ */
export type RowRenderFn = (params: {
item: T;
index: number;