0
# Interactive Features
1

2
Components and functionality for user interactions including sorting, selection, expansion, and actions. These features enable rich user experiences while maintaining accessibility.
3

4
## Capabilities
5

6
### ActionsColumn
7

8
Pre-built actions dropdown column component with support for both dropdown and outside-dropdown actions.
9

10
```typescript { .api }
11
/**
12
 * Pre-built actions dropdown column component
13
 * @param props - ActionsColumn configuration props
14
 * @returns Forwarded ref component
15
 */
16
function ActionsColumn(props: ActionsColumnProps): React.ForwardRefExoticComponent<ActionsColumnProps & React.RefAttributes<HTMLElement>>;
17

18
interface ActionsColumnProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
19
  /** Actions to be rendered within or without the action dropdown */
20
  items: IAction[];
21
  /** Indicates whether the actions dropdown is disabled */
22
  isDisabled?: boolean;
23
  /** Data of the row the action dropdown is located */
24
  rowData?: IRowData;
25
  /** Extra data of a row */
26
  extraData?: IExtraData;
27
  /** Custom actions toggle for the actions dropdown */
28
  actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
29
  /** Additional properties for the actions dropdown popper */
30
  popperProps?: any;
31
  /** Ref to forward to the first item in the popup menu */
32
  firstActionItemRef?: React.Ref<HTMLButtonElement>;
33
  /** Flag indicating that the dropdown's onOpenChange callback should not be called */
34
  isOnOpenChangeDisabled?: boolean;
35
}
36

37
interface CustomActionsToggleProps {
38
  onToggle: (event: React.MouseEvent | React.KeyboardEvent) => void;
39
  isOpen: boolean;
40
  isDisabled: boolean;
41
  toggleRef: React.Ref<any>;
42
}
43
```
44

45
**Usage Examples:**
46

47
```typescript
48
import { ActionsColumn } from "@patternfly/react-table";
49

50
// Basic actions column
51
const actions = [
52
  {
53
    title: 'Edit',
54
    onClick: (event, rowIndex, rowData) => console.log('Edit:', rowData)
55
  },
56
  {
57
    title: 'Delete',
58
    onClick: (event, rowIndex, rowData) => console.log('Delete:', rowData)
59
  },
60
  {
61
    isSeparator: true
62
  },
63
  {
64
    title: 'Archive',
65
    onClick: (event, rowIndex, rowData) => console.log('Archive:', rowData)
66
  }
67
];
68

69
<Td>
70
  <ActionsColumn items={actions} />
71
</Td>
72

73
// With outside dropdown actions
74
const actionsWithOutside = [
75
  {
76
    title: 'Quick Edit',
77
    isOutsideDropdown: true,
78
    onClick: (event, rowIndex, rowData) => console.log('Quick edit')
79
  },
80
  {
81
    title: 'Settings',
82
    onClick: (event, rowIndex, rowData) => console.log('Settings')
83
  }
84
];
85

86
<Td>
87
  <ActionsColumn 
88
    items={actionsWithOutside}
89
    popperProps={{ position: 'right' }}
90
  />
91
</Td>
92
```
93

94
### SortColumn
95

96
Sortable column header component with visual sort indicators and optional favorite functionality.
97

98
```typescript { .api }
99
/**
100
 * Sortable column header component
101
 * @param props - SortColumn configuration props
102
 * @returns SortColumn component
103
 */
104
function SortColumn(props: SortColumnProps): React.FunctionComponent<SortColumnProps>;
105

106
interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
107
  children?: React.ReactNode;
108
  className?: string;
109
  /** Indicates if this column is currently sorted */
110
  isSortedBy?: boolean;
111
  /** Callback function when sort is triggered */
112
  onSort?: Function;
113
  /** Current sort direction */
114
  sortDirection?: string;
115
  /** Tooltip content for the sort button */
116
  tooltip?: React.ReactNode;
117
  /** Additional tooltip properties */
118
  tooltipProps?: Omit<TooltipProps, 'content'>;
119
  /** Whether tooltip has default behavior */
120
  tooltipHasDefaultBehavior?: boolean;
121
  /** Props for the favorite button (for favoritable sorting) */
122
  favoriteButtonProps?: FavoriteButtonProps;
123
}
124

125
enum SortByDirection {
126
  asc = 'asc',
127
  desc = 'desc'
128
}
129
```
130

