Difficulty: beginner
Estimated Time: 30 minutes

This scenario walks through how to use the PatternFly 4 React table.

PatternFly React tables are based on the Reactabular.js library and extend it with additional functionality.

PatternFly React tables are composed using separate components and composable functions so that features are more easily customizable. This course introduces the PatternFly table package, starting with a basic table component structure and concluding with incorporating pagination controls.

Congratulations! You finished the "table component: beginner" course.

Please fill out a quick survey here

Learn more about PatternFly React:

The PatternFly React table

Step 1 of 9

Introducing PatternFly React table

The following is an example of what the table component structure looks like:

<Table caption="Empty Table" cells={columnsDefinition} rows={rowsDefinition}>
  <TableHeader />
  <TableBody />
</Table>

Columns can be expressed as an array of strings or an array of objects which match the type "ICell". ICell is the name given to the TypeScript interface that represents a cell of the <Table>. The columns definition is passed to the cells property of the <Table> component which can take the form of Array<ICell | string>. Below is what the ICell interface looks like.

export interface ICell {
  title?: string | React.ReactNode;
  transforms?: ITransforms;
  cellTransforms?: ITransforms;
  columnTransforms?: ITransforms;
  formatters?: IFormatters;
  cellFormatters?: IFormatters;
  props?: any;
  data?: any;
  header?: any;
  cell?: any;
  dataLabel?: string;
}

Here are two ways that the same columns definition can be written:

As array of strings:

const columnsDefinition = [
  "First column",
  "Second column",
  "Third column"
]

As array of ICell objects:

const columnsDefinition = [
  { title: "First column" },
  { title: "Second column" },
  { title: "Third column" }
];

Rows can be expressed as a multidimensional array of strings or as an array of objects which match the type "IRow". IRow is the name given to the TypeScript interface that represents a row of the <Table>. The rows definition is passed to the rows property of the <Table> or <TableBody> component, and can take the form of Array<IRow | string[]>. Below is what the IRow interface looks like.

export interface IRow extends RowType {
  cells?: (React.ReactNode | IRowCell)[];
  isOpen?: boolean;
  parent?: number;
  compoundParent?: number;
  props?: any;
  fullWidth?: boolean;
  noPadding?: boolean;
  showSelect?: boolean;
  isExpanded?: boolean;
  isFirstVisible?: boolean;
  isLastVisible?: boolean;
  selected?: boolean;
}

Here are two ways of writing the same rows definition:

As multidimentional array of strings:

const rowsDefinition = [
  ["Row 1 column 1", "Row 1 column 2", "Row 1 column 3"],
  ["Row 2 column 1", "Row 2 column 2", "Row 2 column 3"],
  ["Row 3 column 1", "Row 3 column 2", "Row 3 column 3"]
];

As array of IRow objects:

const rowsDefinition = [
  {
    cells: [
      { title: "Row 1 column 1" },
      { title: "Row 1 column 2" },
      { title: "Row 1 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 2 column 1" },
      { title: "Row 2 column 2" },
      { title: "Row 2 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 3 column 1" },
      { title: "Row 3 column 2" },
      { title: "Row 3 column 3" }
    ]
  }
];

Still have questions? View the latest Table documentation for more information.