@patternfly/react-table 5.2.0-prerelease.9 → 5.2.1

package/src/demos/DashboardWrapper.tsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Text,
+  TextContent
+} from '@patternfly/react-core';
+import { DashboardHeader } from './DashboardHeader';
+
+interface DashboardWrapperProps {
+  /** Programmatically manage if the sidebar nav is shown */
+  sidebarNavOpen?: boolean;
+  /** Flag to render sample breadcrumb if custom breadcrumb not passed */
+  hasDefaultBreadcrumb?: boolean;
+  /** Flag to render sample page title if custom title not passed */
+  hasPageTemplateTitle?: boolean;
+  /** Content rendered inside the main section of the page layout (e.g. <PageSection />) */
+  children?: React.ReactNode;
+  /** Additional classes added to the page layout */
+  className?: string;
+  /** Header component (e.g. <Masthead />) */
+  header?: React.ReactNode;
+  /** Sidebar component for a side nav (e.g. <PageSidebar />) */
+  sidebar?: React.ReactNode;
+  /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
+  notificationDrawer?: React.ReactNode;
+  /** Flag indicating Notification drawer in expanded */
+  isNotificationDrawerExpanded?: boolean;
+  /** Flag indicating if breadcrumb width should be limited */
+  isBreadcrumbWidthLimited?: boolean;
+  /** Callback when notification drawer panel is finished expanding. */
+  onNotificationDrawerExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** Skip to content component for the page */
+  skipToContent?: React.ReactElement;
+  /** Sets the value for role on the <main> element */
+  role?: string;
+  /** an id to use for the [role="main"] element */
+  mainContainerId?: string;
+  /** tabIndex to use for the [role="main"] element, null to unset it */
+  mainTabIndex?: number | null;
+  /**
+   * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
+   */
+  isManagedSidebar?: boolean;
+  /** Flag indicating if tertiary nav width should be limited */
+  isTertiaryNavWidthLimited?: boolean;
+  /**
+   * If true, the managed sidebar is initially open for desktop view
+   */
+  defaultManagedSidebarIsOpen?: boolean;
+  /**
+   * Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px
+   * Returns object { mobileView: boolean, windowSize: number }
+   */
+  onPageResize?: ((event: MouseEvent | TouchEvent | React.KeyboardEvent, object: any) => void) | null;
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getBreakpoint?: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getVerticalBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getVerticalBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Breadcrumb component for the page */
+  breadcrumb?: React.ReactNode;
+  /** Tertiary nav component for the page */
+  tertiaryNav?: React.ReactNode;
+  /** Accessible label, can be used to name main section */
+  mainAriaLabel?: string;
+  /** Flag indicating if the tertiaryNav should be in a group */
+  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the breadcrumb should be in a group */
+  isBreadcrumbGrouped?: boolean;
+  /** Additional content of the group */
+  additionalGroupedContent?: React.ReactNode;
+  /** HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists. */
+  mainComponent?: 'main' | 'div';
+  /** Additional props of the group */
+  groupProps?: any;
+  /** Additional props of the breadcrumb */
+  breadcrumbProps?: any;
+}
+
+export const DashboardBreadcrumb = (
+  <Breadcrumb>
+    <BreadcrumbItem>Section home</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Section landing
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+const PageTemplateTitle = (
+  <PageSection variant="light">
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
+
+export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
+  children,
+  mainContainerId,
+  breadcrumb,
+  header,
+  sidebar,
+  sidebarNavOpen,
+  onPageResize,
+  hasDefaultBreadcrumb,
+  notificationDrawer,
+  isNotificationDrawerExpanded,
+  hasPageTemplateTitle,
+  ...pageProps
+}: DashboardWrapperProps) => {
+  const [activeItem, setActiveItem] = useState(1);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => {
+    setActiveItem(result.itemId);
+  };
+
+  let renderedBreadcrumb;
+  if (!hasDefaultBreadcrumb) {
+    renderedBreadcrumb = breadcrumb ?? DashboardBreadcrumb;
+  }
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+          System panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+          Network services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const _sidebar = (
+    <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const PageSkipToContent = (
+    <SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
+      Skip to content
+    </SkipToContent>
+  );
+
+  return (
+    <Page
+      header={header ?? <DashboardHeader />}
+      sidebar={sidebar ?? _sidebar}
+      isManagedSidebar
+      skipToContent={PageSkipToContent}
+      breadcrumb={renderedBreadcrumb}
+      mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
+      notificationDrawer={notificationDrawer}
+      isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+      {...(typeof onPageResize === 'function' && {
+        onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) =>
+          onPageResize(event, resizeObject)
+      })}
+      {...pageProps}
+    >
+      {hasPageTemplateTitle && PageTemplateTitle}
+      {children}
+    </Page>
+  );
+};
+DashboardWrapper.displayName = 'DashboardWrapper';

package/src/demos/Table.md

