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