Move table cell requirement docs to docs-ui

Move the cell wrapper requirement documentation from the package
README to the docs-ui table component page where it belongs.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
This commit is contained in:
Patrik Oldsberg
2026-03-16 20:27:02 +01:00
parent 872dc1025e
commit 1f25382e56
4 changed files with 30 additions and 35 deletions
@@ -1,7 +0,0 @@
---
'@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
+13
View File
@@ -42,6 +42,7 @@ import {
tableCombinedSnippet,
tableCustomRowSnippet,
tablePrimitivesSnippet,
tableCellRequirementSnippet,
} from './snippets';
import { ChangelogComponent } from '@/components/ChangelogComponent';
import { PageTitle } from '@/components/PageTitle';
@@ -94,6 +95,18 @@ For full control over state, use the controlled props instead:
- `search` / `onSearchChange`
- `filter` / `onFilterChange`
### Cell Requirement
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.
<CodeBlock code={tableCellRequirementSnippet} />
## Common Patterns
### Sorting
@@ -57,6 +57,23 @@ const {
filter, // { value, onChange } for filters
} = useTable({ ... });`;
// =============================================================================
// Cell Requirement
// =============================================================================
export const tableCellRequirementSnippet = `// ✅ Correct — CellText is the top-level element
cell: item => <CellText title={item.name} />;
// ✅ Correct — Cell wraps custom content
cell: item => (
<Cell>
<MyCustomContent value={item.name} />
</Cell>
);
// ❌ Wrong — bare text without a cell wrapper
cell: item => <span>{item.name}</span>;`;
// =============================================================================
// Common Patterns
// =============================================================================
-28
View File
@@ -17,34 +17,6 @@ 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 => <CellText title={item.name} />;
// ✅ Correct — Cell wraps custom content
cell: item => (
<Cell>
<MyCustomContent value={item.name} />
</Cell>
);
// ❌ Wrong — bare text without a cell wrapper
cell: item => <span>{item.name}</span>;
```
## Writing Changesets for Components
When creating changesets for component-specific changes, add component metadata to help maintain documentation: