@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.3",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.1",
-    "@patternfly/react-icons": "^6.0.0-alpha.1",
-    "@patternfly/react-styles": "^6.0.0-alpha.1",
-    "@patternfly/react-tokens": "^6.0.0-alpha.1",
+    "@patternfly/react-core": "^6.0.0-alpha.3",
+    "@patternfly/react-icons": "^6.0.0-alpha.3",
+    "@patternfly/react-styles": "^6.0.0-alpha.3",
+    "@patternfly/react-tokens": "^6.0.0-alpha.3",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "abccf530a0a642a4d7b4eda6ada09c5822c855b0"
+  "gitHead": "da36134a3effa82a166c47f5b1c2689869a0f52a"
 }

package/src/components/Table/Table.tsx

@@ -159,8 +159,8 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   const handleKeys = (event: KeyboardEvent) => {
     if (
       isNested ||
-      !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-v5-c-table:not(.pf-m-nested)'))
+      !(tableRef && tableRef.current && tableRef.current.classList.contains(stylesTreeView.modifiers.treeView)) || // implements roving tab-index to tree tables only
+      (tableRef && tableRef.current !== (event.target as HTMLElement).closest(`.${styles.table}:not(.pf-m-nested)`))
     ) {
       return;
     }

package/src/components/Table/Td.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
+import treeViewStyles from '@patternfly/react-styles/css/components/Table/table-tree-view';
 import { BaseCellProps } from './Table';
 import {
   cellActions,
@@ -28,6 +29,10 @@ import {
   TdSelectType,
   TdTreeRowType
 } from './base/types';
+import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
+import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
+import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
+
 export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to.
@@ -253,8 +258,8 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   } = merged;
 
   const treeTableTitleCell =
-    (className && className.includes('pf-v5-c-table__tree-view-title-cell')) ||
-    (mergedClassName && mergedClassName.includes('pf-v5-c-table__tree-view-title-cell'));
+    (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
+    (mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));
 
   React.useEffect(() => {
     setTruncated(
@@ -288,9 +293,9 @@ const TdBase: React.FunctionComponent<TdProps> = ({
       {...props}
       {...(isStickyColumn && {
         style: {
-          '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
-          '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0,
-          '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/Th.tsx

@@ -9,6 +9,9 @@ import { IVisibility } from './utils/decorators/classNames';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
 import { BaseCellProps } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
+import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
+import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
+import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
 
 export interface ThProps
   extends BaseCellProps,
@@ -193,9 +196,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       {...props}
       {...(isStickyColumn && {
         style: {
-          '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
-          '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0,
-          '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/Tr.tsx

@@ -5,7 +5,7 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import { css } from '@patternfly/react-styles';
 import { TableContext } from './Table';
 
-export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps {
+export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
   /** Content rendered inside the <tr> row */
   children?: React.ReactNode;
   /** Additional classes added to the <tr> row  */

package/src/components/Table/examples/Table.md

@@ -54,6 +54,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
+import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
 
 ## Table examples
 

package/src/components/Table/examples/TableCompoundExpandable.tsx

@@ -4,6 +4,7 @@ import { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -110,7 +111,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
               <Tr isExpanded={isRowExpanded}>
                 <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={6}>
                   <ExpandableRowContent>
-                    <div className="pf-v5-u-m-md">
+                    <div className={spacing.mMd}>
                       Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
                       ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
                       sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit

package/src/components/Table/examples/TableMisc.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+/* eslint-disable camelcase */
+import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
 
 interface Repository {
   name: string;
@@ -65,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: 'var(--pf-v5-global--BackgroundColor--150)'
+            backgroundColor: global_BackgroundColor_150.var
           };
           // Some arbitrary logic to demonstrate that cell styles can be based on anything
           const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;

package/src/components/Table/examples/TableNestedHeaders.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 interface PodConnection {
   source: {
@@ -162,7 +163,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className="pf-v5-u-color-200">{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -171,7 +172,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.source.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>
@@ -181,7 +182,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.destination.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>

package/src/components/Table/examples/TableNestedStickyHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 interface PodConnection {
   source: {
@@ -165,7 +166,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className="pf-v5-u-color-200">{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -174,7 +175,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.source.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>
@@ -184,7 +185,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.destination.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>

package/src/components/Table/examples/TableStickyColumnsAndHeader.tsx

@@ -8,7 +8,8 @@ import {
   Td,
   InnerScrollContainer,
   OuterScrollContainer,
-  ThProps
+  ThProps,
+  ISortBy
 } from '@patternfly/react-table';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 
@@ -53,10 +54,10 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
   // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+  const [activeSortIndex, setActiveSortIndex] = React.useState(-1);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = React.useState<ISortBy['direction']>();
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // This example is trivial since our data objects just contain strings, but if the data was more complex
@@ -69,7 +70,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   // Note that we perform the sort as part of the component's render logic and not in onSort.
   // We shouldn't store the list of data in state because we don't want to have to sync that with props.
   let sortedFacts = facts;
-  if (activeSortIndex !== null) {
+  if (activeSortIndex > -1) {
     sortedFacts = facts.sort((a, b) => {
       const aValue = getSortableRowValues(a)[activeSortIndex];
       const bValue = getSortableRowValues(b)[activeSortIndex];

package/src/components/Table/utils/decorators/treeRow.tsx

@@ -31,7 +31,7 @@ export const treeRow =
             {icon}
           </span>
         )}
-        <span className="pf-v5-c-table__text" key="table-text">
+        <span className={styles.tableText} key="table-text">
           {content as React.ReactNode}
         </span>
       </div>
@@ -41,7 +41,7 @@ export const treeRow =
     };
     return {
       component: 'th',
-      className: 'pf-v5-c-table__tree-view-title-cell',
+      className: stylesTreeView.tableTreeViewTitleCell,
       children:
         level !== undefined ? (
           <div className={css(stylesTreeView.tableTreeViewMain)}>
@@ -83,7 +83,7 @@ export const treeRow =
                     onToggleRowDetails && onToggleRowDetails(event, rowIndex, content as React.ReactNode, rowData)
                   }
                 >
-                  <span className="pf-v5-c-table__details-toggle-icon">
+                  <span className={`${styles.table}__details-toggle-icon`}>
                     <EllipsisHIcon aria-hidden />
                   </span>
                 </Button>

package/src/components/Table/utils/transformers.test.tsx

@@ -29,6 +29,9 @@ import {
   IRowData,
   ISeparator
 } from '../TableTypes';
+import { css } from '@patternfly/react-styles';
+import tableStyles from '@patternfly/react-styles/css/components/Table/table';
+import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 
 const testCellActions = async ({
   actions,
@@ -65,7 +68,7 @@ const testCellActions = async ({
     actions = actionResolver(rowData, extraData);
   }
 
-  expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__action' });
+  expect(returnedData).toMatchObject({ className: tableStyles.tableAction });
 
   if (!actions || actions.length === 0) {
     expect(returnedData.children).toBeUndefined();
@@ -73,7 +76,10 @@ const testCellActions = async ({
     const { container } = render(returnedData.children as React.ReactElement<any>);
     await user.click(screen.getAllByRole('button')[0]);
     await waitFor(() =>
-      expect(container.querySelectorAll('.pf-v5-c-dropdown__menu li button')).toHaveLength(expectDisabled ? 0 : 1)
+      // eslint-disable-next-line testing-library/no-container
+      expect(container.querySelectorAll(`.${dropdownStyles.dropdownMenu} li button`)).toHaveLength(
+        expectDisabled ? 0 : 1
+      )
     );
   }
 };
@@ -86,7 +92,7 @@ describe('Transformer functions', () => {
         extraParams: { onSelect }
       };
       const returnedData = selectable('', { column, rowData: {} } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__check' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
 
       const user = userEvent.setup();
 
@@ -103,7 +109,7 @@ describe('Transformer functions', () => {
         extraParams: { onSelect }
       };
       const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: true } } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__check' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
       const user = userEvent.setup();
 
       render(returnedData.children as React.ReactElement<any>);
@@ -128,7 +134,7 @@ describe('Transformer functions', () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: {}, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 });
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__sort' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableSort });
 
       const user = userEvent.setup();
 
@@ -154,7 +160,7 @@ describe('Transformer functions', () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: { index: 0, direction: 'desc' }, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__sort pf-m-selected' });
+      expect(returnedData).toMatchObject({ className: css(tableStyles.tableSort, tableStyles.modifiers.selected) });
 
       const user = userEvent.setup();
 
@@ -226,7 +232,7 @@ describe('Transformer functions', () => {
       extraParams: { onCollapse }
     };
     const returnedData = collapsible('', { rowIndex: 0, rowData, column });
-    expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__toggle' });
+    expect(returnedData).toMatchObject({ className: tableStyles.tableToggle });
 
     const user = userEvent.setup();
 
@@ -332,7 +338,7 @@ describe('Transformer functions', () => {
       extraParams: { onRowEdit }
     };
     const returned = editable('test', { rowIndex: 0, column });
-    expect(returned).toMatchObject({ className: 'pf-v5-c-table__inline-edit-action' });
+    expect(returned).toMatchObject({ className: tableStyles.tableInlineEditAction });
   });
 
   describe('visibility classNames', () => {

package/src/demos/Table.md

@@ -0,0 +1,159 @@
+---
+id: Table
+section: components
+---
+
+import {
+Checkbox,
+Label,
+PageSection,
+ToolbarExpandIconWrapper,
+ToolbarContent,
+Toolbar,
+ToolbarItem,
+SearchInput,
+Masthead,
+MastheadToggle,
+MastheadMain,
+MastheadContent,
+SkipToContent,
+Breadcrumb,
+BreadcrumbItem,
+Page,
+PageSectionVariants,
+TextContent,
+Text,
+Divider } from '@patternfly/react-core';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
+import imgBrand from '@patternfly/react-core/src/components/assets/pfLogo.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+
+## Demos
+
+### Bulk select
+
+```js isFullscreen file="./examples/TableBulkSelect.tsx"
+```
+
+### Expand/collapse all
+
+```js isFullscreen file="./examples/TableExpandCollapseAll.tsx"
+
+```
+
+### Compact
+
+```js isFullscreen file="./examples/TableCompact.tsx"
+
+```
+
+### Compound expansion
+
+```js isFullscreen file="./examples/TableCompoundExpansion.tsx"
+
+```
+
+### Column management
+
+```js isFullscreen file="./examples/TableColumnManagement.tsx"
+
+```
+
+### Column management with draggable
+
+```js isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx"
+```
+
+### Filterable
+
+```js isFullscreen file="./examples/TableFilterable.tsx"
+```
+
+### Sortable - responsive
+
+```js isFullscreen file="./examples/TableSortableResponsive.tsx"
+
+```
+
+### Automatic pagination
+
+The below example illustrates the `isLastFullPageShown` prop, which makes the following changes when the user sets the number of items to display per page to an amount that exceeds the remaining amount of data:
+
+- The component automatically changes the page back to the last full page of results, rather than defaulting to the final page of results.
+
+To demonstrate this, navigate to the last page of data below using the `>>` navigation arrows, then use the dropdown selector to change the view to 5 per page.
+
+- The default behavior would show the last page of results, which would only contain the last two rows (rows 11 - 12).
+- The `isLastFullPageShown` prop navigates you back to the previous page which does contain a full page of 5 rows (rows 6 - 10).
+
+```js isFullscreen file="./examples/TableAutomaticPagination.tsx"
+```
+
+### Static bottom pagination on mobile
+
+```ts isFullscreen file="./examples/TableStaticBottomPagination.tsx"
+
+```
+
+### Sticky header
+
+```js isFullscreen file="./examples/TableStickyHeader.tsx"
+
+```
+
+### Sticky first column
+
+```js isFullscreen file="./examples/TableStickyFirstColumn.tsx"
+
+```
+
+### Sticky columns and header with toolbar
+
+A toolbar may be added above a sticky table either inside or outside the `OuterScrollContainer`.
+
+```js isFullscreen file="../components/Table/examples/TableStickyColumnsAndHeader.tsx"
+
+```
+
+## Empty states
+
+These examples demonstrate the use of an [Empty State component](/components/empty-state) inside of a [Table](/components/table). Empty states are useful in a table when a filter returns no results, while data is loading, or when any type of error or exception condition occurs.
+
+### Empty
+
+```js isFullscreen file="./examples/TableEmptyStateDefault.tsx"
+```
+
+### Loading
+
+```js isFullscreen file="./examples/TableEmptyStateLoading.tsx"
+```
+
+### Error
+
+```js isFullscreen file="./examples/TableEmptyStateError.tsx"
+```

package/src/demos/examples/TableAutomaticPagination.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+export const TableAutomaticPagination: React.FunctionComponent = () => {
+  const columns = {
+    firstColumn: 'First column',
+    secondColumn: 'Second column',
+    thirdColumn: 'Third column'
+  };
+
+  const defaultRows = [
+    { firstColumn: 'Row 1 column 1', secondColumn: 'Row 1 column 2', thirdColumn: 'Row 1 column 3' },
+    { firstColumn: 'Row 2 column 1', secondColumn: 'Row 2 column 2', thirdColumn: 'Row 2 column 3' },
+    { firstColumn: 'Row 3 column 1', secondColumn: 'Row 3 column 2', thirdColumn: 'Row 3 column 3' },
+    { firstColumn: 'Row 4 column 1', secondColumn: 'Row 4 column 2', thirdColumn: 'Row 4 column 3' },
+    { firstColumn: 'Row 5 column 1', secondColumn: 'Row 5 column 2', thirdColumn: 'Row 5 column 3' },
+    { firstColumn: 'Row 6 column 1', secondColumn: 'Row 6 column 2', thirdColumn: 'Row 6 column 3' },
+    { firstColumn: 'Row 7 column 1', secondColumn: 'Row 7 column 2', thirdColumn: 'Row 7 column 3' },
+    { firstColumn: 'Row 8 column 1', secondColumn: 'Row 8 column 2', thirdColumn: 'Row 8 column 3' },
+    { firstColumn: 'Row 9 column 1', secondColumn: 'Row 9 column 2', thirdColumn: 'Row 9 column 3' },
+    { firstColumn: 'Row 10 column 1', secondColumn: 'Row 10 column 2', thirdColumn: 'Row 10 column 3' },
+    { firstColumn: 'Row 11 column 1', secondColumn: 'Row 11 column 2', thirdColumn: 'Row 11 column 3' },
+    { firstColumn: 'Row 12 column 1', secondColumn: 'Row 12 column 2', thirdColumn: 'Row 12 column 3' }
+  ];
+  const defaultPerPage = 10;
+
+  const [perPage, setPerPage] = React.useState(defaultPerPage);
+  const [page, setPage] = React.useState(1);
+  const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage));
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPage(newPage);
+    setRows(defaultRows.slice(startIdx, endIdx));
+  };
+
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+    setRows(defaultRows.slice(startIdx, endIdx));
+  };
+
+  const renderPagination = (variant = 'top') => (
+    <Pagination
+      isCompact
+      itemCount={defaultRows.length}
+      page={page}
+      perPage={perPage}
+      isLastFullPageShown
+      onSetPage={handleSetPage}
+      onPerPageSelect={handlePerPageSelect}
+      perPageOptions={[
+        { title: '3', value: 3 },
+        { title: '5', value: 5 },
+        { title: '12', value: 12 },
+        { title: '20', value: 20 }
+      ]}
+      titles={{
+        paginationAriaLabel: `${variant} pagination`
+      }}
+    />
+  );
+
+  return (
+    <React.Fragment>
+      {renderPagination()}
+      <Table aria-label="Automated Pagination Table Demo">
+        <Thead>
+          <Tr>
+            <Th>{columns.firstColumn}</Th>
+            <Th>{columns.secondColumn}</Th>
+            <Th>{columns.thirdColumn}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {rows.map((row, rowIndex) => (
+            <Tr key={rowIndex}>
+              <>
+                <Td dataLabel={columns.firstColumn}>{row.firstColumn}</Td>
+                <Td dataLabel={columns.secondColumn}>{row.secondColumn}</Td>
+                <Td dataLabel={columns.thirdColumn}>{row.thirdColumn}</Td>
+              </>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </React.Fragment>
+  );
+};