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

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

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 property 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:

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

With the basic table structure and imports in place, convert the columns definition into an array of ICell 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.

The table should visually appear exactly as it did before:

Now you can see that column cell definitions can be written as basic strings, or written in object form for more advanced cases. Using object notation here is useful when you need to attach and work with arbitrary data to achieve some custom or dynamic rendering of your column cells.

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

1) Convert each row definition from a string array to an array of IRow 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.

The three row definitions look like this:

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

After replacing the string array with an object, the code should look like this:

{
  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 that has a title property equal to the row cell value.

The array items currently look like this:

"Row 1 column 1", "Row 1 column 2", "Row 1 column 3"

After replacing the string array items with objects that have a title property equal to the row cell value, the code should look like this:

{
  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 visually appear exactly as it did before:

Now you can see how row cell definitions can be written as basic strings, or written in object form for more advanced cases. Using object notation here is useful when you need to attach and work with arbitrary data to achieve some custom or dynamic rendering of your row cells.

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

Table components are commonly used to handle large datasets. Specialized visual treatment is available for such cases.

1) Set the table to compact mode

Locate the <Table /> component and add a variant property, 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.

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

In this step, move the row/column definitions to an external file. Then add a few more rows of sample data.

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. Delete the following code:

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:

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

Another way to improve the experience of tables with large datasets is to allow for interactive pagination. The pagination controls give users 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 property 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 this:

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

In this step, add state properties to track how many rows per page the user can display and what current page the user is on within the dataset. Also, introduce a function to handle updating the number of rows per page to show when the user changes this value with the dropdown. This tutorial uses the React hooks api, however you can use a traditional class based approach to achieve the same thing.

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 property of the <Pagination /> component.

Set the property to the numPerPage state property 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 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 property of the <Pagination /> component to the currentPage state property.

page={currentPage}

5) Set the pagination component dropdown options.

Set the perPageOptions property 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.

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 and 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 property of the <Pagination /> component to the handlePerPageSelect function created in step 6.

onPerPageSelect={handlePerPageSelect}

The rendered output should look like this:

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

Add functionality for paginating the table's dataset.

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 property 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 created in step 1.

rows={rows}

Note: The itemCount property for the pagination component will still reference the defaultRows constant. Pagination's itemCount property needs to be aware of the total number of rows in the entire dataset, not the number of rows 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 property 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 this:

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

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