0
# PatternFly React Table
1

2
PatternFly React Table is a comprehensive React component library that provides composable table components following the PatternFly design system. It offers both basic table rendering capabilities and advanced features like sorting, selection, expansion, editing, drag-and-drop, and favorites.
3

4
## Package Information
5

6
- **Package Name**: @patternfly/react-table
7
- **Package Type**: npm
8
- **Language**: TypeScript/React
9
- **Installation**: `npm install @patternfly/react-table`
10

11
## Core Imports
12

13
```typescript
14
import {
15
  Table,
16
  Thead,
17
  Tbody,
18
  Tr,
19
  Th,
20
  Td,
21
  Caption
22
} from "@patternfly/react-table";
23
```
24

25
CommonJS:
26

27
```javascript
28
const {
29
  Table,
30
  Thead,
31
  Tbody,
32
  Tr,
33
  Th,
34
  Td,
35
  Caption
36
} = require("@patternfly/react-table");
37
```
38

39
## Basic Usage
40

41
```typescript
42
import { Table, Thead, Tbody, Tr, Th, Td } from "@patternfly/react-table";
43

44
function BasicTable() {
45
  return (
46
    <Table aria-label="Simple table">
47
      <Thead>
48
        <Tr>
49
          <Th>Name</Th>
50
          <Th>Role</Th>
51
          <Th>Department</Th>
52
        </Tr>
53
      </Thead>
54
      <Tbody>
55
        <Tr>
56
          <Td dataLabel="Name">John Doe</Td>
57
          <Td dataLabel="Role">Developer</Td>
58
          <Td dataLabel="Department">Engineering</Td>
59
        </Tr>
60
        <Tr>
61
          <Td dataLabel="Name">Jane Smith</Td>
62
          <Td dataLabel="Role">Designer</Td>
63
          <Td dataLabel="Department">UX</Td>
64
        </Tr>
65
      </Tbody>
66
    </Table>
67
  );
68
}
69
```
70

71
## Architecture
72

73
PatternFly React Table is built around several key components:
74

75
- **Core Components**: Basic table structure components (Table, Thead, Tbody, Tr, Th, Td, Caption)
76
- **Specialized Components**: Pre-built components for common table features (ActionsColumn, SortColumn, SelectColumn)
77
- **Interactive Features**: Built-in support for sorting, selection, expansion, editing, and drag-and-drop
78
- **Layout System**: Responsive design with sticky headers/columns and scrolling containers
79
- **Accessibility**: Full keyboard navigation, screen reader support, and ARIA compliance
80
- **Theming**: Integration with PatternFly design tokens and CSS variables
81

82
## Capabilities
83

84
### Core Table Structure
85

86
Basic table building blocks for creating structured data displays with full accessibility support.
87

88
```typescript { .api }
89
// Main table container
90
function Table(props: TableProps): React.ForwardRefExoticComponent;
91

92
// Table structure components
93
function Thead(props: TheadProps): React.ForwardRefExoticComponent;
94
function Tbody(props: TbodyProps): React.ForwardRefExoticComponent;
95
function Tr(props: TrProps): React.ForwardRefExoticComponent;
96
function Th(props: ThProps): React.ForwardRefExoticComponent;
97
function Td(props: TdProps): React.ForwardRefExoticComponent;
98
function Caption(props: CaptionProps): React.FunctionComponent;
99
```
100

101
[Core Table Structure](./core-components.md)
102

103
### Interactive Features
104

105
Components and functionality for user interactions including sorting, selection, expansion, and actions.
106

107
```typescript { .api }
108
// Specialized interaction components
109
function ActionsColumn(props: ActionsColumnProps): React.ForwardRefExoticComponent;
110
function SortColumn(props: SortColumnProps): React.FunctionComponent;
111
function SelectColumn(props: SelectColumnProps): React.FunctionComponent;
112
function CollapseColumn(props: CollapseColumnProps): React.FunctionComponent;
113
function DraggableCell(props: DraggableCellProps): React.FunctionComponent;
114
function EditColumn(props: EditColumnProps): React.FunctionComponent;
115

116
// Key interaction types
117
type OnSort = (event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData) => void;
118
type OnSelect = (event: React.FormEvent<HTMLInputElement>, isSelected: boolean, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
119
type OnCollapse = (event: React.MouseEvent, rowIndex: number, isOpen: boolean, rowData: IRowData, extraData: IExtraData) => void;
120
```
121

122
[Interactive Features](./interactive-features.md)
123

124
### Content and Display
125

126
Components for rendering and formatting table content with responsive text handling and favorites.
127

