Table Content Review

[christiemolloy]

@abigaeljamie helped to provide a review of content. Notes are below:

Change this:
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 that 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.

To this:
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(awkward wording rephrase) functionality and custom components.

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.

Change this:
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.

To this:
Columns can be expressed as an array of strings or as 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.

Change this:
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.

To this:
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 it can take the form of Array<IRow | string[]>. Below is what an IRow looks like.

Page 2 of 9

Swap the order here:
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.

So that we have this:
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.

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

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

Page 4 of 9

Change this:

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

To this:
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"]
}

Change this:
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" }
]
}

To this:
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.

Each array item in each row’s cells array looks like this:

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

After replacing the string value with an object whose title property is 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" }
]
}

Page 5 of 9:

Change this:
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.

To this:
Table components are commonly used to handle large datasets. This is addressed on both the styling and interactivity side. In this step, apply styling techniques to improve the experience.

Page 6 of 9:
Change this:
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.

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

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

To this:
The table will now use the definitions imported from data.js instead. Delete the following code:

Page 7 of 9:
Change this:
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.

To this:
As mentioned in step 5, tables can be used to handle large datasets on the interaction side. To handle these large datasets, incorporate pagination controls, which give users more granular control over their view of the data. The pagination component is available via PatternFly React core package @patternfly/react-core.

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

To this:
Notice the pagination component rendered above the table reflecting 1–6 of 6 items. The rendered output should look like this:

Page 8 of 9:

Change this:
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.

To this:
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.

Change this:
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.

To this:
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.

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

To this:
Set the property to the numPerPage state property added in step A.

Change this:
Add the following code to the App component, just below the previous state property that was added in step 1.

To this:
Add the following code to the app component, just below the previous state property added in step 1.

Change this:
Add the following code inside the App component definition (just below the state properties added in steps 1 & 3).

To this:
Add the following code inside the app component definition (just below the state properties added in steps 1 and 3).

Change this:
Here's what the rendered output should look like:

To this:
The rendered output should look like this:

Page 9 of 9:
Change this:
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.

To this:
Add functionality for paginating the table's dataset.

Change this:
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.

To this:
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.

Change this:
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.

To this:
Note: The itemCount prop for the pagination component will still reference the defaultRows constant. It 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.

Change this:
The table should look like the following:

To this:
The table should look like this: