@patternfly/react-table 6.0.0-alpha.9 → 6.0.0-alpha.90

package/src/demos/examples/TableColumnManagementWithDraggable.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Button,
+  Content,
   DataList,
   DataListCheck,
   DataListControl,
@@ -16,9 +17,6 @@ import {
   OverflowMenu,
   OverflowMenuGroup,
   OverflowMenuItem,
-  Text,
-  TextContent,
-  TextVariants,
   MenuToggle
 } from '@patternfly/react-core';
 import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
@@ -427,19 +425,19 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
       isOpen={isModalOpen}
       variant="small"
       description={
-        <TextContent>
-          <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>
+        <Content>
+          <p>Selected categories will be displayed in the table.</p>
           <Button isInline onClick={selectAllColumns} variant="link">
             Select all
           </Button>
-        </TextContent>
+        </Content>
       }
       onClose={handleModalToggle}
       actions={[
         <Button key="save" variant="primary" onClick={onSave}>
           Save
         </Button>,
-        <Button key="cancel" variant="secondary" onClick={handleModalToggle}>
+        <Button key="cancel" variant="link" onClick={handleModalToggle}>
           Cancel
         </Button>
       ]}
@@ -593,14 +591,10 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
         <ToolbarItem variant="overflow-menu">
           <OverflowMenu breakpoint="md">
             <OverflowMenuItem isPersistent>
-              <MenuToggle>
-                <FilterIcon /> Name
-              </MenuToggle>
+              <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
             </OverflowMenuItem>
             <OverflowMenuItem>
-              <MenuToggle variant="plain" aria-label="Sort columns">
-                <SortAmountDownIcon aria-hidden="true" />
-              </MenuToggle>
+              <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
             </OverflowMenuItem>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem>

package/src/demos/examples/TableCompact.tsx

@@ -18,7 +18,7 @@ import {
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableCompact: React.FunctionComponent = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState<boolean>(false);
@@ -72,8 +72,13 @@ export const TableCompact: React.FunctionComponent = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
-                <FilterIcon /> Status
+              <MenuToggle
+                icon={<FilterIcon />}
+                ref={toggleRef}
+                onClick={() => setIsSelectOpen(!isSelectOpen)}
+                isExpanded={isSelectOpen}
+              >
+                Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}

package/src/demos/examples/TableCompoundExpansion.tsx

