## Variations
-PatternFly supports 2 main types of tables:
-
-1. **[Compact table](#compact-spacing):** when you want to show as much data per page as possible.
-2. **[Default table](#default-spacing):** when you don’t have to minimize paging.
+There are 2 main types of tables:
-See [when to use compact vs. default spacing](#compact-vs-default-spacing) for more information about the styling and usage.
+1. **[Default table](#default-spacing):** Use by default when you have plenty of room on a page and can use pagination freely.
+1. **[Compact table](#compact-spacing):** Use when you want to show as much data per page as possible.
-### Numeral styling
+For more usage and styling details, refer to [compact and default spacing](#compact-vs-default-spacing).
-If needed, we offer a font modifier `.pf-v6-m-tabular-nums` that applies tabular styling to numerals. [Learn more about tabular font styling.](/design-foundations/typography#tabular-font-styling)
+### Table capabilities
+Both default and compact tables can be further enhanced and customized with a variety of features and functionalities:
+- [Tabular numerals](#tabular-numerals)
+- [Row striping](#row-striping)
+- [Expansion](#expansion)
+- [Compound expansion](#compound-expansion)
+- [Actionable tables](#actionable-tables)
+- [Comparison](#comparison)
+- [Sorting](#sorting)
+- [Favoriting](#favoriting)
+
+### Tabular numerals
+To apply a tabular style to numerals in a table, we offer a font modifier `.pf-v6-m-tabular-nums`. [Learn more about tabular font styling.](/design-foundations/typography#tabular-font-styling)
+### Row striping
+Row striping can help improve legibility of a table by visually separating rows in large and dense data sets. With row striping enabled, table rows will alternate between `--pf-t--global--background--color--primary--default` and `--pf-t--global--background--color--secondary--default`.
-### Table capabilities
-Every table can be extended with these functionalities:
+
-* [Expandable table](#expandable-table)
-* [Compound expandable table](#compound-expandable-table)
-* [Actionable table](#actionable-table)
-* [Comparison table](#comparison-table)
-* [Row striping](#row-striping)
-* [Sortable table](#sorting-by-columns)
-* [Table with favoriting](#table-with-favoriting)
+#### When to use
+* Tables with 5 or more columns.
+* Virtualized tables (no pagination).
+* Tables with horizontal scrolling.
-### Expandable table
+### Expansion
+Expansion lets you contain and compartmentalize detailed information within a table.
1. **Expand all (optional)**: Expands every row at the same time.
-2. **Expansion:** Expands single row.
+2. **Expansion:** Expands a single row.
3. **Expansion panel:** Contains details associated with a row.
#### When to use
* You have more information than what will comfortably fit inside a row.
* You want to provide a way for advanced users to access information that is not applicable to all users.
-
-### Compound-expandable table
+### Compound expansion
+Compound expansion lets you support multiple expandable sections within a row, like expansion for each cell in a row.
@@ -135,139 +140,132 @@ Every table can be extended with these functionalities:
* You want multiple expansion panels that relate to specific table columns.
* It would not make sense to combine all of this information into a single, simple expansion.
-### Actionable table
-The actionable table provides checkboxes or radio buttons that enable users to select one or more rows in a table. Users may then act on those selections using options in the [toolbar](/components/toolbar/design-guidelines),.
+### Sorting
+You can add column sorting to a table to enable users flexibility in interacting with the data and support easier scanning of table contents.
-
+
-1. **[Bulk selection](/patterns/bulk-selection):** When present, selects all items in a table with checkboxes. If pagination is being used, this will only select items on the current page. See [bulk selection](/patterns/bulk-selection) for more information.
-2. **Checkbox**: Enables a user to select a row. Use when multiple rows can be selected at the same time.
-3. **Radio button**: Enables a user to select a single row at a time. Use when only one row can be selected at a time.
-3. **Global actions:** Actions that can be applied to **all** selected items. If actions in the table are restricted to a single row or object, keep the actions at the row kebab level, instead of in the toolbar.
+1. **Sortable column:** A sort icon is placed to the right of a column header to indicate that sorting is supported. When a user selects the column header, sorting will become active and the icon's arrow will point upwards. Content will first be sorted in ascending order and will toggle between descending sorting upon subsequent icon clicks.
+1. **Hovered sort:** To indicate that the sort icon is actionable, hovering over the icon will change the icon color from `--pf-t--global--icon--color--disabled` to `--pf-t--global--icon--color--subtle`.
+1. **Sorted column:** When sorting is active, both the column header and the sort icon will turn `--pf-t--global--text--color--brand--default` and `--pf-t--global--icon--color--brand--default` respectively, with the sort icon arrow representing the sort direction.
-#### When to use
-* You need to enable a user to select one or more items in the table, for example to make selections in a wizard, or to carry out actions in a full page table.
+#### When to use
+The default sort order for a table should support the primary use case for the application. Not all columns in a table require sort functionality, so you can disable sorting on some columns and enable it on others.
-#### When not to use
-* Users can not take any actions on table items/rows.
+#### Example
+If a table contains 2 attributes (for example, System name and Last sync) you might want to show the most recently synced system at the top of the table, as the default sort column. This would be appropriate since the primary use case for this table is verifying connection success or troubleshooting the system’s connection.
-### Comparison table
+If a table contains 3 attributes (for example, System name, Last sync, and Severity) you may want to show the system with the highest severity, since that is the concern a user should address first.
-For tables used to compare different items against different parameters, you may use a customized version of a table.
+### Favoriting
+You can add support for favoriting, which allows users to favorite a row by clicking a star icon. When a row is favorited, the star fills with `--pf-t--global--icon--color--favorite` and clicking the star again will unfavorite the item. If sorting is enabled, favoriting an item can also move a row to the top or bottom of the list of rows.
-
+
-The comparison table differs from a standard table in the follow ways:
-* The items being compared should be shown as columns.
-* The parameters should be a sticky column on the far left of the table, with each parameter having its own row.
-* The table should contain both horizontal and vertical lines to separate items, aiding content scanning.
-* The table should have a nested header for the items being compared to help visualize the data.
-* (optional) The table can be striped to help scan and compare between the different parameters.
-* (optional) If you choose to add actions, they should be at the individual cell level and not at the row level.
-
-#### Actions in a comparison table
-
-Actions in a comparison table could include:
-* Adding or removing an item for comparison
-* Adding or removing a parameter row for comparison
-* Exporting comparison table
-
-Although you could include the ability to remove certain parameters from inside the table, with an X button at the cell level, it is recommended that the greater management of a table be triggered from an action inside the table toolbar. For example, you could have an “Add to comparison” button in the toolbar that could open a modal in which a user could select the parameters they want to see and/or the items they want to compare.
-
-
-### Row striping
-Row striping can help improve legibility of a table when presenting large amounts of data. With row striping enabled, table rows will alternate between ```--pf-v6-global--BackgroundColor--100``` and ```--pf-v6-global--BackgroundColor--150``` to visually separate dense data sets.
-
-
-
-
+1. **Favorites column**: Allows users to favorite and unfavorite rows in the table by clicking the associated star icon.
+2. **Favorites column header (optional):** Allows users to sort by favorites.
#### When to use
-* Tables with 5 or more columns.
-* Virtualized tables (no pagination).
-* Tables with horizontal scrolling.
-
-### Sorting by columns
-Sorting by columns is possible for any table variation. Enabling the component within a table eases the ability to scan and read through the content. This option is favored over adding sorting functionality to the [toolbar](/components/toolbar/design-guidelines).
+* Users might want to easily access their most used or viewed items in a table.
+* You have a long list of items and want to favorite items by default for discoverability.
+
+### Actionable tables
+Actionable tables include checkboxes or radio buttons that enable users to select 1 or more rows in a table. Users can then act on these selections using options in the [toolbar](/components/toolbar/design-guidelines), like global action buttons.
-
+
-1. **Sortable column:** When a column is sortable, the sort icon will appear to the right of the column header in a [light grey](/design-foundations/colors#typography-and-iconography-colors) color. Sorting will not become active until the user selects the column header. This triggers the arrow to point upwards and the content to be sorted in ascending order.
-3. **Hovered sort:** When a column is sortable, the sort icon will appear to the right of the column header. Upon hover, the icon will change to a [darker grey](/design-foundations/colors#typography-and-iconography-colors) indicating that the icon is actionable.
-2. **Sorted column:** When a column is being sorted by, the column header will turn [blue](/design-foundations/colors#typography-and-iconography-colors) and the sort icon will represent the direction of the sort. Subsequent clicks on the sortable column header will toggle the direction of the sort.
-
-#### When to use
-The default sort order for a table should support the primary use case for the application. All columns in a table do not require sort functionality. That is, you can disable the header sort function on some columns and enable it on others.
+1. **[Bulk selection](/patterns/bulk-selection):** Lets users select all items using a single checkbox. If pagination is being used, this will only select items on the current page.
+1. **Checkbox**: Enables a user to select a row. Use when multiple rows can be selected at the same time.
+1. **Radio button**: Enables a user to select a single row at a time. Use when only 1 row can be selected at a time.
+1. **Global action buttons:** Actions that can be applied to all selected items. If an action is restricted to a single row or object, keep the action in the row's kebab/options menu, instead of in the toolbar.
-#### Example
-If a table contains these two attributes: (System Name | Last Sync) you may want to show the most recently synced system at the top of the table (in other words, it is the default sort column), because a primary use case for this table is verifying that you have successfully connected or troubleshot the system’s connection to Cloud Services.
+#### When to use
+* You need to enable a user to select 1 or more items in the table. For example, to make selections in a wizard or to carry out actions in a full page table.
-If a table contains these three attributes: (System Name | Last Sync | Severity) you may want to show the system with the highest Severity because that is the system the user should tend to first.
+#### When not to use
+* Users cannot take any actions on table items/rows.
-### Table with favoriting
-Adding the ability to favorite is possible for any table variation. Users can set their favorites by clicking the star icon in the favorites row. By default, the star is grey; when an item is favorited, the star becomes yellow. Clicking the star again will unfavorite the item. When an item is favorited or unfavorited, it does not move in the list unless sorting is on.
+### Comparison
+To support comparison, which allows users to compare different items against different parameters, use a custom table.
-
+
-1. **Favorites column**: Allows users to favorite and unfavorite items in the table by clicking the item’s associated star icon.
-2. **Favorites column header (optional):** Allows users to sort by favorites.
+A comparison table differs from a standard table in the following ways:
+* The items being compared should be shown as columns.
+* The parameters should be a sticky column on the far left of the table, with each parameter having its own row.
+* The table should contain both horizontal and vertical lines to separate items, aiding content scanning.
+* The table should have a nested header for the items being compared to help visualize the data.
+* (optional) The table can be striped to help scan and compare between the different parameters.
+* (optional) If you choose to add actions, they should be at the individual cell level and not at the row level.
-#### When to use
-* Users may want to easily access their most used/viewed items in a table.
-* You have a long list of items and want to favorite items by default for discoverability.
+#### Actions in a comparison table
-## Spacing
+Actions in a comparison table could include:
+* Adding or removing an item for comparison.
+* Adding or removing a parameter row for comparison.
+* Exporting the comparison table.
-### Compact vs. default spacing
-Whether to use a table/data list with compact or default spacing is up to you and your use case. However, here is some guidance for when to use which option. You can see examples of each option for comparison.
+Although you could include the ability to remove certain parameters from inside the table (with a remove (X) button at the cell level) we recommend that broader table management be triggered from an action inside the table toolbar. For example, you could have an “Add to comparison” button in the toolbar that opens a modal where a user can select parameters they want to see or the items they want to compare.
-#### Compact spacing
-A table may sometimes need to be compact to make more rows visible at a time. The more rows you can see, the less you need to use [pagination](/components/pagination/design-guidelines). Compact spacing is recommended for data with a simple structure. See an example below.
+## Spacing
+
+### Compact spacing
+If you need to make more rows visible at a time, or if you don't want to use pagination, you can make your table compact. Compact spacing is recommended for data with a simple structure.
**Use compact spacing when:**
-* You need to show as much data as possible on 1 page.
-* You need to show data in a small space. For example in modal or wizard.
+* You need to show as much data as possible on a single page.
+* You need to show data in a small space. For example, in a modal or wizard.
* You need to minimize paging.
* Readability is a secondary concern.
+**Example:**
+
-**Example:**
-* You can see more data on 1 page.
-* You have a good overview about the structure of data.
-* The structure of data is simple, informative and have less visual elements.
+* You can see more data on a single page.
+* You have a good overview of the structure of data.
+* The structure of the data is simple, informative and there are fewer visual elements.
-#### Default spacing
-A table may sometimes need more space for rich graphical data. See an example below.
+### Default spacing
+If your table needs more space for many rows or for rich graphical data, use default spacing.
**Use default spacing when:**
-* You don’t have to display a lot of data on one page.
+* You don’t have to display a lot of data on a single page.
* You use many visual indicators that are placed in columns, such as icons or charts.
* You don't have to minimize paging.
* Readability is a primary concern.
+**Example:**
+
-**Example:**
-* You can see less data on one page.
-* You will need a pagination to see more rows.
-* Data structure includes many visual elements.
+* You can see less data on a page.
+* You will need pagination to see more rows.
+* The data structure includes many visual elements.
-## Tables on mobile
-The PatternFly table is designed to be fully responsive. When columns no longer fit within the width of the viewport, columns are stacked so that data in each row is displayed as sets of attribute-value pairs.
+### Tables on mobile
+The table component is designed to be fully responsive for both desktop and mobile screens. When columns no longer fit within the width of the viewport, they are stacked so that data in each row is displayed as sets of attribute-value pairs.
+
+
+## Placement
+
+Tables should be placed in the body of a page and the table width should be set by the containing element. For example, if a table is placed within a card, the card size decides the table width.
+
+
+
\ No newline at end of file