131
**Usage Examples:**
132

133
```typescript
134
import { SortColumn, SortByDirection } from "@patternfly/react-table";
135

136
// Basic sortable column
137
<Th>
138
  <SortColumn
139
    isSortedBy={sortBy.index === 0}
140
    sortDirection={sortBy.direction}
141
    onSort={() => handleSort(0)}
142
  >
143
    Name
144
  </SortColumn>
145
</Th>
146

147
// Sortable with favorites
148
<Th>
149
  <SortColumn
150
    isSortedBy={sortBy.index === 1}
151
    sortDirection={sortBy.direction}
152
    onSort={() => handleSort(1)}
153
    favoriteButtonProps={{
154
      favorited: favorites.includes(1),
155
      onClick: () => toggleFavorite(1)
156
    }}
157
  >
158
    Priority
159
  </SortColumn>
160
</Th>
161
```
162

163
### SelectColumn
164

165
Selection column component supporting both checkbox and radio button variants.
166

167
```typescript { .api }
168
/**
169
 * Selection column component
170
 * @param props - SelectColumn configuration props
171
 * @returns SelectColumn component
172
 */
173
function SelectColumn(props: SelectColumnProps): React.FunctionComponent<SelectColumnProps>;
174

175
interface SelectColumnProps {
176
  name?: string;
177
  children?: React.ReactNode;
178
  className?: string;
179
  /** Callback when selection changes */
180
  onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
181
  /** Selection variant - checkbox or radio */
182
  selectVariant?: RowSelectVariant;
183
  /** Tooltip text to display */
184
  tooltip?: React.ReactNode;
185
  /** Additional tooltip properties */
186
  tooltipProps?: Omit<TooltipProps, 'content'>;
187
}
188

189
enum RowSelectVariant {
190
  radio = 'radio',
191
  checkbox = 'checkbox'
192
}
193
```
194

195
### CollapseColumn
196

197
Column component for expand/collapse functionality with toggle button.
198

199
```typescript { .api }
200
/**
201
 * Column component for expand/collapse functionality
202
 * @param props - CollapseColumn configuration props
203
 * @returns CollapseColumn component
204
 */
205
function CollapseColumn(props: CollapseColumnProps): React.FunctionComponent<CollapseColumnProps>;
206

207
interface CollapseColumnProps {
208
  id?: string;
209
  className?: string;
210
  children?: React.ReactNode;
211
  /** Callback when toggle button is clicked */
212
  onToggle?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
213
  /** Whether the content is currently open/expanded */
214
  isOpen?: boolean;
215
  /** Accessible label for the toggle button */
216
  'aria-label'?: string;
217
  /** Visual variant for compact tables */
218
  variant?: 'compact';
219
}
220
```
221

222
### DraggableCell
223

224
Cell component with drag handle for row reordering functionality.
225

226
```typescript { .api }
227
/**
228
 * Cell component with drag handle for row reordering
229
 * @param props - DraggableCell configuration props
230
 * @returns DraggableCell component
231
 */
232
function DraggableCell(props: DraggableCellProps): React.FunctionComponent<DraggableCellProps>;
233

234
interface DraggableCellProps {
235
  /** Unique identifier for the draggable element */
236
  id: string;
237
  className?: string;
238
  /** Click handler for the drag button */
239
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
240
  /** Accessible label for the drag button */
241
  'aria-label'?: string;
242
}
243
```
244

245
### EditColumn
246

247
Column component providing edit, save, and cancel controls for inline editing.
248

