@patternfly/react-table 6.2.0-prerelease.9 → 6.2.0

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

@@ -41,6 +41,7 @@ The `Table` component takes an explicit and declarative approach, and its implem
 
 The documentation for the deprecated table implementation can be found under the [React deprecated](/components/table/react-deprecated) tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.
 
+import { Fragment, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -189,7 +190,7 @@ If actions menus are getting clipped by other items on the page, such as sticky
 
 ### Actions Overflow
 
-Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
+Using an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
 
 ```ts file="TableActionsOverflow.tsx"
 

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Button, MenuToggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
 import {
   Table,
@@ -45,7 +45,7 @@ export const TableActions: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = React.useState<ExampleType>('defaultToggle');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType>('defaultToggle');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
     setExampleChoice(id as ExampleType);
@@ -93,7 +93,7 @@ export const TableActions: React.FunctionComponent = () => {
   ];
 
   return (
-    <React.Fragment>
+    <Fragment>
       <ToggleGroup aria-label="Default uses kebab toggle">
         <ToggleGroupItem
           text="Default actions toggle"
@@ -163,6 +163,6 @@ export const TableActions: React.FunctionComponent = () => {
           })}
         </Tbody>
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   OverflowMenu,
@@ -33,7 +33,7 @@ export const TableActions: React.FunctionComponent = () => {
     { name: '5', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five', isMenuOpen: false }
   ];
 
-  const [repos, setRepos] = React.useState(repositories);
+  const [repos, setRepos] = useState(repositories);
 
   const columnNames = {
     name: 'Repositories',
@@ -45,7 +45,7 @@ export const TableActions: React.FunctionComponent = () => {
 
   const dropdownItems = [
     <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
-      Pimary
+      Primary
     </OverflowMenuDropdownItem>,
     <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
       Secondary
@@ -56,7 +56,7 @@ export const TableActions: React.FunctionComponent = () => {
   ];
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Table aria-label="Actions table">
         <Thead>
           <Tr>
@@ -122,6 +122,6 @@ export const TableActions: React.FunctionComponent = () => {
           ))}
         </Tbody>
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
 import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
@@ -29,14 +29,14 @@ export const TableBasic: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = React.useState<ExampleType>('default');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType>('default');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
     setExampleChoice(id as ExampleType);
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <ToggleGroup aria-label="Default with single selectable">
         <ToggleGroupItem
           text="Default"
@@ -84,6 +84,6 @@ export const TableBasic: React.FunctionComponent = () => {
           ))}
         </Tbody>
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
@@ -27,7 +27,7 @@ export const TableClickable: React.FunctionComponent = () => {
 
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
-  const [selectedRepoName, setSelectedRepoName] = React.useState('');
+  const [selectedRepoName, setSelectedRepoName] = useState('');
 
   return (
     <Table aria-label="Clickable table">

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '@patternfly/react-table';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -33,7 +33,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
   // In this example, expanded cells are tracked by the repo and property names from each row. This could be any pair of unique identifiers.
   // This is to prevent state from being based on row and column order index in case we later add sorting and rearranging columns.
   // Note that this behavior is very similar to selection state.
-  const [expandedCells, setExpandedCells] = React.useState<Record<string, ColumnKey>>({
+  const [expandedCells, setExpandedCells] = useState<Record<string, ColumnKey>>({
     'siemur/test-space': 'branches' // Default to the first cell of the first row being expanded
   });
   const setCellExpanded = (repo: Repository, columnKey: ColumnKey, isExpanding = true) => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 // This example has been simplified to focus on the text modifier props. In real usage,

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

@@ -1,15 +1,15 @@
-import React from 'react';
+import { useRef, useState } from 'react';
 import { Table, Thead, Tbody, Tr, Th, Td, TbodyProps, TrProps } from '@patternfly/react-table';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 export const TableDraggable: React.FunctionComponent = () => {
-  const [draggedItemId, setDraggedItemId] = React.useState<string | null>(null);
-  const [draggingToItemIndex, setDraggingToItemIndex] = React.useState<number | null>(null);
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [itemOrder, setItemOrder] = React.useState(['row1', 'row2', 'row3']);
-  const [tempItemOrder, setTempItemOrder] = React.useState<string[]>([]);
+  const [draggedItemId, setDraggedItemId] = useState<string | null>(null);
+  const [draggingToItemIndex, setDraggingToItemIndex] = useState<number | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [itemOrder, setItemOrder] = useState(['row1', 'row2', 'row3']);
+  const [tempItemOrder, setTempItemOrder] = useState<string[]>([]);
 
-  const bodyRef = React.useRef<HTMLTableSectionElement>();
+  const bodyRef = useRef<HTMLTableSectionElement>(undefined);
 
   const onDragStart: TrProps['onDragStart'] = (evt) => {
     evt.dataTransfer.effectAllowed = 'move';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { isValidElement, useRef, useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Button, Checkbox, Radio, TextInput, KeyTypes, getUniqueId } from '@patternfly/react-core';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
@@ -18,7 +18,7 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
   elementToFocusOnEditRef,
   rowAriaLabel = 'row'
 }) => {
-  const editButtonRef = React.useRef<HTMLButtonElement>();
+  const editButtonRef = useRef<HTMLButtonElement>(undefined);
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, button: 'edit' | 'stopEditing') => {
     const focusRef = button === 'edit' ? elementToFocusOnEditRef : editButtonRef;
@@ -97,14 +97,14 @@ const EditableCell: React.FunctionComponent<EditableCellProps> = ({
   role,
   ariaLabel
 }) => {
-  const hasMultipleInputs = Array.isArray(editingValue) && editingValue.every((elem) => React.isValidElement(elem));
+  const hasMultipleInputs = Array.isArray(editingValue) && editingValue.every((elem) => isValidElement(elem));
 
   return (
     <Td dataLabel={dataLabel}>
       <div className={css(inlineEditStyles.inlineEditValue)}>{staticValue}</div>
       {hasMultipleInputs ? (
         <div className={css(inlineEditStyles.inlineEditGroup, 'pf-m-column')} role={role} aria-label={ariaLabel}>
-          {(editingValue as React.ReactElement[]).map((elem, index) => (
+          {(editingValue as React.ReactElement<any>[]).map((elem, index) => (
             <div key={index} className={css(inlineEditStyles.inlineEditInput)}>
               {elem}
             </div>
@@ -134,10 +134,10 @@ const EditableRow: React.FunctionComponent<EditableRow> = ({
   ariaLabel,
   rowIndex
 }) => {
-  const [editable, setEditable] = React.useState(false);
-  const [editedData, setEditedData] = React.useState(data);
+  const [editable, setEditable] = useState(false);
+  const [editedData, setEditedData] = useState(data);
 
-  const inputRef = React.useRef();
+  const inputRef = useRef(undefined);
 
   return (
     <Tr className={css(inlineEditStyles.inlineEdit, editable ? inlineEditStyles.modifiers.inlineEditable : '')}>
@@ -273,7 +273,7 @@ export const TableEditable: React.FunctionComponent = () => {
     }
   ];
 
-  const [rows, setRows] = React.useState(initialRows);
+  const [rows, setRows] = useState(initialRows);
 
   const columnNames: ColumnNames<CustomData> = {
     textInput: 'Text input',

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Checkbox } from '@patternfly/react-core';
 
@@ -96,7 +96,7 @@ export const TableExpandable: React.FunctionComponent = () => {
   // This is to prevent state from being based on row order index in case we later add sorting.
   // Note that this behavior is very similar to selection state.
   const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded
-  const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
+  const [expandedRepoNames, setExpandedRepoNames] = useState<string[]>(initialExpandedRepoNames);
   const setRepoExpanded = (repo: Repository, isExpanding = true) =>
     setExpandedRepoNames((prevExpanded) => {
       const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);
@@ -104,10 +104,10 @@ export const TableExpandable: React.FunctionComponent = () => {
     });
   const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);
 
-  const [isExampleCompact, setIsExampleCompact] = React.useState(true);
+  const [isExampleCompact, setIsExampleCompact] = useState(true);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Checkbox
         label="Compact"
         isChecked={isExampleCompact}
@@ -195,6 +195,6 @@ export const TableExpandable: React.FunctionComponent = () => {
           );
         })}
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
 
 interface Repository {
@@ -28,13 +28,13 @@ export const TableFavoritable: 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>();
+  const [activeSortIndex, setActiveSortIndex] = useState<number>();
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>();
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc'>();
 
   // Favorite state is similar to selection state, see Selectable with checkbox.
-  const [favoriteRepoNames, setFavoriteRepoNames] = React.useState<string[]>([]);
+  const [favoriteRepoNames, setFavoriteRepoNames] = useState<string[]>([]);
   const setRepoFavorited = (repo: Repository, isFavoriting = true) =>
     setFavoriteRepoNames((prevFavorites) => {
       const otherFavorites = prevFavorites.filter((r) => r !== repo.name);
@@ -43,14 +43,14 @@ export const TableFavoritable: React.FunctionComponent = () => {
   const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name);
 
   // State of the header cell to favorite / unfavorite all rows
-  const [headerFavorited, setHeaderFavorited] = React.useState(false);
+  const [headerFavorited, setHeaderFavorited] = useState(false);
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // In this example we only deal with booleans here because we only sort on the favorites column.
   // For more complex sorting, see Sortable.
   // Note: We also memoize the sortable values with useCallback to prevent rows jumping around when you change
   // the favorites while sorting on that column. Only updating the sort state will reorder the rows.
-  const getSortableRowValues = React.useCallback(
+  const getSortableRowValues = useCallback(
     (repo: Repository): boolean[] => [isRepoFavorited(repo)],
     [activeSortIndex, activeSortDirection]
   );

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 /* eslint-disable camelcase */
 import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 
@@ -43,10 +43,10 @@ export const TableMultipleStickyColumns: 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] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // 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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ExpandableRowContent } from '@patternfly/react-table';
 import { Button } from '@patternfly/react-core';
 
@@ -51,7 +51,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
   // In this example, expanded rows are tracked by the team names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   // Note that this behavior is very similar to selection state.
-  const [expandedTeamNames, setExpandedTeamNames] = React.useState<string[]>([]);
+  const [expandedTeamNames, setExpandedTeamNames] = useState<string[]>([]);
   const setTeamExpanded = (team: Team, isExpanding = true) =>
     setExpandedTeamNames((prevExpanded) => {
       const otherExpandedTeamNames = prevExpanded.filter((t) => t !== team.name);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem, Timestamp } from '@patternfly/react-core';
 interface PodConnection {
@@ -55,10 +55,10 @@ export const TableNestedHeaders: 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] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   const getSortableRowValues = (connection: PodConnection): (string | number)[] => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem, Timestamp } from '@patternfly/react-core';
 interface PodConnection {
@@ -55,10 +55,10 @@ export const TableNestedHeaders: 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] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   const getSortableRowValues = (connection: PodConnection): (string | number)[] => {

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent, ActionsColumn, IAction } from '@patternfly/react-table';
 
 interface Repository {
@@ -102,7 +102,7 @@ export const TableExpandable: React.FunctionComponent = () => {
   // This is to prevent state from being based on row order index in case we later add sorting.
   // Note that this behavior is very similar to selection state.
   const initialExpandedRepoNames = repositories.filter((repo) => !!repo.nestedComponent).map((repo) => repo.name); // Default to all expanded
-  const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
+  const [expandedRepoNames, setExpandedRepoNames] = useState<string[]>(initialExpandedRepoNames);
   const setRepoExpanded = (repo: Repository, isExpanding = true) =>
     setExpandedRepoNames((prevExpanded) => {
       const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 
 interface Fact {
@@ -42,10 +42,10 @@ export const ComposableTableRightStickyColumn: 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] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // 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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
@@ -33,7 +33,7 @@ export const TableSelectable: React.FunctionComponent = () => {
 
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -45,8 +45,8 @@ export const TableSelectable: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -63,7 +63,7 @@ export const TableSelectable: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
@@ -29,7 +29,7 @@ export const TableSelectableRadio: React.FunctionComponent = () => {
 
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
-  const [selectedRepoName, setSelectedRepoName] = React.useState<string | null>(null);
+  const [selectedRepoName, setSelectedRepoName] = useState<string | null>(null);
 
   return (
     <Table aria-label="Selectable table">

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
 
 interface Repository {
@@ -28,10 +28,10 @@ export const TableSortable: 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] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // 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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
 import {
   Toolbar,
@@ -37,18 +37,18 @@ export const TableSortableCustom: React.FunctionComponent = () => {
     lastCommit: 'Last commit'
   };
 
-  const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+  const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
 
   // 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] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // Sort dropdown expansion
-  // const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+  // const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
 
   // 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
@@ -94,7 +94,7 @@ export const TableSortableCustom: React.FunctionComponent = () => {
   });
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Toolbar id="toolbar">
         <ToolbarContent>
           <ToolbarItem>
@@ -168,6 +168,6 @@ export const TableSortableCustom: React.FunctionComponent = () => {
           ))}
         </Tbody>
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 
 interface Fact {
@@ -42,10 +42,10 @@ export const TableStickyColumn: 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] = useState<number | null>(null);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
 
   // 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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   Table,
   Thead,
@@ -54,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(-1);
+  const [activeSortIndex, setActiveSortIndex] = useState(-1);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<ISortBy['direction']>();
+  const [activeSortDirection, setActiveSortDirection] = 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

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {