Difficulty: beginner
Estimated Time: 30 minutes

In this scenario, learn how to use PatternFly 4 React table.

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

PatternFly React tables are composed using separate components and composable functions, so features are more easily customizable. This course introduces the PatternFly table package, starting with a basic table component structure, defining simple rows/columns, converting simple row/column definitions into object form, and concluding by 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". The columns definition is passed to the cells prop of the Table component which can take the form of Array<ICell | string>. Below is what an ICell 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". The rows definition is passed to the rows prop of the Table or TableBody component, and can take the form of Array<IRow | string[]>. Below is what an IRow should look 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" }
    ]
  }
];