@@ -0,0 +1,183 @@
+---
+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,
+Avatar,
+Brand,
+Button,
+ButtonVariant,
+Dropdown,
+DropdownGroup,
+DropdownItem,
+DropdownList,
+MastheadBrand,
+MenuToggle,
+ToolbarGroup,
+PageToggleButton,
+Nav,
+NavItem,
+NavList,
+PageSidebar,
+PageSidebarBody,
+} 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 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-table/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';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+## 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/assets/avatarImg.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F0F0F0;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D2D2D2;}
+	.st2{fill:#B8BBBE;}
+	.st3{fill:#D2D2D2;}
+</style>
+<rect class="st0" width="36" height="36"/>
+<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
+<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
+<path class="st3" d="M10.1,36l0.1-3.2c0.2-2.1,1.1-3.1,3.1-3.5l0,6.7h9.4l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2h4.7
+	c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7c-1.2,0.4-2.4,1.2-3.4,2.6
+	C6.7,27,5.8,32.2,5.4,36H10.1z"/>
+<path class="st2" d="M25.9,36l-0.1-3.2c-0.2-2.1-1.1-3.1-3.1-3.5l0,6.7H25.9z"/>
+</svg>

package/src/demos/assets/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/demos/assets/pf-logo.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

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>
+  );
+};

package/src/{docs/demos/table-demos/BulkSelect.jsx → demos/examples/TableBulkSelect.tsx}

@@ -6,44 +6,63 @@ import {
   DropdownItem,
   MenuToggle,
   MenuToggleCheckbox,
+  MenuToggleElement,
   PageSection,
   Pagination,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  PaginationVariant
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
+import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
-export const BulkSelectTableDemo = () => {
+export const TableBulkSelect: React.FunctionComponent = () => {
   const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);
   const [bulkSelection, setBulkSelection] = React.useState('');
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(10);
   const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [selectedRows, setSelectedRows] = React.useState([]);
-  const handleSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => {
-    setPaginatedRows(rows.slice(startIdx, endIdx));
+  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPaginatedRows(rows?.slice(startIdx, endIdx));
     setPage(newPage);
   };
-  const handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => {
+
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
     setPaginatedRows(rows.slice(startIdx, endIdx));
     setPage(newPage);
     setPerPage(newPerPage);
   };
 
-  const setRowSelected = (row, isSelecting = true) =>
+  const setRowSelected = (row: SampleDataRow, isSelecting: boolean) =>
     setSelectedRows((prevSelected) => {
       const otherSelectedRows = prevSelected.filter((r) => r !== row.name);
       return isSelecting ? [...otherSelectedRows, row.name] : otherSelectedRows;
     });
-  const selectAllRows = (isSelecting = true) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []);
-  const selectPageRows = (isSelecting = true) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []);
-  const isRowSelected = (row) => selectedRows.includes(row.name);
 
-  const buildPagination = (variant, isCompact) => (
+  const selectAllRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []);
+
+  const selectPageRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []);
+
+  const isRowSelected = (row: any) => selectedRows.includes(row.name);
+
+  const buildPagination = (variant: 'bottom' | 'top' | PaginationVariant, isCompact: boolean) => (
     <Pagination
       isCompact={isCompact}
       itemCount={rows.length}
@@ -72,10 +91,11 @@ export const BulkSelectTableDemo = () => {
         <DropdownItem value="all">Select all ({rows.length} items)</DropdownItem>
       </>
     );
+
     return (
       <Dropdown
         role="menu"
-        onSelect={(_ev, value) => {
+        onSelect={(_event: React.MouseEvent<Element, MouseEvent>, value: string) => {
           if (value === 'all') {
             selectAllRows(bulkSelection !== 'all');
           } else if (value === 'page') {
@@ -83,11 +103,11 @@ export const BulkSelectTableDemo = () => {
           } else {
             setSelectedRows([]);
           }
-          setBulkSelection(value);
+          setBulkSelection(value as string);
         }}
         isOpen={isBulkSelectDropdownOpen}
-        onOpenChange={(isOpen) => setIsBulkSelectDropdownOpen(isOpen)}
-        toggle={(toggleRef) => (
+        onOpenChange={(isOpen: boolean) => setIsBulkSelectDropdownOpen(isOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
           <MenuToggle
             ref={toggleRef}
             isExpanded={isBulkSelectDropdownOpen}
@@ -122,7 +142,7 @@ export const BulkSelectTableDemo = () => {
         <ToolbarGroup>
           <ToolbarItem variant="bulk-select">{buildBulkSelectDropdown()}</ToolbarItem>
         </ToolbarGroup>
-        <ToolbarItem variant="pagination">{buildPagination('top')}</ToolbarItem>
+        <ToolbarItem variant="pagination">{buildPagination('top', false)}</ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
@@ -147,7 +167,8 @@ export const BulkSelectTableDemo = () => {
                 <Td
                   select={{
                     rowIndex,
-                    onSelect: (_event, isSelecting) => setRowSelected(row, isSelecting),
+                    onSelect: (_event: React.FormEvent<HTMLInputElement>, isSelecting: boolean) =>
+                      setRowSelected(row, isSelecting),
                     isSelected: isRowSelected(row)
                   }}
                 />
@@ -159,7 +180,7 @@ export const BulkSelectTableDemo = () => {
             ))}
           </Tbody>
         </Table>
-        {buildPagination('bottom')}
+        {buildPagination('bottom', true)}
       </PageSection>
     </DashboardWrapper>
   );