249
```typescript { .api }
250
/**
251
 * Column component for inline editing controls
252
 * @param props - EditColumn configuration props
253
 * @returns EditColumn component
254
 */
255
function EditColumn(props: EditColumnProps): React.FunctionComponent<EditColumnProps>;
256

257
interface EditColumnProps {
258
  name?: string;
259
  className?: string;
260
  /** Row edit event handler */
261
  onClick?: OnRowEdit;
262
  /** Whether the row is currently being edited */
263
  editing?: boolean;
264
  /** Whether the current edit state is valid */
265
  valid?: boolean;
266
  /** Accessible label for the save button */
267
  saveAriaLabel: string;
268
  /** Accessible label for the cancel button */
269
  cancelAriaLabel: string;
270
  /** Accessible label for the edit button */
271
  editAriaLabel: string;
272
}
273
```
274

275
## Interaction Types and Handlers
276

277
### Sort Functionality
278

279
```typescript { .api }
280
// Sort event handler type
281
type OnSort = (
282
  event: React.MouseEvent,
283
  columnIndex: number,
284
  sortByDirection: SortByDirection,
285
  extraData: IExtraColumnData
286
) => void;
287

288
// Sort configuration
289
interface ISortBy {
290
  /** Index of the current sorted column */
291
  index?: number;
292
  /** Current sort direction */
293
  direction?: 'asc' | 'desc';
294
  /** Default sorting direction */
295
  defaultDirection?: 'asc' | 'desc';
296
}
297

298
// Th sort configuration
299
interface ThSortType {
300
  /** Click callback on the sortable cell */
301
  onSort?: OnSort;
302
  /** Currently active column's index and direction */
303
  sortBy: ISortBy;
304
  /** The column index */
305
  columnIndex: number;
306
  /** Accessible text for the sort button */
307
  'aria-label'?: string;
308
  /** True to make this a favoritable sorting cell */
309
  isFavorites?: boolean;
310
  /** Props for the favorite button */
311
  favoriteButtonProps?: FavoriteButtonProps;
312
}
313
```
314

315
### Selection Functionality
316

317
```typescript { .api }
318
// Selection event handler type
319
type OnSelect = (
320
  event: React.FormEvent<HTMLInputElement>,
321
  isSelected: boolean,
322
  rowIndex: number,
323
  rowData: IRowData,
324
  extraData: IExtraData
325
) => void;
326

327
// Th selection configuration
328
interface ThSelectType {
329
  /** Callback on select */
330
  onSelect?: OnSelect;
331
  /** Whether the cell is selected */
332
  isSelected: boolean;
333
  /** Flag indicating the select checkbox in the th is disabled */
334
  isHeaderSelectDisabled?: boolean;
335
  /** Whether to disable the selection */
336
  isDisabled?: boolean;
337
  /** Additional props forwarded to select rowData */
338
  props?: any;
339
}
340

341
// Td selection configuration
342
interface TdSelectType {
343
  /** The selectable variant */
344
  variant?: 'checkbox' | 'radio';
345
  /** Callback on select */
346
  onSelect?: OnSelect;
347
  /** Whether the cell is selected */
348
  isSelected: boolean;
349
  /** Whether the selection is disabled */
350
  isDisabled?: boolean;
351
  /** The row index */
352
  rowIndex: number;
353
  /** Additional props forwarded to select rowData */
354
  props?: any;
355
}
356
```
357

358
### Expansion Functionality
359

360
```typescript { .api }
361
// Collapse/expand event handler types
362
type OnCollapse = (
363
  event: React.MouseEvent,
364
  rowIndex: number,
365
  isOpen: boolean,
366
  rowData: IRowData,
367
  extraData: IExtraData
368
) => void;
369

370
type OnExpand = (
371
  event: React.MouseEvent,
372
  rowIndex: number,
373
  colIndex: number,
374
  isOpen: boolean,
375
  rowData: IRowData,
376
  extraData: IExtraData
377
) => void;
378

379
// Th expand configuration
380
interface ThExpandType {
381
  /** On toggling the expansion */
382
  onToggle?: OnCollapse;
383
  /** Whether all are expanded */
384
  areAllExpanded: boolean;
385
  /** Alternative aria label */
386
  collapseAllAriaLabel: string;
387
}
388

389
// Td expand configuration
390
interface TdExpandType {
391
  /** Flag indicating the child row associated with this cell is expanded */
392
  isExpanded: boolean;
393
  /** The row index */
394
  rowIndex: number;
395
  /** The column index */
396
  columnIndex?: number;
397
  /** On toggling the expansion */
398
  onToggle?: OnCollapse;
399
  /** Id prefix for expandable rows */
400
  expandId?: string;
401
}
402

403
// Td compound expand configuration
404
interface TdCompoundExpandType {
405
  /** Determines if the corresponding expansion row is open */
406
  isExpanded: boolean;
407
  /** Callback on toggling of the expansion */
408
  onToggle?: OnExpand;
409
  /** Id prefix for expandable cells */
410
  expandId?: string;
411
  /** The row index */
412
  rowIndex?: number;
413
  /** The column index */
414
  columnIndex?: number;
415
}
416
```
417