128
```typescript { .api }
129
// Content components
130
function TableText(props: TableTextProps): React.FunctionComponent;
131
function ExpandableRowContent(props: ExpandableRowContentProps): React.FunctionComponent;
132
function FavoritesCell(props: FavoritesCellProps): React.FunctionComponent;
133
function HeaderCellInfoWrapper(props: ColumnHelpWrapperProps): React.FunctionComponent;
134

135
// Text formatting options
136
enum WrapModifier {
137
  wrap = 'wrap',
138
  nowrap = 'nowrap',
139
  truncate = 'truncate',
140
  breakWord = 'breakWord',
141
  fitContent = 'fitContent'
142
}
143
```
144

145
[Content and Display](./content-display.md)
146

147
### Editing Capabilities
148

149
Inline editing components for text and select inputs with validation support.
150

151
```typescript { .api }
152
// Editing components
153
function EditableTextCell(props: IEditableTextCell): React.FunctionComponent;
154
function EditableSelectInputCell(props: IEditableSelectInputCell): React.FunctionComponent;
155

156
// Editing event handlers
157
type OnRowEdit = (event: React.MouseEvent<HTMLButtonElement>, type: RowEditType, isEditable?: boolean, rowIndex?: number, validationErrors?: RowErrors) => void;
158
type RowEditType = 'save' | 'cancel' | 'edit';
159
```
160

161
[Editing Capabilities](./editing.md)
162

163
### Layout and Scrolling
164

165
Components for managing table layout, scrolling behavior, and responsive design.
166

167
```typescript { .api }
168
// Layout components
169
function OuterScrollContainer(props: OuterScrollContainerProps): React.FunctionComponent;
170
function InnerScrollContainer(props: InnerScrollContainerProps): React.FunctionComponent;
171
function RowWrapper(props: RowWrapperProps): React.Component;
172
function TreeRowWrapper(props: RowWrapperProps): React.FunctionComponent;
173

174
// Grid breakpoints
175
enum TableGridBreakpoint {
176
  none = '',
177
  grid = 'grid',
178
  gridMd = 'grid-md',
179
  gridLg = 'grid-lg',
180
  gridXl = 'grid-xl',
181
  grid2xl = 'grid-2xl'
182
}
183
```
184

185
[Layout and Scrolling](./layout-scrolling.md)
186

187
### Utilities and Decorators
188

189
Utility functions, decorators, and transformers for customizing table behavior, appearance, and interactions.
190

191
```typescript { .api }
192
// Behavior decorators
193
function selectable(onSelect: OnSelect, selectableRowCaptionText?: string): ITransform;
194
function sortable(onSort: OnSort, options?: ISortBy): ITransform;
195
function cellActions(actions: IActions | IActionsResolver, areActionsDisabled?: IAreActionsDisabled): ITransform;
196
function collapsible(onCollapse: OnCollapse): ITransform;
197
function editable(onRowEdit?: OnRowEdit, validationErrors?: any): ITransform;
198
function favoritable(onFavorite: OnFavorite): ITransform;
199

200
// Layout decorators
201
function wrappable(): ITransform;
202
function breakWord(): ITransform;
203
function fitContent(): ITransform;
204
function nowrap(): ITransform;
205
function truncate(): ITransform;
206
function textCenter(): ITransform;
207
function cellWidth(width: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100): ITransform;
208

209
// Transformers and formatters
210
function defaultTitle(data?: IFormatterValueType): any;
211
function emptyTD(): ITransform;
212
function scopeColTransformer(): ITransform;
213
function emptyCol(label?: IFormatterValueType): ITransform;
214
```
215

216
[Utilities and Decorators](./utilities.md)
217

218
## Types
219

