0
# Content and Display
1
2
Components for rendering and formatting table content with responsive text handling, favorites, and expandable content areas.
3
4
## Capabilities
5
6
### TableText
7
8
Text rendering component with tooltip support and responsive wrapping behaviors.
9
10
```typescript { .api }
11
/**
12
* Text rendering component with tooltip support
13
* @param props - TableText configuration props
14
* @returns TableText component
15
*/
16
function TableText(props: TableTextProps): React.FunctionComponent<TableTextProps>;
17
18
interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
19
/** Content rendered within the table text */
20
children?: React.ReactNode;
21
/** Additional classes added to the table text */
22
className?: string;
23
/** Determines which element to render as a table text */
24
variant?: TableTextVariant | 'span' | 'div';
25
/** Determines which wrapping modifier to apply to the table text */
26
wrapModifier?: WrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent';
27
/** Text to display on the tooltip */
28
tooltip?: React.ReactNode;
29
/** Other props to pass to the tooltip */
30
tooltipProps?: Omit<TooltipProps, 'content'>;
31
/** Callback used to create the tooltip if text is truncated */
32
onMouseEnter?: (event: any) => void;
33
/** Determines if the TableText is focused by parent component */
34
focused?: boolean;
35
/** Determines if tooltip should have normal visibility behavior */
36
tooltipHasDefaultBehavior?: boolean;
37
}
38
39
enum TableTextVariant {
40
div = 'div',
41
nav = 'nav'
42
}
43
44
enum WrapModifier {
45
wrap = 'wrap',
46
nowrap = 'nowrap',
47
truncate = 'truncate',
48
breakWord = 'breakWord',
49
fitContent = 'fitContent'
50
}
51
```
52
53
**Usage Examples:**
54
55
```typescript
56
import { TableText, WrapModifier } from "@patternfly/react-table";
57
58
// Basic text with truncation
59
<Td>
60
<TableText wrapModifier="truncate">
61
This is a very long text that will be truncated with ellipsis
62
</TableText>
63
</Td>
64
65
// Text with custom tooltip
66
<Td>
67
<TableText
68
wrapModifier="truncate"
69
tooltip="Full description: This is the complete text content"
70
>
71
Short text
72
</TableText>
73
</Td>
74
75
// Responsive text with break word
76
<Td>
77
<TableText wrapModifier="breakWord">
78
ThisIsAVeryLongWordThatNeedsToBreak
79
</TableText>
80
</Td>
81
82
// Navigation variant
83
<Td>
84
<TableText variant="nav">
85
<a href="/item/123">Item Link</a>
86
</TableText>
87
</Td>
88
```
89
90
### ExpandableRowContent
91
92
Container for expanded row content with optional background styling.
93
94
```typescript { .api }
95
/**
96
* Container for expanded row content
97
* @param props - ExpandableRowContent configuration props
98
* @returns ExpandableRowContent component
99
*/
100
function ExpandableRowContent(props: ExpandableRowContentProps): React.FunctionComponent<ExpandableRowContentProps>;
101
102
interface ExpandableRowContentProps {
103
/** Content rendered inside the expandable row */
104
children?: React.ReactNode;
105
/** Flag indicating whether the expandable row content has no background */
106
hasNoBackground?: boolean;
107
}
108
```
109
110
**Usage Examples:**
111
112
```typescript
113
import { ExpandableRowContent } from "@patternfly/react-table";
114
115
// Basic expandable content
116
<Tr isExpanded={expandedRows.includes(rowIndex)}>
117
<Td colSpan={columnCount}>
118
<ExpandableRowContent>
119
<div>
120
<h4>Additional Details</h4>
121
<p>This is the expanded content for the row.</p>
122
</div>
123
</ExpandableRowContent>
124
</Td>
125
</Tr>
126
127
// Expandable content without background (when parent Td has noPadding)
128
<Tr isExpanded={expandedRows.includes(rowIndex)}>
129
<Td colSpan={columnCount} noPadding>
130
<ExpandableRowContent hasNoBackground>
131
<div style={{ padding: '1rem' }}>
132
Custom styled expanded content
133
</div>
134
</ExpandableRowContent>
135
</Td>
136
</Tr>
137
```
138
139
### FavoritesCell
140
141
Star/favorite button cell component for marking rows as favorites.
142
143
```typescript { .api }
144
/**
145
* Star/favorite button cell component
146
* @param props - FavoritesCell configuration props
147
* @returns FavoritesCell component
148
*/
149
function FavoritesCell(props: FavoritesCellProps): React.FunctionComponent<FavoritesCellProps>;
150
151
interface FavoritesCellProps {
152
id?: string;
153
className?: string;
154
/** Callback when favorite state changes */
155
onFavorite?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
156
/** Whether the item is currently favorited */
157
isFavorited?: boolean;
158
/** Row index for accessibility labeling */
159
rowIndex?: number;
160
}
161
```
162
163
**Usage Examples:**
164
165
```typescript
166
import { FavoritesCell } from "@patternfly/react-table";
167
168
// Basic favorites cell
169
<Td>
170
<FavoritesCell
171
isFavorited={favorites.includes(rowIndex)}
172
onFavorite={(event) => toggleFavorite(rowIndex)}
173
rowIndex={rowIndex}
174
/>
175
</Td>
176
177
// Favorites cell with custom styling
178
<Td>
179
<FavoritesCell
180
className="custom-favorite-button"
181
isFavorited={item.favorited}
182
onFavorite={(event) => handleFavoriteChange(item.id, !item.favorited)}
183
/>
184
</Td>
185
```
186
187
### HeaderCellInfoWrapper
188
189
Wrapper component for header cells with info tooltips or popovers.
190
191
```typescript { .api }
192
/**
193
* Wrapper component for header cells with info tooltips or popovers
194
* @param props - HeaderCellInfoWrapper configuration props
195
* @returns HeaderCellInfoWrapper component
196
*/
197
function HeaderCellInfoWrapper(props: ColumnHelpWrapperProps): React.FunctionComponent<ColumnHelpWrapperProps>;
198
199
interface ColumnHelpWrapperProps {
200
/** The header cell that is wrapped */
201
children: React.ReactNode;
202
/** The information that is presented in the tooltip/popover */
203
info: React.ReactNode;
204
/** Optional classname to add to the tooltip/popover */
205
className?: string;
206
/** The info variant */
207
variant?: 'tooltip' | 'popover';
208
/** Additional props forwarded to the Popover component */
209
popoverProps?: Omit<PopoverProps, 'bodyContent'>;
210
/** Additional props forwarded to the tooltip component */
211
tooltipProps?: Omit<TooltipProps, 'content'>;
212
/** Aria label of the info button */
213
ariaLabel?: string;
214
}
215
```
216
217
**Usage Examples:**
218
219
```typescript
220
import { HeaderCellInfoWrapper } from "@patternfly/react-table";
221
222
// Header with info tooltip
223
<Th>
224
<HeaderCellInfoWrapper
225
info="This column shows the user's current status"
226
ariaLabel="Status column information"
227
>
228
Status
229
</HeaderCellInfoWrapper>
230
</Th>
231
232
// Header with info popover
233
<Th>
234
<HeaderCellInfoWrapper
235
variant="popover"
236
info={
237
<div>
238
<h4>Status Information</h4>
239
<p>This column displays the current status of each user:</p>
240
<ul>
241
<li>Active - User is currently active</li>
242
<li>Inactive - User account is disabled</li>
243
<li>Pending - User registration is pending</li>
244
</ul>
245
</div>
246
}
247
ariaLabel="Detailed status information"
248
>
249
Status
250
</HeaderCellInfoWrapper>
251
</Th>
252
```
253
254
## Tree Table and Draggable Features
255
256
### Tree Row Configuration
257
258
```typescript { .api }
259
// Tree table row configuration
260
interface TdTreeRowType {
261
/** Callback when user expands/collapses a row to reveal/hide the row's children */
262
onCollapse: OnTreeRowCollapse;
263
/** Callback when user changes the checkbox on a row */
264
onCheckChange?: OnCheckChange;
265
/** Callback when user shows/hides the row details in responsive view */
266
onToggleRowDetails?: OnToggleRowDetails;
267
/** The row index */
268
rowIndex?: number;
269
/** Additional props forwarded to the title cell of the tree row */
270
props?: any;
271
}
272
273
// Tree table event handlers
274
type OnTreeRowCollapse = (event: any, rowIndex: number, title: React.ReactNode, rowData: IRowData) => void;
275
type OnToggleRowDetails = (event: any, rowIndex: number, title: React.ReactNode, rowData: IRowData) => void;
276
type OnCheckChange = (
277
event: React.FormEvent<HTMLInputElement>,
278
isChecked: boolean,
279
rowIndex: number,
280
title: React.ReactNode,
281
rowData: IRowData
282
) => void;
283
```
284
285
### Draggable Row Configuration
286
287
```typescript { .api }
288
// Draggable row configuration
289
interface TdDraggableType {
290
/** Id of the draggable row */
291
id: string;
292
}
293
```
294
295
## Content Formatting Utilities
296
297
### Cell Modifiers
298
299
```typescript { .api }
300
// Text and content modifiers available through BaseCellProps
301
interface BaseCellProps {
302
/** Modifies cell to center its contents */
303
textCenter?: boolean;
304
/** Style modifier to apply */
305
modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';
306
/** Width percentage modifier */
307
width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;
308
/** Visibility breakpoint modifiers */
309
visibility?: (keyof IVisibility)[];
310
}
311
312
// Visibility breakpoint interface
313
interface IVisibility {
314
hidden?: boolean;
315
hiddenOnSm?: boolean;
316
hiddenOnMd?: boolean;
317
hiddenOnLg?: boolean;
318
hiddenOnXl?: boolean;
319
hiddenOn2Xl?: boolean;
320
visibleOnSm?: boolean;
321
visibleOnMd?: boolean;
322
visibleOnLg?: boolean;
323
visibleOnXl?: boolean;
324
visibleOn2Xl?: boolean;
325
}
326
```
327
328
### Info and Tooltip Support
329
330
```typescript { .api }
331
// Header cell info configuration
332
interface ThInfoType {
333
/** Tooltip content */
334
tooltip?: React.ReactNode;
335
/** Additional tooltip properties */
336
tooltipProps?: Omit<TooltipProps, 'content'>;
337
/** Popover content */
338
popover?: React.ReactNode;
339
/** Additional popover properties */
340
popoverProps?: Omit<PopoverProps, 'bodyContent'>;
341
/** Accessible label for the info button */
342
ariaLabel?: string;
343
/** Additional CSS classes */
344
className?: string;
345
}
346
```
347
348
**Usage Examples:**
349
350
```typescript
351
// Header with info tooltip
352
<Th
353
info={{
354
tooltip: "This column shows the user's current status",
355
ariaLabel: "Status column information"
356
}}
357
>
358
Status
359
</Th>
360
361
// Header with info popover
362
<Th
363
info={{
364
popover: (
365
<div>
366
<h4>Status Information</h4>
367
<p>This column displays the current status of each user:</p>
368
<ul>
369
<li>Active - User is currently active</li>
370
<li>Inactive - User account is disabled</li>
371
<li>Pending - User registration is pending</li>
372
</ul>
373
</div>
374
),
375
ariaLabel: "Detailed status information"
376
}}
377
>
378
Status
379
</Th>
380
```
381
382
## Content Display Patterns
383
384
### Responsive Design
385
386
The table components automatically handle responsive behavior through:
387
- `dataLabel` props on cells that show as labels in mobile view
388
- Visibility modifiers to show/hide content at different breakpoints
389
- Automatic text truncation with tooltip support
390
- Flexible width and wrapping options
391
392
### Content Types
393
394
Common content patterns supported:
395
- **Text Content**: Simple text with wrapping and truncation options
396
- **Interactive Content**: Buttons, links, and form controls
397
- **Rich Content**: HTML content, images, and custom components
398
- **Expandable Content**: Collapsible sections with detailed information
399
- **Status Indicators**: Icons, badges, and visual status representations