@patternfly/react-table 6.2.0-prerelease.31 → 6.2.0-prerelease.32

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
@@ -78,11 +78,11 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => {
           <Tr key={repo.name}>
             <Td dataLabel={columnNames.name}>
               {repo.description ? (
-                <React.Fragment>
+                <Fragment>
                   {repo.name}
                   <br />
                   <small>{repo.description}</small>
-                </React.Fragment>
+                </Fragment>
               ) : (
                 repo.name
               )}
@@ -99,11 +99,11 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => {
           <Tr key={repo.name}>
             <Td dataLabel={columnNames.name}>
               {repo.description ? (
-                <React.Fragment>
+                <Fragment>
                   {repo.name}
                   <br />
                   <small>{repo.description}</small>
-                </React.Fragment>
+                </Fragment>
               ) : (
                 repo.name
               )}

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
 
 // This example has been simplified to focus on the text modifier props. In real usage,
@@ -10,7 +10,7 @@ const columnNames = {
 };
 
 export const TableTextModifiers: React.FunctionComponent = () => {
-  const [focused, setFocused] = React.useState(false);
+  const [focused, setFocused] = useState(false);
 
   return (
     <Table aria-label="Table text">

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } from '@patternfly/react-table';
 import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
@@ -84,9 +84,9 @@ export const TableTree: React.FunctionComponent = () => {
     workspaces: 'Workspaces'
   };
 
-  const [expandedNodeNames, setExpandedNodeNames] = React.useState<string[]>(['Repositories one']);
-  const [expandedDetailsNodeNames, setExpandedDetailsNodeNames] = React.useState<string[]>([]);
-  const [selectedNodeNames, setSelectedNodeNames] = React.useState<string[]>([]);
+  const [expandedNodeNames, setExpandedNodeNames] = useState<string[]>(['Repositories one']);
+  const [expandedDetailsNodeNames, setExpandedDetailsNodeNames] = useState<string[]>([]);
+  const [selectedNodeNames, setSelectedNodeNames] = useState<string[]>([]);
 
   const getDescendants = (node: RepositoriesTreeNode): RepositoriesTreeNode[] => {
     if (!node.children || !node.children.length) {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } from '@patternfly/react-table';
 import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 
@@ -42,7 +42,7 @@ export const TableTreeNoInset: React.FunctionComponent = () => {
     workspaces: 'Workspaces'
   };
 
-  const [selectedNodeNames, setSelectedNodeNames] = React.useState<string[]>([]);
+  const [selectedNodeNames, setSelectedNodeNames] = useState<string[]>([]);
   const isNodeChecked = (node: RepositoriesTreeNode) => selectedNodeNames.includes(node.name);
 
   /**

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { ActionsColumn } from '../../ActionsColumn';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { CollapseColumn } from '../../CollapseColumn';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes';
 
 export const headerCol = (id = 'simple-node') => {

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ThInfoType } from '../../base/types';
 import { HeaderCellInfoWrapper } from '../../HeaderCellInfoWrapper';
 import { IFormatterValueType, ITransform } from '../../TableTypes';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IExtra, IFormatterValueType, OnCheckChange, OnTreeRowCollapse, OnToggleRowDetails } from '../../TableTypes';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';

package/src/demos/DashboardHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   Avatar,
   Button,

package/src/demos/DashboardWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,

package/src/demos/examples/TableAutomaticPagination.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
@@ -25,9 +25,9 @@ export const TableAutomaticPagination: React.FunctionComponent = () => {
   ];
   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 [perPage, setPerPage] = useState(defaultPerPage);
+  const [page, setPage] = useState(1);
+  const [rows, setRows] = useState(defaultRows.slice(0, defaultPerPage));
 
   const handleSetPage = (
     _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
@@ -74,7 +74,7 @@ export const TableAutomaticPagination: React.FunctionComponent = () => {
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       {renderPagination()}
       <Table aria-label="Automated Pagination Table Demo">
         <Thead>
@@ -96,6 +96,6 @@ export const TableAutomaticPagination: React.FunctionComponent = () => {
           ))}
         </Tbody>
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableBulkSelect.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   Dropdown,
   DropdownList,

package/src/demos/examples/TableColumnManagement.tsx

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { Fragment, useEffect, useState, type JSX } from 'react';
 
 import {
   Button,
@@ -36,16 +36,16 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const defaultColumns = columns;
   const defaultRows = rows;
 
-  const [filters, setFilters] = React.useState<string[]>([]);
-  const [filteredColumns, setFilteredColumns] = React.useState<string[]>([]);
-  const [filteredRows, setFilteredRows] = React.useState<SampleDataRow[]>([]);
-  const [managedColumns, setManagedColumns] = React.useState<string[]>(defaultColumns);
-  const [managedRows, setManagedRows] = React.useState<SampleDataRow[]>(defaultRows);
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [checkedState, setCheckedState] = React.useState<boolean[]>(Array(columns.length).fill(true));
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [paginatedRows, setPaginatedRows] = React.useState<any[]>(rows);
+  const [filters, setFilters] = useState<string[]>([]);
+  const [filteredColumns, setFilteredColumns] = useState<string[]>([]);
+  const [filteredRows, setFilteredRows] = useState<SampleDataRow[]>([]);
+  const [managedColumns, setManagedColumns] = useState<string[]>(defaultColumns);
+  const [managedRows, setManagedRows] = useState<SampleDataRow[]>(defaultRows);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [checkedState, setCheckedState] = useState<boolean[]>(Array(columns.length).fill(true));
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [paginatedRows, setPaginatedRows] = useState<any[]>(rows);
 
   const matchCheckboxNameToColumn = (name: string): string => {
     switch (name) {
@@ -123,7 +123,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
     />
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     setPaginatedRows(managedRows.slice((page - 1) * perPage, page * perPage - 1));
   }, [managedRows, page, perPage]);
 
@@ -402,7 +402,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   };
 
   const toolbarItems = (
-    <React.Fragment>
+    <Fragment>
       <Toolbar id="page-layout-table-column-management-action-toolbar-top">
         <span id="page-layout-table-column-management-action-toolbar-top-select-checkbox-label" hidden>
           Choose one
@@ -431,11 +431,11 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem variant="pagination">{renderPagination('top', false)}</ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-    </React.Fragment>
+    </Fragment>
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled>
           {toolbarItems}
@@ -482,6 +482,6 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           {renderModal()}
         </PageSection>
       </DashboardWrapper>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableColumnManagementWithDraggable.tsx

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { Fragment, useEffect, useState, type JSX } from 'react';
 
 import {
   Button,
@@ -36,18 +36,18 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const defaultColumns = columns;
   const defaultRows = rows;
 
-  const [filters, setFilters] = React.useState<string[]>([]);
-  const [filteredColumns, setFilteredColumns] = React.useState<string[]>(defaultColumns);
-  const [filteredRows, setFilteredRows] = React.useState<SampleDataRow[]>(defaultRows);
-  const [managedColumns, setManagedColumns] = React.useState<string[]>(defaultColumns);
-  const [managedRows, setManagedRows] = React.useState<SampleDataRow[]>(defaultRows);
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [paginatedRows, setPaginatedRows] = React.useState<any[]>(rows);
+  const [filters, setFilters] = useState<string[]>([]);
+  const [filteredColumns, setFilteredColumns] = useState<string[]>(defaultColumns);
+  const [filteredRows, setFilteredRows] = useState<SampleDataRow[]>(defaultRows);
+  const [managedColumns, setManagedColumns] = useState<string[]>(defaultColumns);
+  const [managedRows, setManagedRows] = useState<SampleDataRow[]>(defaultRows);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [paginatedRows, setPaginatedRows] = useState<any[]>(rows);
 
-  const [columnData, setColumnData] = React.useState(defaultColumns.map((col) => ({ name: col, checked: true })));
-  const [initialColData, setInitialColData] = React.useState(columnData);
+  const [columnData, setColumnData] = useState(defaultColumns.map((col) => ({ name: col, checked: true })));
+  const [initialColData, setInitialColData] = useState(columnData);
 
   const matchSelectedColumnNameToAttr = (name: string): string => {
     switch (name) {
@@ -102,7 +102,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
     />
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     setPaginatedRows(managedRows.slice((page - 1) * perPage, page * perPage - 1));
   }, [managedRows, page, perPage]);
 
@@ -297,7 +297,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   };
 
   const toolbarItems = (
-    <React.Fragment>
+    <Fragment>
       <Toolbar id="page-layout-table-column-management-action-toolbar-top">
         <span id="page-layout-table-column-management-action-toolbar-top-select-checkbox-label" hidden>
           Choose one
@@ -330,11 +330,11 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem variant="pagination">{renderPagination('top', false)}</ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-    </React.Fragment>
+    </Fragment>
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled>
           {toolbarItems}
@@ -381,6 +381,6 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           {renderModal()}
         </PageSection>
       </DashboardWrapper>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableCompact.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Card,
@@ -21,10 +21,10 @@ import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableCompact: React.FunctionComponent = () => {
-  const [isSelectOpen, setIsSelectOpen] = React.useState<boolean>(false);
-  const [page, setPage] = React.useState<number>(1);
-  const [perPage, setPerPage] = React.useState<number>(10);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
+  const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false);
+  const [page, setPage] = useState<number>(1);
+  const [perPage, setPerPage] = useState<number>(10);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
 
   const handleSetPage = (
     _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
@@ -127,7 +127,7 @@ export const TableCompact: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled>
           <Card>
@@ -171,6 +171,6 @@ export const TableCompact: React.FunctionComponent = () => {
           </Card>
         </PageSection>
       </DashboardWrapper>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableCompoundExpansion.tsx

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

package/src/demos/examples/TableEmptyStateDefault.tsx

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

package/src/demos/examples/TableEmptyStateError.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';

package/src/demos/examples/TableEmptyStateLoading.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { Fragment, ReactNode, useEffect, useState } from 'react';
 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-table/dist/esm/demos/DashboardWrapper';
@@ -120,11 +120,11 @@ const serverData: Server[] = [
 const initialExpandedServerNames = ['US-Node 2']; // Default to expanded
 
 export const TableExpandCollapseAll: React.FunctionComponent = () => {
-  const [areAllExpanded, setAreAllExpanded] = React.useState(false);
-  const [collapseAllAriaLabel, setCollapseAllAriaLabel] = React.useState('Expand all');
-  const [expandedServerNames, setExpandedServerNames] = React.useState(initialExpandedServerNames);
+  const [areAllExpanded, setAreAllExpanded] = useState(false);
+  const [collapseAllAriaLabel, setCollapseAllAriaLabel] = useState('Expand all');
+  const [expandedServerNames, setExpandedServerNames] = useState(initialExpandedServerNames);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const allExpanded = expandedServerNames.length === serverData.length;
     setAreAllExpanded(allExpanded);
     setCollapseAllAriaLabel(allExpanded ? 'Collapse all' : 'Expand all');
@@ -146,7 +146,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection
           padding={{
@@ -206,6 +206,6 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
           </Card>
         </PageSection>
       </DashboardWrapper>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableFilterable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import {
   Badge,
   Button,
@@ -27,11 +27,11 @@ import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-ta
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableFilterable: React.FunctionComponent = () => {
-  const [filters, setFilters] = React.useState<Record<string, string[]>>({ location: [], name: [], status: [] });
-  const [currentCategory, setCurrentCategory] = React.useState('Status');
-  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false);
-  const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
+  const [filters, setFilters] = useState<Record<string, string[]>>({ location: [], name: [], status: [] });
+  const [currentCategory, setCurrentCategory] = useState('Status');
+  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
+  const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
 
   const rowData = rows.slice(0, 10);
 
@@ -184,7 +184,7 @@ export const TableFilterable: React.FunctionComponent = () => {
     ];
 
     return (
-      <React.Fragment>
+      <Fragment>
         <ToolbarFilter
           labels={filters.location}
           deleteLabel={(category, label) => onDelete(category, label as string)}
@@ -265,7 +265,7 @@ export const TableFilterable: React.FunctionComponent = () => {
             {statusMenuItems}
           </Select>
         </ToolbarFilter>
-      </React.Fragment>
+      </Fragment>
     );
   };
 
@@ -337,7 +337,7 @@ export const TableFilterable: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       {renderToolbar()}
       <Table aria-label="Filterable Table Demo">
         <Thead>
@@ -382,6 +382,6 @@ export const TableFilterable: React.FunctionComponent = () => {
           )}
         </Tbody>
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableSortableResponsive.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Fragment, useEffect, useState } from 'react';
 import {
   Button,
   Card,
@@ -45,7 +44,7 @@ import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/d
 type Direction = 'asc' | 'desc' | undefined;
 
 export const TableSortableResponsive: React.FunctionComponent = () => {
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
 
   const sortRows = (rows: SampleDataRow[], sortIndex: number, sortDirection: Direction) =>
     [...rows].sort((a, b) => {
@@ -65,17 +64,17 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
       return returnValue;
     });
 
-  const [sortedData, setSortedData] = React.useState([...sortRows(rows, 0, 'asc')]);
-  const [sortedRows, setSortedRows] = React.useState([...sortedData]);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+  const [sortedData, setSortedData] = useState([...sortRows(rows, 0, 'asc')]);
+  const [sortedRows, setSortedRows] = useState([...sortedData]);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
 
   // index of the currently active column
-  const [activeSortIndex, setActiveSortIndex] = React.useState(0);
+  const [activeSortIndex, setActiveSortIndex] = useState(0);
   // sort direction of the currently active column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<Direction>('asc');
+  const [activeSortDirection, setActiveSortDirection] = useState<Direction>('asc');
   // sort dropdown expansion
-  const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+  const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
 
   const onSort = (_event: any, index: number, direction: Direction) => {
     setActiveSortIndex(index);
@@ -86,7 +85,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
 
   const kebabDropdownItems = [<OverflowMenuDropdownItem key="kebab-1">Some action</OverflowMenuDropdownItem>];
 
-  React.useEffect(() => {
+  useEffect(() => {
     setSortedRows(sortedData.slice((page - 1) * perPage, page * perPage));
   }, [sortedData, page, perPage]);
 
@@ -228,7 +227,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <DashboardWrapper>
         <PageSection isWidthLimited variant={PageSectionVariants.light}>
           <Content>
@@ -327,6 +326,6 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
           </Card>
         </PageSection>
       </DashboardWrapper>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableStaticBottomPagination.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Fragment, useState } from 'react';
 import {
   Button,
   Card,
@@ -22,10 +21,10 @@ import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/Dashboa
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableStaticBottomPagination: React.FunctionComponent = () => {
-  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
   const handleSetPage = (
     _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
     newPage: number,
@@ -141,7 +140,7 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled>
           <Card>
@@ -177,6 +176,6 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
           </Card>
         </PageSection>
       </DashboardWrapper>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/examples/TableStickyFirstColumn.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } 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-table/dist/esm/demos/DashboardWrapper';
@@ -67,8 +67,8 @@ export const TableStickyFirstColumn = () => {
     header16: 'Header 16'
   };
 
-  const [activeSortIndex, setActiveSortIndex] = React.useState(-1);
-  const [activeSortDirection, setActiveSortDirection] = React.useState<Direction>('asc');
+  const [activeSortIndex, setActiveSortIndex] = useState(-1);
+  const [activeSortDirection, setActiveSortDirection] = useState<Direction>('asc');
   const getSortableRowValues = (fact: Fact) => {
     const {
       name,

package/src/demos/examples/TableStickyHeader.tsx

@@ -1,5 +1,3 @@
-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-table/dist/esm/demos/DashboardWrapper';