The PatternFly React table

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" }
    ]
  }
];

Initialize a basic table

Set up the general structure of the table and add the necessary imports.

Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.

1) Navigate to the src folder and open src/App.js.

2) Copy the following code into the src/App.js file.

Replace all of the content in App.js with the code snippet below.

import * as React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Table, TableHeader, TableBody } from "@patternfly/react-table";
const App = () => {
  return (
    <React.Fragment>
      <Table caption="PatternFly React Table" cells={[]} rows={[]}>
        <TableHeader />
        <TableBody />
      </Table>
    </React.Fragment>
  );
};
export default App;

3) Declare constants for table columns and rows.

Just below the last import statement, and above the line starting with const App = (), add the following code to populate the table with data:

const columns = ["First column", "Second column", "Third column"];
const defaultRows = [
  ["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"]
];

4) Set the cells and rows prop for the <Table /> component.

Locate the <Table /> component and locate the references to empty arrays (cells={[]} rows={[]}). Replace these empty arrays with the row/column definitions that were added in step 3.

cells={columns} rows={defaultRows}

The table should now look like the image below:

Image of what table looks like at the end of step 2.

import * as React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Table, TableHeader, TableBody } from "@patternfly/react-table";
const columns = ["First column", "Second column", "Third column"];
const defaultRows = [
  ["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"]
];
const App = () => {
  return (
    <React.Fragment>
      <Table caption="PatternFly React Table" cells={columns} rows={defaultRows}>
        <TableHeader />
        <TableBody />
      </Table>
    </React.Fragment>
  );
};
export default App;

Express column data as objects

With the basic table structure and imports in place, this step will convert the columns definition into an array of objects.

1) Locate the table columns definition.

It looks like: const columns = ["First column", "Second column", "Third column"];

2) Replace each string in the columns array with an object representation.

For each of the columns, set the object's title property to the string value used previously. For example: "First column" becomes { title: "First column" }, etc.

Apply this transformation to all of the column definitions.

Note: The table should appear exactly as it did before:

Image of what table looks like at the end of step 3.

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

Express row data as objects

1) Convert each row definition from a string array to an array of objects.

For each of the three row definitions, replace the string array with an object, and set the object's cells property to the string array.

It should look like this:

["Row 1 column 1", "Row 1 column 2", "Row 1 column 3"]

becomes:

{
  cells: ["Row 1 column 1", "Row 1 column 2", "Row 1 column 3"]
}

Apply this transformation to all of the row definitions.

The rows definition for the table should eventually look like the code snippet below:

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

2) Convert each row cell definition from a string to an object representation.

For each array item in each row's cells array, replace the string value with an object whose title property is the row cell value.

It should look like this:

{
  cells: ["Row 1 column 1", "Row 1 column 2", "Row 1 column 3"]
}

becomes

{
  cells: [
    { title: "Row 1 column 1" },
    { title: "Row 1 column 2" },
    { title: "Row 1 column 3" }
  ]
}

Apply this transformation to all of the row cell definitions.

Note: String and object definitions can be mixed for the table data.

The table should appear exactly as it did before:

Image of what table looks like at the end of step 4.

const defaultRows = [
  {
    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" }
    ]
  }
];

Set the table in compact mode

A typical case for the table component is the need to handle large datasets elegantly. This is addressed on both the styling and interactivity side. In this step, styling techniques are applied to improve the experience.

1) Set the table to compact mode

Locate the <Table /> component and add a variant prop, setting its value to compact.

variant="compact"

Note: Notice the table head, rows, and cells become compressed and take up less vertical space in order to fit more data on the screen at one time.

Image of what table looks like at the end of step 5.

<Table variant="compact" caption="PatternFly React Table" cells={columns} rows={defaultRows}>
  <TableHeader />
  <TableBody />
</Table>

Move the data to an external file

In this step, move the row/column definitions to an external file and adds a few more rows of sample data to make the next part of the lesson more realistic.

1) Navigate to the src folder and open src/data.js.

2) Copy the below row/column definitions to src/data.js.

export const columns = [
  { title: "First column" },
  { title: "Second column" },
  { title: "Third column" }
];
export const defaultRows = [
  {
    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" }
    ]
  },
  {
    cells: [
      { title: "Row 4 column 1" },
      { title: "Row 4 column 2" },
      { title: "Row 4 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 5 column 1" },
      { title: "Row 5 column 2" },
      { title: "Row 5 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 6 column 1" },
      { title: "Row 6 column 2" },
      { title: "Row 6 column 3" }
    ]
  }
];