418
### Actions Functionality
419

420
```typescript { .api }
421
// Action definitions
422
interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, Pick<ButtonProps, 'variant'> {
423
  /** Flag indicating an item on actions menu is a separator */
424
  isSeparator?: boolean;
425
  /** Key of actions menu item */
426
  itemKey?: string;
427
  /** Content to display in the actions menu item */
428
  title?: React.ReactNode;
429
  /** Render item as aria-disabled option */
430
  isAriaDisabled?: boolean;
431
  /** Props for adding a tooltip to a menu item */
432
  tooltipProps?: TooltipProps;
433
  /** Click handler for the actions menu item */
434
  onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
435
  /** Flag indicating this action should be placed outside the actions menu */
436
  isOutsideDropdown?: boolean;
437
  /** Flag indicating whether the actions dropdown should close after an item is clicked */
438
  shouldCloseOnClick?: boolean;
439
}
440

441
interface ISeparator extends IAction {
442
  isSeparator: boolean;
443
}
444

445
type IActions = (IAction | ISeparator)[];
446
type IActionsResolver = (rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[];
447
type IAreActionsDisabled = (rowData: IRowData, extraData: IExtraData) => boolean;
448

449
// Td actions configuration
450
interface TdActionsType {
451
  /** The row index */
452
  rowIndex?: number;
453
  /** Cell actions */
454
  items: IActions;
455
  /** Whether the actions are disabled */
456
  isDisabled?: boolean;
457
  /** Actions dropdown position */
458
  dropdownPosition?: 'right' | 'left';
459
  /** Actions dropdown direction */
460
  dropdownDirection?: 'up' | 'down';
461
  /** The container to append the dropdown menu to */
462
  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
463
  /** Custom toggle for the actions menu */
464
  actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
465
}
466
```
467

468
### Favorites Functionality
469

470
```typescript { .api }
471
// Favorite event handler type
472
type OnFavorite = (
473
  event: React.MouseEvent,
474
  isFavorited: boolean,
475
  rowIndex: number,
476
  rowData: IRowData,
477
  extraData: IExtraData
478
) => void;
479

480
// Td favorites configuration
481
interface TdFavoritesType {
482
  /** Whether the corresponding row is favorited */
483
  isFavorited: boolean;
484
  /** Callback on clicking the favorites button */
485
  onFavorite?: OnFavorite;
486
  /** The row index */
487
  rowIndex?: number;
488
  /** Additional props forwarded to the FavoritesCell */
489
  props?: any;
490
}
491

492
// Favorite button props
493
interface FavoriteButtonProps extends ButtonProps {
494
  /** Flag if the button is favorited */
495
  favorited?: boolean;
496
}
497
```
498

499
## Extra Data Types
500

501
```typescript { .api }
502
// Data passed to interaction handlers
503
interface IExtraRowData {
504
  rowIndex?: number;
505
  rowKey?: RowKeyType;
506
  id?: string;
507
}
508

509
interface IExtraColumnData {
510
  columnIndex?: number;
511
  column?: IColumn;
512
  property?: string;
513
}
514

515
interface IExtraData extends IExtraColumnData, IExtraRowData {}
516

517
interface IExtra extends IExtraData {
518
  rowData?: IRowData;
519
  className?: string;
520
  ariaLabel?: string;
521
  tooltip?: React.ReactNode;
522
  tooltipProps?: Omit<TooltipProps, 'content'>;
523
  tooltipHasDefaultBehavior?: boolean;
524
}
525
```