220
```typescript { .api }
221
// Core table props
222
interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps {
223
  'aria-label'?: string;
224
  variant?: TableVariant | 'compact';
225
  borders?: boolean;
226
  gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
227
  role?: string;
228
  isStickyHeader?: boolean;
229
  isTreeTable?: boolean;
230
  isNested?: boolean;
231
  isStriped?: boolean;
232
  isExpandable?: boolean;
233
  hasAnimations?: boolean;
234
  hasNoInset?: boolean;
235
  nestedHeaderColumnSpans?: number[];
236
  selectableRowCaptionText?: string;
237
  ouiaId?: number | string;
238
  ouiaSafe?: boolean;
239
}
240

241
// Cell base props shared by Th and Td
242
interface BaseCellProps {
243
  children?: React.ReactNode;
244
  className?: string;
245
  component?: React.ReactNode;
246
  textCenter?: boolean;
247
  modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';
248
  width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;
249
  visibility?: (keyof IVisibility)[];
250
  innerRef?: React.Ref<any>;
251
}
252

253
// Table variants and grid breakpoints
254
enum TableVariant {
255
  compact = 'compact'
256
}
257

258
enum TableGridBreakpoint {
259
  none = '',
260
  grid = 'grid',
261
  gridMd = 'grid-md', 
262
  gridLg = 'grid-lg',
263
  gridXl = 'grid-xl',
264
  grid2xl = 'grid-2xl'
265
}
266

267
// Row and data structures
268
interface IRow extends RowType {
269
  cells?: (React.ReactNode | IRowCell)[];
270
  isOpen?: boolean;
271
  isEditable?: boolean;
272
  isClickable?: boolean;
273
  isRowSelected?: boolean;
274
  isValid?: boolean;
275
  rowEditValidationRules?: IValidatorDef[];
276
  rowEditBtnAriaLabel?: (idx: number) => string;
277
  rowSaveBtnAriaLabel?: (idx: number) => string;
278
  rowCancelBtnAriaLabel?: (idx: number) => string;
279
  parent?: number;
280
  compoundParent?: number;
281
  fullWidth?: boolean;
282
  noPadding?: boolean;
283
  heightAuto?: boolean;
284
  showSelect?: boolean;
285
  isExpanded?: boolean;
286
  isFirstVisible?: boolean;
287
  isLastVisible?: boolean;
288
  selected?: boolean;
289
  disableSelection?: boolean;
290
  favorited?: boolean;
291
  favoritesProps?: any;
292
  props?: any;
293
}
294

295
interface IRowData extends IRow {
296
  disableActions?: boolean;
297
}
298

299
// Action definitions
300
interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, Pick<ButtonProps, 'variant'> {
301
  isSeparator?: boolean;
302
  itemKey?: string;
303
  title?: React.ReactNode;
304
  isAriaDisabled?: boolean;
305
  tooltipProps?: TooltipProps;
306
  onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
307
  isOutsideDropdown?: boolean;
308
  shouldCloseOnClick?: boolean;
309
}
310

311
type IActions = (IAction | ISeparator)[];
312
type IActionsResolver = (rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[];
313

314
// Sort configuration
315
interface ISortBy {
316
  index?: number;
317
  direction?: 'asc' | 'desc';
318
  defaultDirection?: 'asc' | 'desc';
319
}
320

321
enum SortByDirection {
322
  asc = 'asc',
323
  desc = 'desc'
324
}
325

326
// Validation
327
interface IValidatorDef {
328
  validator: (value: string) => boolean;
329
  errorText: string;
330
  name: string;
331
}
332

333
interface RowErrors {
334
  [name: string]: string[];
335
}
336

337
// Transform and formatter interfaces
338
interface ITransform {
339
  (label?: IFormatterValueType, extra?: IExtra): decoratorReturnType;
340
}
341

342
interface IFormatter {
343
  (data?: IFormatterValueType, extra?: IExtra): formatterValueType & decoratorReturnType;
344
}
345

346
interface decoratorReturnType {
347
  component?: React.ComponentType<any>;
348
  className?: string; 
349
  isVisible?: boolean;
350
  scope?: string;
351
  parentId?: string | number;
352
  [key: string]: any;
353
}
354

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

370
// Column configuration
371
interface IColumn {
372
  title: React.ReactNode;
373
  transforms?: ITransform[];
374
  formatters?: IFormatter[];
375
  cellTransforms?: ITransform[];
376
  cellFormatters?: IFormatter[];
377
  props?: any;
378
  extraParams?: {
379
    sortBy?: ISortBy;
380
    onSort?: OnSort;
381
    onCollapse?: OnCollapse;
382
    onExpand?: OnExpand;
383
    onSelect?: OnSelect;
384
    selectVariant?: 'checkbox' | 'radio';
385
    onRowEdit?: OnRowEdit;
386
    onFavorite?: OnFavorite;
387
    actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
388
    [key: string]: any;
389
  };
390
}
391

392
// Cell configuration
393
interface ICell {
394
  title?: React.ReactNode;
395
  transforms?: ITransform[];
396
  formatters?: IFormatter[];
397
  cellTransforms?: ITransform[];
398
  cellFormatters?: IFormatter[];
399
  props?: any;
400
}
401

402
// Row cell content
403
interface IRowCell<T = any> {
404
  title?: React.ReactNode | RowCellContent<T>;
405
  props?: any;
406
}
407

408
type RowCellContent<T = any> = (
409
  value?: string,
410
  rowIndex?: number,
411
  cellIndex?: number,
412
  props?: T
413
) => void;
414

415
// Additional event handlers
416
type OnExpand = (
417
  event: React.MouseEvent,
418
  rowIndex: number,
419
  colIndex: number,
420
  isOpen: boolean,
421
  rowData: IRowData,
422
  extraData: IExtraData
423
) => void;
424

425
type OnFavorite = (
426
  event: React.MouseEvent,
427
  isFavorited: boolean,
428
  rowIndex: number,
429
  rowData: IRowData,
430
  extraData: IExtraData
431
) => void;
432

433
type OnTreeRowCollapse = (
434
  event: any,
435
  rowIndex: number, 
436
  title: React.ReactNode,
437
  rowData: IRowData
438
) => void;
439
```