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:
@@ -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
|
||||
@@ -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
|
||||
// =============================================================================
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user