3) Navigate back to the src folder and reopen src/App.js.

4) Replace the inline row/column definitions with a reference to the ones from data.js.

1) Import the new row/column definitions.

Place the import statement just below the last import at the top of the file.

import { columns, defaultRows } from './data';

2) Delete the rows and columns definitions in App.js.

The table will now use the definitions imported from data.js instead. The code to delete looks like the following:

const columns = [
  { title: "First column" },
  { title: "Second column" },
  { title: "Third column" }
];
const defaultRows = [
  {
    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" }
    ]
  }
];

The table should render the same as it did before, except with a few more rows:

Image of what table looks like at the end of step 6.

import * as React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Table, TableHeader, TableBody } from "@patternfly/react-table";
import { columns, defaultRows } from './data';
const App = () => {
  return (
    <React.Fragment>
      <Table variant="compact" caption="PatternFly React Table" cells={columns} rows={defaultRows}>
        <TableHeader />
        <TableBody />
      </Table>
    </React.Fragment>
  );
};
export default App;

Add the pagination component

As mentioned in step 5, the table allows for handling the case of large datasets on the interaction side. Do this by incorporating pagination controls that give users more granular control over their view of the data. The pagination component is available via PatternFly React core package @patternfly/react-core.

1) Import the pagination component.

Place the import right after the imports from @patternfly/react-table.

import { Pagination } from '@patternfly/react-core';

2) Add the <Pagination /> component just above the <Table /> component.

  <Pagination />

3) Set the itemCount prop of the <Pagination /> component.

Set itemCount to the total number of rows in the dataset by referencing the defaultRows.length.

itemCount={defaultRows.length}

Note: Notice the pagination component rendered above the table reflecting 1 - 6 of 6 items. The rendered output should look like the image below:

Image of what table looks like at the end of step 7.

import * as React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Table, TableHeader, TableBody } from "@patternfly/react-table";
import { Pagination } from '@patternfly/react-core';
import { columns, defaultRows } from './data';
const App = () => {
  return (
    <React.Fragment>
      <Pagination itemCount={defaultRows.length} />
      <Table variant="compact" caption="PatternFly React Table" cells={columns} rows={defaultRows}>
        <TableHeader />
        <TableBody />
      </Table>
    </React.Fragment>
  );
};
export default App;

Add some state properties for pagination

This step adds the state properties needed to track how many rows per page the user can display and what current page the user is on within the dataset. It also introduces a function to handle updating the number of rows per page to show when the user changes this value with the dropdown.

1) Create a state property to track the number of rows to display per page.

In the src/App.js file, just below the line that starts with const App = () => {, add the following code to the App component. This code creates a state variable called numPerPage and sets the default value to 2, so that users will see 2 rows per page by default.

const defaultPerPage = 2;
const [numPerPage, setNumPerPage] = React.useState(defaultPerPage);

Note: The second parameter in the destructured array returned by React.useState() is the setter for the state variable you're creating. These "setters" are functions that update the corresponding state value.

2) Set the perPage prop of the <Pagination /> component.

Set the property to the numPerPage state property that was added in step A.

perPage={numPerPage}

3) Create a state property to track the current page of the table data.

Add the following code to the App component, just below the previous state property that was added in step 1. Supply a 1 as the default value so that the table intuitively loads with the first page of data.

const [currentPage, setCurrentPage] = React.useState(1);

4) Set the page prop of the <Pagination /> component to the currentPage state property.

page={currentPage}

5) Set the pagination component dropdown options.

Set the perPageOptions prop of the <Pagination /> component so that there are two options in the dropdown, 2 and 3. This controls how many rows per page are shown.

perPageOptions={[{ title: "2", value: 2 }, { title: "3", value: 3 }]}

Note: Notice that the "per page options" dropdown now reflects options of 2 and 3 per page.

Image of what table looks like after step 8, substep 5.

6) Create a function to handle updating the number of rows per page.

Add the following code inside the App component definition (just below the state properties added in steps 1 & 3). Inside this function update the numPerPage state property to the value selected in the dropdown by calling setNumPerPage and passing it the newPerPage parameter.

const handlePerPageSelect = (_evt, newPerPage, newPage = 1, startIdx, endIdx) => {
  setNumPerPage(newPerPage);
};

