0
# Core Table Structure
1
2
Basic table building blocks for creating structured data displays with full accessibility support and responsive behavior.
3
4
## Capabilities
5
6
### Table
7
8
Main table container component with comprehensive accessibility and keyboard navigation support.
9
10
```typescript { .api }
11
/**
12
* Main table container component with accessibility and responsive features
13
* @param props - Table configuration props
14
* @returns Forwarded ref table element
15
*/
16
function Table(props: TableProps): React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
17
18
interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps {
19
/** Adds an accessible name for the Table */
20
'aria-label'?: string;
21
/** Content rendered inside the Table */
22
children?: React.ReactNode;
23
/** Additional classes added to the Table */
24
className?: string;
25
/** Style variant for the Table. 'compact' reduces spacing */
26
variant?: TableVariant | 'compact';
27
/** Render borders (default: true) */
28
borders?: boolean;
29
/** Specifies the grid breakpoints (default: 'grid-md') */
30
gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
31
/** A valid WAI-ARIA role to be applied to the table element (default: 'grid') */
32
role?: string;
33
/** If set to true, the table header sticks to the top of its container */
34
isStickyHeader?: boolean;
35
/** Flag indicating table is a tree table */
36
isTreeTable?: boolean;
37
/** Flag indicating this table is nested within another table */
38
isNested?: boolean;
39
/** Flag indicating this table should be striped */
40
isStriped?: boolean;
41
/** Flag indicating this table contains expandable rows */
42
isExpandable?: boolean;
43
/** Flag indicating whether expandable rows have animations */
44
hasAnimations?: boolean;
45
/** Flag indicating rows will not have inset for expanding/collapsing in tree tables */
46
hasNoInset?: boolean;
47
/** Collection of column spans for nested headers (deprecated) */
48
nestedHeaderColumnSpans?: number[];
49
/** Visible text to add alongside the hidden a11y caption for tables with selectable rows */
50
selectableRowCaptionText?: string;
51
/** Value to overwrite the randomly generated data-ouia-component-id */
52
ouiaId?: number | string;
53
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state */
54
ouiaSafe?: boolean;
55
}
56
```
57
58
**Usage Examples:**
59
60
```typescript
61
import { Table } from "@patternfly/react-table";
62
63
// Basic table
64
<Table aria-label="Simple table">
65
{/* table content */}
66
</Table>
67
68
// Compact striped table with sticky header
69
<Table
70
aria-label="Data table"
71
variant="compact"
72
isStriped
73
isStickyHeader
74
borders={false}
75
>
76
{/* table content */}
77
</Table>
78
79
// Tree table with animations
80
<Table
81
aria-label="Tree table"
82
isTreeTable
83
isExpandable
84
hasAnimations
85
gridBreakPoint="grid-lg"
86
>
87
{/* tree table content */}
88
</Table>
89
```
90
91
### Thead
92
93
Table header group component for containing header rows.
94
95
```typescript { .api }
96
/**
97
* Table header group component
98
* @param props - Thead configuration props
99
* @returns Forwarded ref thead element
100
*/
101
function Thead(props: TheadProps): React.ForwardRefExoticComponent<TheadProps & React.RefAttributes<HTMLTableSectionElement>>;
102
103
interface TheadProps extends React.HTMLProps<HTMLTableSectionElement> {
104
/** Content rendered inside the <thead> row group */
105
children?: React.ReactNode;
106
/** Additional classes added to the <thead> element */
107
className?: string;
108
/** Won't wrap the table head if true */
109
noWrap?: boolean;
110
/** Indicates the <thead> contains a nested header */
111
hasNestedHeader?: boolean;
112
}
113
```
114
115
### Tbody
116
117
Table body group component for containing data rows.
118
119
```typescript { .api }
120
/**
121
* Table body group component
122
* @param props - Tbody configuration props
123
* @returns Forwarded ref tbody element
124
*/
125
function Tbody(props: TbodyProps): React.ForwardRefExoticComponent<TbodyProps & React.RefAttributes<HTMLTableSectionElement>>;
126
127
interface TbodyProps extends React.HTMLProps<HTMLTableSectionElement> {
128
/** Content rendered inside the <tbody> row group */
129
children?: React.ReactNode;
130
/** Additional classes added to the <tbody> element */
131
className?: string;
132
/** Modifies the body to allow for expandable rows */
133
isExpanded?: boolean;
134
/** Flag indicating the <tbody> contains oddly striped rows */
135
isOddStriped?: boolean;
136
/** Flag indicating the <tbody> contains evenly striped rows */
137
isEvenStriped?: boolean;
138
}
139
```
140
141
### Tr
142
143
Table row component with support for selection, expansion, editing, and interactions.
144
145
```typescript { .api }
146
/**
147
* Table row component with interaction support
148
* @param props - Tr configuration props
149
* @returns Forwarded ref tr element
150
*/
151
function Tr(props: TrProps): React.ForwardRefExoticComponent<TrProps & React.RefAttributes<HTMLTableRowElement>>;
152
153
interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
154
/** Content rendered inside the <tr> row */
155
children?: React.ReactNode;
156
/** Additional classes added to the <tr> row */
157
className?: string;
158
/** Flag indicating the Tr is hidden */
159
isHidden?: boolean;
160
/** Flag indicating whether an "expandable" Tr is expanded or not */
161
isExpanded?: boolean;
162
/** Flag indicating that the "control row" Tr has an expandable sibling Tr that is expanded */
163
isContentExpanded?: boolean;
164
/** Whether the row is editable */
165
isEditable?: boolean;
166
/** Flag which adds hover styles for the clickable table row */
167
isClickable?: boolean;
168
/** Flag indicating the row is selected - adds selected styling */
169
isRowSelected?: boolean;
170
/** Flag indicating the row is striped */
171
isStriped?: boolean;
172
/** Flag indicating the row will act as a border */
173
isBorderRow?: boolean;
174
/** Flag indicating the row is controlling the expansion of another row */
175
isControlRow?: boolean;
176
/** An event handler for the row */
177
onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
178
/** Flag indicating that the row is selectable */
179
isSelectable?: boolean;
180
/** Flag indicating the spacing offset of the first cell should be reset */
181
resetOffset?: boolean;
182
/** Value to overwrite the randomly generated data-ouia-component-id */
183
ouiaId?: number | string;
184
/** Set the value of data-ouia-safe */
185
ouiaSafe?: boolean;
186
}
187
```
188
189
### Th
190
191
Table header cell component with sorting, selection, and expansion capabilities.
192
193
```typescript { .api }
194
/**
195
* Table header cell component with interactive features
196
* @param props - Th configuration props
197
* @returns Forwarded ref th element
198
*/
199
function Th(props: ThProps): React.ForwardRefExoticComponent<ThProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
200
201
interface ThProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
202
/** The column header the cell corresponds to for mobile viewport */
203
dataLabel?: string;
204
/** Renders a checkbox select so that all row checkboxes can be selected/deselected */
205
select?: ThSelectType;
206
/** Renders a chevron so that all row chevrons can be expanded/collapsed */
207
expand?: ThExpandType;
208
/** Formats the header so that its column will be sortable */
209
sort?: ThSortType;
210
/** Tooltip to show on the header cell */
211
tooltip?: React.ReactNode;
212
/** Other props to pass to the tooltip */
213
tooltipProps?: Omit<TooltipProps, 'content'>;
214
/** Callback on mouse enter */
215
onMouseEnter?: (event: any) => void;
216
/** Adds tooltip/popover info button */
217
info?: ThInfoType;
218
/** Adds scope to the column to associate header cells with data cells */
219
scope?: string;
220
/** Indicates the header column should be sticky */
221
isStickyColumn?: boolean;
222
/** Adds a border to the right side of the cell */
223
hasRightBorder?: boolean;
224
/** Adds a border to the left side of the cell */
225
hasLeftBorder?: boolean;
226
/** Minimum width for a sticky column */
227
stickyMinWidth?: string;
228
/** Left offset of a sticky column */
229
stickyLeftOffset?: string;
230
/** Right offset of a sticky column */
231
stickyRightOffset?: string;
232
/** Indicates the <th> is part of a subheader of a nested header */
233
isSubheader?: boolean;
234
/** Visually hidden text accessible only via assistive technologies */
235
screenReaderText?: string;
236
/** Provides an accessible name to the th when it contains only non-text content */
237
'aria-label'?: string;
238
}
239
```
240
241
### Td
242
243
Table data cell component with support for actions, selection, expansion, and editing.
244
245
```typescript { .api }
246
/**
247
* Table data cell component with interactive features
248
* @param props - Td configuration props
249
* @returns Forwarded ref td element
250
*/
251
function Td(props: TdProps): React.ForwardRefExoticComponent<TdProps & React.RefAttributes<HTMLTableDataCellElement>>;
252
253
interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
254
/** The column header the cell corresponds to for mobile viewport */
255
dataLabel?: string;
256
/** Renders a checkbox or radio select */
257
select?: TdSelectType;
258
/** Turns the cell into an actions cell */
259
actions?: TdActionsType;
260
/** Indicates the cell contains an interactive element */
261
hasAction?: boolean;
262
/** Turns the cell into an expansion toggle */
263
expand?: TdExpandType;
264
/** Turns the cell into a compound expansion toggle */
265
compoundExpand?: TdCompoundExpandType;
266
/** Turns the cell into a favorites cell with a star button */
267
favorites?: TdFavoritesType;
268
/** Turns the cell into the first cell in a tree table row */
269
treeRow?: TdTreeRowType;
270
/** Turns the cell into the first cell in a draggable row */
271
draggableRow?: TdDraggableType;
272
/** True to remove padding */
273
noPadding?: boolean;
274
/** Applies pf-v6-c-table__action to td */
275
isActionCell?: boolean;
276
/** Tooltip to show on the body cell */
277
tooltip?: React.ReactNode;
278
/** Callback on mouse enter */
279
onMouseEnter?: (event: any) => void;
280
/** Indicates the column should be sticky */
281
isStickyColumn?: boolean;
282
/** Adds a border to the right side of the cell */
283
hasRightBorder?: boolean;
284
/** Adds a border to the left side of the cell */
285
hasLeftBorder?: boolean;
286
/** Minimum width for a sticky column */
287
stickyMinWidth?: string;
288
/** Left offset of a sticky column */
289
stickyLeftOffset?: string;
290
/** Right offset of a sticky column */
291
stickyRightOffset?: string;
292
}
293
```
294
295
### Caption
296
297
Table caption component for providing table descriptions.
298
299
```typescript { .api }
300
/**
301
* Table caption component
302
* @param props - Caption configuration props
303
* @returns Caption element
304
*/
305
function Caption(props: CaptionProps): React.FunctionComponent<CaptionProps>;
306
307
interface CaptionProps {
308
/** Content rendered inside the caption */
309
children?: React.ReactNode;
310
/** Additional classes added to the caption */
311
className?: string;
312
}
313
```
314
315
## Shared Types
316
317
```typescript { .api }
318
// Base props shared by Th and Td components
319
interface BaseCellProps {
320
/** Content rendered inside the cell */
321
children?: React.ReactNode;
322
/** Additional classes added to the cell */
323
className?: string;
324
/** Element to render */
325
component?: React.ReactNode;
326
/** Modifies cell to center its contents */
327
textCenter?: boolean;
328
/** Style modifier to apply */
329
modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';
330
/** Width percentage modifier */
331
width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;
332
/** Visibility breakpoint modifiers */
333
visibility?: (keyof IVisibility)[];
334
/** Forwarded ref */
335
innerRef?: React.Ref<any>;
336
}
337
338
// Table context for sharing state
339
interface TableContextProps {
340
registerSelectableRow?: () => void;
341
hasAnimations?: boolean;
342
variant?: TableVariant | 'compact';
343
}
344
345
enum TableVariant {
346
compact = 'compact'
347
}
348
349
enum TableGridBreakpoint {
350
none = '',
351
grid = 'grid',
352
gridMd = 'grid-md',
353
gridLg = 'grid-lg',
354
gridXl = 'grid-xl',
355
grid2xl = 'grid-2xl'
356
}
357
```