0
# Table Utilities
1

2
Utility functions, decorators, and transformers for customizing table behavior and appearance. These utilities enable advanced table functionality through composable transforms and formatters.
3

4
## Capabilities
5

6
### Decorators
7

8
Functions that add interactive behaviors and styling to table cells and headers.
9

10
```typescript { .api }
11
/**
12
 * Makes table rows selectable with checkboxes
13
 * @param onSelect - Selection change handler
14
 * @param selectableRowCaptionText - Screen reader text for row selection
15
 * @param hideCheckbox - Whether to hide checkbox column
16
 * @param isHeaderSelectDisabled - Whether header select is disabled
17
 * @param canSelectAll - Whether "select all" functionality is enabled
18
 * @returns Cell decorator for selection functionality
19
 */
20
function selectable(
21
  onSelect: OnSelect,
22
  selectableRowCaptionText?: string,
23
  hideCheckbox?: boolean,
24
  isHeaderSelectDisabled?: boolean,
25
  canSelectAll?: boolean
26
): ITransform;
27

28
/**
29
 * Makes table headers sortable with click handlers and sort indicators
30
 * @param onSort - Sort change handler
31
 * @param options - Sort configuration options
32
 * @returns Header decorator for sorting functionality
33
 */
34
function sortable(onSort: OnSort, options?: ISortBy): ITransform;
35

36
/**
37
 * Adds action buttons/dropdown to table cells
38
 * @param actions - Array of actions or action resolver function
39
 * @param areActionsDisabled - Function to determine if actions are disabled
40
 * @param actionsToggle - Custom toggle component for actions dropdown
41
 * @returns Cell decorator for action functionality
42
 */
43
function cellActions(
44
  actions: IActions | IActionsResolver,
45
  areActionsDisabled?: IAreActionsDisabled,
46
  actionsToggle?: React.ComponentType<CustomActionsToggleProps>
47
): ITransform;
48

49
/**
50
 * Makes table rows collapsible/expandable
51
 * @param onCollapse - Collapse toggle handler
52
 * @returns Row decorator for collapse functionality
53
 */
54
function collapsible(onCollapse: OnCollapse): ITransform;
55

56
/**
57
 * Adds expanded row content below collapsed rows
58
 * @param expandedRowContent - Content to display when row is expanded
59
 * @returns Row decorator for expanded content
60
 */
61
function expandedRow(expandedRowContent: React.ReactNode): ITransform;
62

63
/**
64
 * Makes table cells editable inline
65
 * @param onRowEdit - Edit action handler
66
 * @param validationErrors - Validation error configuration
67
 * @returns Cell decorator for inline editing
68
 */
69
function editable(onRowEdit?: OnRowEdit, validationErrors?: any): ITransform;
70

71
/**
72
 * Adds favorite/unfavorite functionality to table rows
73
 * @param onFavorite - Favorite toggle handler
74
 * @returns Row decorator for favorites functionality
75
 */
76
function favoritable(onFavorite: OnFavorite): ITransform;
77

78
/**
79
 * Makes favorites column sortable with custom favorite sort logic
80
 * @param onSort - Sort change handler
81
 * @param options - Sort configuration options
82
 * @returns Header decorator for sortable favorites
83
 */
84
function sortableFavorites(onSort: OnSort, options?: ISortBy): ITransform;
85

86
/**
87
 * Enables tree table row functionality with indentation and expand/collapse
88
 * @param onCollapse - Tree row collapse handler
89
 * @param leftOffset - Left indentation offset
90
 * @param icon - Custom expand/collapse icon
91
 * @returns Row decorator for tree functionality
92
 */
93
function treeRow(
94
  onCollapse?: OnTreeRowCollapse,
95
  leftOffset?: number,
96
  icon?: React.ReactNode
97
): ITransform;
98

99
/**
100
 * Enables compound expand functionality for nested table content
101
 * @param onExpand - Compound expand handler
102
 * @returns Cell decorator for compound expansion
103
 */
104
function compoundExpand(onExpand: OnExpand): ITransform;
105

106
/**
107
 * Adds info popover/tooltip functionality to header cells
108
 * @param infoContent - Content to display in info popover
109
 * @param ariaLabel - Accessibility label for info trigger
110
 * @param popoverProps - Additional popover configuration
111
 * @returns Header decorator for info functionality
112
 */
113
function info(
114
  infoContent: React.ReactNode,
115
  ariaLabel?: string,
116
  popoverProps?: any
117
): ITransform;
118

119
/**
120
 * Sets column as header column with proper scope attributes
121
 * @returns Header decorator for column headers
122
 */
123
function headerCol(): ITransform;
124
```
125

126
### Text Formatting Decorators
127