7) Set the onPerPageSelect prop of the <Pagination /> component to the handlePerPageSelect function created in step 6.

onPerPageSelect={handlePerPageSelect}

Here's what the rendered output should look like:

Image of what table looks like at the end of step 8.

import * as React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Table, TableHeader, TableBody } from "@patternfly/react-table";
import { Pagination } from '@patternfly/react-core';
import { columns, defaultRows } from './data';
const App = () => {
  const defaultPerPage = 2;
  const [numPerPage, setNumPerPage] = React.useState(defaultPerPage);
  const [currentPage, setCurrentPage] = React.useState(1);
  const handlePerPageSelect = (_evt, newPerPage, newPage = 1, startIdx, endIdx) => {
    setNumPerPage(newPerPage);
  };
  return (
    <React.Fragment>
      <Pagination
        onPerPageSelect={handlePerPageSelect}
        perPageOptions={[{ title: "2", value: 2 }, { title: "3", value: 3 }]}
        page={currentPage}
        perPage={numPerPage}
        itemCount={defaultRows.length} />
      <Table variant="compact" caption="PatternFly React Table" cells={columns} rows={defaultRows}>
        <TableHeader />
        <TableBody />
      </Table>
    </React.Fragment>
  );
};
export default App;

Ensure rows reflect current pagination settings

Add functionality for paginating the table's dataset. The functionality includes adding a new state property to track the dynamic rows and adding a few more handler functions to facilitate keeping the table and pagination in sync.

1) Create a new state property to keep track of dynamic rows.

Add the following code just below the other state properties added in step 8. Set the initial value to the defaultRows constant imported from data.js.

const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage));

2) Update the <Table />'s rows prop to use the new rows state property.

Locate the code that sets the rows for the table rows={defaultRows}, and update it to reference the new rows state property you created in step 1.

rows={rows}

Note: the itemCount prop for the pagination component will still reference the defaultRows constant as it needs to be aware of the total number of rows in the entire dataset, not the number of rows that are being shown for a given page within the dataset.

3) Create a function to handle updating the current page.

Copy the following handler function just below the handlePerPageSelect function.

const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => {
  setCurrentPage(newPage);
}

4) Set the onSetPage prop of the <Pagination /> component to the handleSetPage handler function.

onSetPage={handleSetPage}

5) Update the visible rows when page and numPerPage state variables are updated.

Copy the following statement into the handlePerPageSelect and handleSetPage function bodies.

setRows(defaultRows.slice(startIdx, endIdx));

The table should look like the following:

Image of what table looks like at the end of step 9.

At this point, basic pagination of the table data should be in place. Nice!

import * as React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Table, TableHeader, TableBody } from "@patternfly/react-table";
import { Pagination } from '@patternfly/react-core';
import { columns, defaultRows } from './data';
const App = () => {
  const defaultPerPage = 2;
  const [numPerPage, setNumPerPage] = React.useState(defaultPerPage);
  const [currentPage, setCurrentPage] = React.useState(1);
  const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage));
  const handlePerPageSelect = (_evt, newPerPage, newPage = 1, startIdx, endIdx) => {
    setNumPerPage(newPerPage);
    setRows(defaultRows.slice(startIdx, endIdx));
  };
  const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => {
    setCurrentPage(newPage);
    setRows(defaultRows.slice(startIdx, endIdx));
  }
  return (
    <React.Fragment>
      <Pagination
        onSetPage={handleSetPage}
        onPerPageSelect={handlePerPageSelect}
        perPageOptions={[{ title: "2", value: 2 }, { title: "3", value: 3 }]}
        page={currentPage}
        perPage={numPerPage}
        itemCount={defaultRows.length} />
      <Table variant="compact" caption="PatternFly React Table" cells={columns} rows={rows}>
        <TableHeader />
        <TableBody />
      </Table>
    </React.Fragment>
  );
};
export default App;

cd <directory>	Change directory
ls	List directory
echo 'contents' > <file>	Write contents to a file
cat <file>	Output contents of file

i	In Command Mode	Change into Insert Mode, you can now insert and edit text in the file
esc	In Insert Mode	Change into Command Mode, you can now execute commands
:wq	In Command Mode	Save and Exit

Welcome!

Congratulations!

You've completed the scenario!

Scenario Rating

Steps