@@ -20,7 +20,7 @@ import {
 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 { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
@@ -51,7 +51,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
             <Th>{columnNames.description}</Th>
             <Th>{columnNames.date}</Th>
             <Th>{columnNames.status}</Th>
-            <Th />
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>
@@ -84,7 +84,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
   );
 
   const tableToolbar = (
-    <Toolbar id="compact-toolbar" usePageInsets>
+    <Toolbar id="compact-toolbar">
       <ToolbarContent>
         <ToolbarItem>
           <Select
@@ -205,7 +205,8 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
                 <Th>{columnNames.prs}</Th>
                 <Th>{columnNames.workspaces}</Th>
                 <Th>{columnNames.lastCommit}</Th>
-                <Th />
+                <Th screenReaderText="URL" />
+                <Th screenReaderText="Actions" />
               </Tr>
             </Thead>
             {repositories.map((repo, rowIndex) => {

package/src/demos/examples/TableEmptyStateDefault.tsx

@@ -6,15 +6,13 @@ import {
   Card,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions,
   PageSection
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateDefault: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -34,12 +32,12 @@ export const TableEmptyStateDefault: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.sm}>
-                    <EmptyStateHeader
-                      icon={<EmptyStateIcon icon={SearchIcon} />}
-                      titleText="No results found"
-                      headingLevel="h2"
-                    />
+                  <EmptyState
+                    titleText="No results found"
+                    icon={SearchIcon}
+                    headingLevel="h2"
+                    variant={EmptyStateVariant.sm}
+                  >
                     <EmptyStateBody>
                       No results match this filter criteria. Clear all filters and try again.
                     </EmptyStateBody>

package/src/demos/examples/TableEmptyStateError.tsx

@@ -1,18 +1,8 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import {
-  Bullseye,
-  Card,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateHeader,
-  PageSection
-} from '@patternfly/react-core';
+import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -32,12 +22,12 @@ export const TableEmptyStateError: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.sm}>
-                    <EmptyStateHeader
-                      titleText="Unable to connect"
-                      icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
-                      headingLevel="h2"
-                    />
+                  <EmptyState
+                    icon={ExclamationCircleIcon}
+                    titleText="Unable to connect"
+                    headingLevel="h2"
+                    variant={EmptyStateVariant.sm}
+                  >
                     <EmptyStateBody>
                       There was an error retrieving data. Check your connection and reload the page.
                     </EmptyStateBody>

package/src/demos/examples/TableEmptyStateLoading.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import {
-  Bullseye,
-  Card,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateHeader,
-  PageSection,
-  Spinner
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateLoading: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -29,9 +21,7 @@ export const TableEmptyStateLoading: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState>
-                    <EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
-                  </EmptyState>
+                  <EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
                 </Bullseye>
               </Td>
             </Tr>

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
-import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
+import { Card, Content, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 
@@ -22,17 +22,17 @@ const serverData: Server[] = [
     workspaces: 7,
     status: { title: <Label color="green">Running</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Boston</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>2 hours ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node1</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Boston</small>
+        </p>
+        <p>
+          Last Modified<small>2 hours ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node1</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -42,17 +42,17 @@ const serverData: Server[] = [
     workspaces: 17,
     status: { title: <Label color="red">Down</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Atlanta</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>5 hours ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node2</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Atlanta</small>
+        </p>
+        <p>
+          Last Modified<small>5 hours ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node2</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -62,17 +62,17 @@ const serverData: Server[] = [
     workspaces: 3,
     status: { title: <Label color="green">Running</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>San Francisco</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>20 minutes ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node3</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>San Francisco</small>
+        </p>
+        <p>
+          Last Modified<small>20 minutes ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node3</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -82,17 +82,17 @@ const serverData: Server[] = [
     workspaces: 15,
     status: { title: <Label color="blue">Needs Maintenance</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Raleigh</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>10 minutes ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node4</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Raleigh</small>
+        </p>
+        <p>
+          Last Modified<small>10 minutes ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node4</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -102,17 +102,17 @@ const serverData: Server[] = [
     workspaces: 17,
     status: { title: <Label color="orange">Stopped</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Atlanta</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>15 minutes ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node5</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Atlanta</small>
+        </p>
+        <p>
+          Last Modified<small>15 minutes ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node5</small>
+        </p>
+      </Content>
     )
   }
 ];
@@ -164,7 +164,8 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
                       collapseAllAriaLabel,
                       onToggle: onCollapseAll
                     }}
-                  ></Th>
+                    aria-label="Row expansion"
+                  />
                   {expandableColumns.map((column) => (
                     <Th key={column}>{column}</Th>
                   ))}

package/src/demos/examples/TableFilterable.tsx

@@ -6,8 +6,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   Label,
   MenuToggle,
@@ -21,7 +19,7 @@ import {
   Select,
   SelectOption,
   SearchInput,
-  ToolbarChipGroup
+  ToolbarLabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
@@ -37,7 +35,7 @@ export const TableFilterable: React.FunctionComponent = () => {
 
   const rowData = rows.slice(0, 10);
 
-  const onDelete = (type: string | ToolbarChipGroup, id: string) => {
+  const onDelete = (type: string | ToolbarLabelGroup, id: string) => {
     if (type === 'Location') {
       setFilters({
         ...filters,
@@ -188,8 +186,8 @@ export const TableFilterable: React.FunctionComponent = () => {
     return (
       <React.Fragment>
         <ToolbarFilter
-          chips={filters.location}
-          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          labels={filters.location}
+          deleteLabel={(category, label) => onDelete(category, label as string)}
           categoryName="Location"
           showToolbarItem={currentCategory === 'Location'}
         >
@@ -219,8 +217,8 @@ export const TableFilterable: React.FunctionComponent = () => {
           </Select>
         </ToolbarFilter>
         <ToolbarFilter
-          chips={filters.name}
-          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          labels={filters.name}
+          deleteLabel={(category, label) => onDelete(category, label as string)}
           categoryName="Name"
           showToolbarItem={currentCategory === 'Name'}
         >
@@ -236,8 +234,8 @@ export const TableFilterable: React.FunctionComponent = () => {
           />
         </ToolbarFilter>
         <ToolbarFilter
-          chips={filters.status}
-          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          labels={filters.status}
+          deleteLabel={(category, label) => onDelete(category, label as string)}
           categoryName="Status"
           showToolbarItem={currentCategory === 'Status'}
         >
@@ -273,7 +271,7 @@ export const TableFilterable: React.FunctionComponent = () => {
 
   const renderToolbar = () => (
     <Toolbar
-      id="toolbar-with-chip-groups"
+      id="toolbar-with-label-groups"
       clearAllFilters={() => setFilters({ location: [], name: [], status: [] })}
       collapseListedFiltersBreakpoint="xl"
     >
@@ -308,12 +306,7 @@ export const TableFilterable: React.FunctionComponent = () => {
       : rowData;
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader
-        titleText="Clear all filters and try again."
-        headingLevel="h5"
-        icon={<EmptyStateIcon icon={SearchIcon} />}
-      />
+    <EmptyState icon={SearchIcon} titleText="Clear all filters and try again." headingLevel="h5">
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/examples/TableSortableResponsive.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   Button,
   Card,
+  Content,
   Dropdown,
   DropdownList,
   Flex,
@@ -14,8 +15,6 @@ import {
   SelectOption,
   SelectList,
   SelectGroup,
-  Text,
-  TextContent,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -39,7 +38,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
@@ -88,7 +87,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   const kebabDropdownItems = [<OverflowMenuDropdownItem key="kebab-1">Some action</OverflowMenuDropdownItem>];
 
   React.useEffect(() => {
-    setSortedRows(sortedData.slice((page - 1) * perPage, page * perPage - 1));
+    setSortedRows(sortedData.slice((page - 1) * perPage, page * perPage));
   }, [sortedData, page, perPage]);
 
   const handleSetPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
@@ -154,9 +153,8 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                 onClick={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
                 isExpanded={isSortDropdownOpen}
                 variant="plain"
-              >
-                <SortAmountDownIcon />
-              </MenuToggle>
+                icon={<SortAmountDownIcon />}
+              />
             )}
           >
             <SelectGroup label="Sort column">
@@ -203,9 +201,8 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                     variant="plain"
                     onClick={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
                     isExpanded={false}
-                  >
-                    <EllipsisVIcon />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon />}
+                  />
                 )}
                 isOpen={isKebabDropdownOpen}
               >
@@ -214,7 +211,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
-        <ToolbarGroup variant="icon-button-group">
+        <ToolbarGroup variant="action-group-plain">
           <ToolbarItem>
             <Button aria-label="Edit" variant="plain" icon={<EditIcon />} />
           </ToolbarItem>
@@ -234,13 +231,13 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
     <React.Fragment>
       <DashboardWrapper>
         <PageSection isWidthLimited variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Table demos</Text>
-            <Text component="p">
+          <Content>
+            <h1>Table demos</h1>
+            <p>
               Below is an example of a responsive sortable table. When the screen size shrinks the table into a compact
               form, the toolbar will display a dropdown menu containing sorting options.
-            </Text>
-          </TextContent>
+            </p>
+          </Content>
         </PageSection>
         <PageSection
           padding={{

package/src/demos/examples/TableStaticBottomPagination.tsx

@@ -18,7 +18,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableStaticBottomPagination: React.FunctionComponent = () => {
@@ -101,8 +101,13 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
-                <FilterIcon /> Status
+              <MenuToggle
+                icon={<FilterIcon />}
+                ref={toggleRef}
+                onClick={() => setIsSelectOpen(!isSelectOpen)}
+                isExpanded={isSelectOpen}
+              >
+                Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}

package/src/demos/examples/TableStickyFirstColumn.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import { Card, PageSection } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 type Direction = 'asc' | 'desc' | undefined;
 

package/src/demos/examples/TableStickyHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Card, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableStickyHeader: React.FunctionComponent = () => {

package/src/demos/index.ts

@@ -1 +1,3 @@
 export * from './sampleData';
+export * from './DashboardWrapper';
+export * from './DashboardHeader';

package/src/deprecated/components/Table/Table.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core';
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 import { Provider } from '../../../components/Table/base/provider';
@@ -143,8 +142,8 @@ class Table extends React.Component<TableProps, {}> {
     rowLabeledBy: 'simple-node',
     expandId: 'expandable-toggle',
     contentId: 'expanded-content',
-    dropdownPosition: DropdownPosition.right,
-    dropdownDirection: DropdownDirection.down,
+    dropdownPosition: 'right',
+    dropdownDirection: 'down',
     actionsMenuAppendTo: 'inline',
     header: undefined as React.ReactNode,
     caption: undefined as React.ReactNode,