128
Functions that control text wrapping and layout behavior in table cells.
129

130
```typescript { .api }
131
/**
132
 * Allows text to wrap normally within table cells
133
 * @returns Cell decorator for text wrapping
134
 */
135
function wrappable(): ITransform;
136

137
/**
138
 * Forces text to break at word boundaries when needed
139
 * @returns Cell decorator for word breaking
140
 */
141
function breakWord(): ITransform;
142

143
/**
144
 * Sizes cell content to fit available space
145
 * @returns Cell decorator for fit content sizing  
146
 */
147
function fitContent(): ITransform;
148

149
/**
150
 * Prevents text from wrapping in table cells
151
 * @returns Cell decorator for no-wrap text
152
 */
153
function nowrap(): ITransform;
154

155
/**
156
 * Truncates overflowing text with ellipsis
157
 * @returns Cell decorator for text truncation
158
 */
159
function truncate(): ITransform;
160

161
/**
162
 * Centers text horizontally within table cells
163
 * @returns Cell decorator for center text alignment
164
 */
165
function textCenter(): ITransform;
166
```
167

168
### Cell Width Decorators
169

170
Functions for controlling column width behavior.
171

172
```typescript { .api }
173
/**
174
 * Sets specific width percentage for table columns
175
 * @param width - Width percentage (10-100)
176
 * @returns Cell decorator for width control
177
 */
178
function cellWidth(width: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100): ITransform;
179
```
180

181
### Visibility Decorators
182

183
Functions for responsive visibility control.
184

185
```typescript { .api }
186
/**
187
 * Controls cell visibility at different responsive breakpoints
188
 * @param visibility - Array of breakpoint visibility settings
189
 * @returns Cell decorator for responsive visibility
190
 */
191
function classNames(visibility: (keyof IVisibility)[]): ITransform;
192

193
/**
194
 * Visibility breakpoint enumeration for responsive table behavior
195
 */
196
enum Visibility {
197
  hidden = 'hidden',
198
  hiddenOnSm = 'hiddenOnSm',
199
  hiddenOnMd = 'hiddenOnMd',
200
  hiddenOnLg = 'hiddenOnLg',
201
  hiddenOnXl = 'hiddenOnXl',
202
  hiddenOn2Xl = 'hiddenOn2Xl',
203
  visibleOnSm = 'visibleOnSm',
204
  visibleOnMd = 'visibleOnMd',
205
  visibleOnLg = 'visibleOnLg',
206
  visibleOnXl = 'visibleOnXl',
207
  visibleOn2Xl = 'visibleOn2Xl'
208
}
209
```
210

211
### Transformers
212

213
Low-level functions for manipulating table cell and row properties.
214

215
```typescript { .api }
216
/**
217
 * Creates empty table data cell
218
 * @returns Transform for empty TD element
219
 */
220
function emptyTD(): ITransform;
221

222
/**
223
 * Adds column scope to table headers
224
 * @returns Transform for column scope attribute
225
 */
226
function scopeColTransformer(): ITransform;
227

228
/**
229
 * Creates empty column header with conditional scope
230
 * @param label - Column label for scope determination
231
 * @returns Transform for empty column configuration
232
 */
233
function emptyCol(label?: IFormatterValueType): ITransform;
234

235
/**
236
 * Maps parent row ID for hierarchical table structures
237
 * @param value - Cell value
238
 * @param extra - Extra data containing row information
239
 * @returns Transform with parent ID property
240
 */
241
function parentId(value?: IFormatterValueType, extra?: IExtra): ITransform;
242

243
/**
244
 * Maps row data properties to cell props
245
 * @param label - Cell label
246
 * @param extra - Extra data containing property and row data
247
 * @returns Transform with mapped properties
248
 */
249
function mapProps(label?: IFormatterValueType, extra?: IExtra): ITransform;
250
```
251

252
### Formatters
253

254
Functions for formatting and displaying table cell content.
255

256
```typescript { .api }
257
/**
258
 * Default formatter that extracts title property or returns data as-is
259
 * @param data - Cell data to format
260
 * @returns Formatted cell content
261
 */
262
function defaultTitle(data?: IFormatterValueType): any;
263
```
264

265
### Header Utilities
266

267
Functions for generating and configuring table headers with transforms and formatters.
268

269
```typescript { .api }
270
/**
271
 * Generate header configuration with transforms and formatters
272
 * @param header - Header object with transforms, formatters, and column transforms
273
 * @param title - Header title/label
274
 * @param transforms - Array of transform functions to apply
275
 * @param formatters - Array of formatter functions to apply
276
 * @param cellTransforms - Cell-specific transform functions
277
 * @returns Complete header configuration object
278
 */
279
function generateHeader(
280
  header: any,
281
  title: React.ReactNode,
282
  transforms?: ITransform[],
283
  formatters?: IFormatter[],
284
  cellTransforms?: ITransform[]
285
): ICell;
286

287
/**
288
 * Build table headers from column definitions
289
 * @param columns - Array of column definitions
290
 * @param sortBy - Current sort configuration
291
 * @param onSort - Sort change handler
292
 * @param onSelect - Selection change handler
293
 * @param canSelectAll - Whether select all is enabled
294
 * @param selectableRowCaptionText - Screen reader text for selection
295
 * @returns Array of configured header objects
296
 */
297
function buildHeaders(
298
  columns: IColumn[],
299
  sortBy?: ISortBy,
300
  onSort?: OnSort,
301
  onSelect?: OnSelect,
302
  canSelectAll?: boolean,
303
  selectableRowCaptionText?: string
304
): ICell[];
305

306
/**
307
 * Build table rows from data with applied transforms and formatters
308
 * @param data - Array of row data
309
 * @param columns - Column configuration
310
 * @param actions - Row actions configuration
311
 * @param areActionsDisabled - Function to check if actions are disabled
312
 * @param onSelect - Selection handler
313
 * @param onCollapse - Collapse handler
314
 * @param onRowEdit - Edit handler
315
 * @param onFavorite - Favorite handler
316
 * @returns Array of configured row objects
317
 */
318
function buildRows(
319
  data: any[],
320
  columns: IColumn[],
321
  actions?: IActions | IActionsResolver,
322
  areActionsDisabled?: IAreActionsDisabled,
323
  onSelect?: OnSelect,
324
  onCollapse?: OnCollapse,
325
  onRowEdit?: OnRowEdit,
326
  onFavorite?: OnFavorite
327
): IRow[];
328
```
329

330
## Types
331

332
```typescript { .api }
333
// Transform function signature
334
interface ITransform {
335
  (label?: IFormatterValueType, extra?: IExtra): decoratorReturnType;
336
}
337

338
// Formatter function signature
339
interface IFormatter {
340
  (data?: IFormatterValueType, extra?: IExtra): formatterValueType & decoratorReturnType;
341
}
342

343
// Decorator return type with additional properties
344
interface decoratorReturnType {
345
  component?: React.ComponentType<any>;
346
  className?: string;
347
  isVisible?: boolean;
348
  scope?: string;
349
  parentId?: string | number;
350
  [key: string]: any;
351
}
352

353
// Visibility configuration interface
354
interface IVisibility {
355
  hidden: string;
356
  hiddenOnSm: string;
357
  hiddenOnMd: string;
358
  hiddenOnLg: string;
359
  hiddenOnXl: string;
360
  hiddenOn2Xl: string;
361
  visibleOnSm: string;
362
  visibleOnMd: string;
363
  visibleOnLg: string;
364
  visibleOnXl: string;
365
  visibleOn2Xl: string;
366
}
367

368
// Column configuration interface
369
interface IColumn {
370
  title: React.ReactNode;
371
  transforms?: ITransform[];
372
  formatters?: IFormatter[];
373
  cellTransforms?: ITransform[];
374
  cellFormatters?: IFormatter[];
375
  props?: any;
376
}
377

378
// Extra data passed to transforms and formatters
379
interface IExtra extends IExtraColumnData, IExtraRowData {
380
  rowIndex?: number;
381
  columnIndex?: number;
382
  property?: string;
383
}
384

385
interface IExtraColumnData {
386
  column?: IColumn;
387
  columnIndex?: number;
388
}
389

390
interface IExtraRowData {
391
  rowIndex?: number;
392
  rowData?: IRowData;
393
}
394
```
395

396
**Usage Examples:**
397

398
```typescript
399
import { 
400
  selectable,
401
  sortable,
402
  cellActions,
403
  collapsible,
404
  wrappable,
405
  cellWidth,
406
  textCenter,
407
  defaultTitle
408
} from "@patternfly/react-table";
409

410
// Create sortable, selectable table with actions
411
const columns = [
412
  {
413
    title: 'Name',
414
    transforms: [sortable(onSort), cellWidth(30)],
415
    formatters: [defaultTitle]
416
  },
417
  {
418
    title: 'Status', 
419
    transforms: [textCenter, cellWidth(20)]
420
  },
421
  {
422
    title: 'Actions',
423
    transforms: [cellActions(actions), cellWidth(20)]
424
  }
425
];
426

427
// Apply row-level transforms
428
const rows = data.map(rowData => ({
429
  cells: [rowData.name, rowData.status, ''],
430
  transforms: [
431
    selectable(onSelect),
432
    collapsible(onCollapse)
433
  ]
434
}));
435
```