@patternfly/react-table 5.1.0 → 5.1.1-prerelease.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "5.1.0",
+  "version": "5.1.1-prerelease.1",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -15,8 +15,7 @@
   "patternfly:src": "src/",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public",
-    "tag": "alpha"
+    "access": "public"
   },
   "repository": {
     "type": "git",
@@ -40,10 +39,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.1.0",
-    "@patternfly/react-icons": "^5.1.0",
-    "@patternfly/react-styles": "^5.1.0",
-    "@patternfly/react-tokens": "^5.1.0",
+    "@patternfly/react-core": "^5.1.1-prerelease.1",
+    "@patternfly/react-icons": "^5.1.1-prerelease.1",
+    "@patternfly/react-styles": "^5.1.1-prerelease.1",
+    "@patternfly/react-tokens": "^5.1.1-prerelease.1",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +54,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "788b50e975fd7a913f3c892ae68f426fd95b6ea2"
+  "gitHead": "1e1305e5f7450e087ff8d1690d2be28b00dac0a1"
 }

package/src/components/Table/ActionsColumn.tsx

@@ -74,7 +74,9 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
         .map(({ title, itemKey, onClick, isOutsideDropdown, ...props }, key) =>
           typeof title === 'string' ? (
             <Button
-              onClick={(event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => onActionClick(event, onClick)}
+              onClick={(event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) =>
+                onActionClick(event, onClick)
+              }
               {...(props as any)}
               isDisabled={isDisabled}
               key={itemKey || `outside_dropdown_${key}`}

package/src/components/Table/EditColumn.tsx

@@ -33,18 +33,18 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
   <React.Fragment>
     <div className={css(inlineStyles.inlineEditGroup, inlineStyles.modifiers.iconGroup, 'pf-m-action-group')}>
       <div className={css(inlineStyles.inlineEditAction)}>
-        <Button aria-label={saveAriaLabel} {...props} onClick={e => onClick(e, 'save')} variant="plain">
+        <Button aria-label={saveAriaLabel} {...props} onClick={(e) => onClick(e, 'save')} variant="plain">
           <CheckIcon />
         </Button>
       </div>
       <div className={css(inlineStyles.inlineEditAction)}>
-        <Button aria-label={cancelAriaLabel} {...props} onClick={e => onClick(e, 'cancel')} variant="plain">
+        <Button aria-label={cancelAriaLabel} {...props} onClick={(e) => onClick(e, 'cancel')} variant="plain">
           <TimesIcon />
         </Button>
       </div>
     </div>
     <div className={css(inlineStyles.inlineEditAction, inlineStyles.modifiers.enableEditable)}>
-      <Button aria-label={editAriaLabel} {...props} onClick={e => onClick(e, 'edit')} variant="plain">
+      <Button aria-label={editAriaLabel} {...props} onClick={(e) => onClick(e, 'edit')} variant="plain">
         <PencilAltIcon />
       </Button>
     </div>

package/src/components/Table/EditableSelectInputCell.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import {
-  Select,
-  SelectOptionObject
-} from '@patternfly/react-core/dist/esm/deprecated/components/Select';
+import { Select, SelectOptionObject } from '@patternfly/react-core/dist/esm/deprecated/components/Select';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';

package/src/components/Table/RowWrapper.tsx

@@ -26,7 +26,7 @@ export interface RowWrapperProps extends OUIAProps {
   ouiaId?: number | string;
 }
 
-export class RowWrapper extends React.Component<RowWrapperProps> {
+class RowWrapper extends React.Component<RowWrapperProps> {
   static displayName = 'RowWrapper';
   static defaultProps = {
     className: '' as string,
@@ -79,13 +79,13 @@ export class RowWrapper extends React.Component<RowWrapperProps> {
 
   handleScroll = (event: Event): void => {
     if (!this._unmounted) {
-      this.props.onScroll((event as unknown) as React.UIEvent<Element>);
+      this.props.onScroll(event as unknown as React.UIEvent<Element>);
     }
   };
 
   handleResize = (event: Event) => {
     if (!this._unmounted) {
-      this.props.onResize((event as unknown) as React.UIEvent<Element>);
+      this.props.onResize(event as unknown as React.UIEvent<Element>);
     }
   };
 
@@ -117,3 +117,5 @@ export class RowWrapper extends React.Component<RowWrapperProps> {
     );
   }
 }
+
+export { RowWrapper };

package/src/components/Table/Table.tsx

@@ -57,6 +57,8 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   isStriped?: boolean;
   /** Flag indicating this table contains expandable rows to maintain proper striping */
   isExpandable?: boolean;
+  /** Flag indicating this table's rows will not have the inset typically reserved for expanding/collapsing rows in a tree table. Intended for use on tree tables with no visible rows with children. */
+  hasNoInset?: boolean;
   /** Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584 */
   nestedHeaderColumnSpans?: number[];
   /** Visible text to add alongside the hidden a11y caption for tables with selectable rows. */
@@ -91,6 +93,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isNested = false,
   isStriped = false,
   isExpandable = false,
+  hasNoInset = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   nestedHeaderColumnSpans,
   selectableRowCaptionText,
@@ -164,7 +167,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
     const activeElement = document.activeElement;
     const key = event.key;
     const rows = (Array.from(tableRef.current.querySelectorAll('tbody tr')) as Element[]).filter(
-      el => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden
+      (el) => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden
     );
     if (key === 'Space' || key === 'Enter') {
       (activeElement as HTMLElement).click();
@@ -206,6 +209,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isTreeTable && stylesTreeView.modifiers.treeView,
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,
+          hasNoInset && stylesTreeView.modifiers.noInset,
           isNested && 'pf-m-nested'
         )}
         ref={tableRef}

package/src/components/Table/base/evaluate-transforms.ts

@@ -18,7 +18,7 @@ export function evaluateTransforms(
   extraParameters: ExtraParamsType = {}
 ) {
   if (process.env.NODE_ENV !== 'production') {
-    if (!transforms.every(f => typeof f === 'function')) {
+    if (!transforms.every((f) => typeof f === 'function')) {
       throw new Error("All transforms weren't functions!");
     }
   }
@@ -27,5 +27,5 @@ export function evaluateTransforms(
     return {};
   }
 
-  return mergeProps(...transforms.map(transform => transform(value, extraParameters)));
+  return mergeProps(...transforms.map((transform) => transform(value, extraParameters)));
 }

package/src/components/Table/base/provider.tsx

@@ -20,7 +20,7 @@ export const ProviderContext = React.createContext({
   renderers: null as RenderersTypes['renderers']
 });
 
-export class Provider extends React.Component<ProviderProps, {}> {
+class Provider extends React.Component<ProviderProps, {}> {
   static displayName = 'Provider';
   static defaultProps = {
     renderers: TableDefaults.renderers
@@ -55,3 +55,5 @@ export class Provider extends React.Component<ProviderProps, {}> {
     );
   }
 }
+
+export { Provider };

package/src/components/Table/base/types.tsx

@@ -9,10 +9,7 @@ import * as React from 'react';
 import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
 import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
-import {
-  SelectOptionObject,
-  SelectProps
-} from '@patternfly/react-core/dist/esm/deprecated/components/Select';
+import { SelectOptionObject, SelectProps } from '@patternfly/react-core/dist/esm/deprecated/components/Select';
 import { Table } from '../Table';
 import { Thead } from '../Thead';
 import { Tbody } from '../Tbody';

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

@@ -297,6 +297,13 @@ the voice over technologies will recognize the flat table structure as a tree.
 ```ts file="TableTree.tsx"
 ```
 
+### Flat tree table with no inset
+
+To remove the inset used to leave space for the expand/collapse toggle in a flat tree table, use the `hasNoInset` prop on the `Table` component.
+
+```ts file="TableTreeNoInset.tsx"
+```
+
 ### Draggable row table
 
 To make a row draggable:

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

@@ -121,7 +121,7 @@ export const TableActions: React.FunctionComponent = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {repositories.map(repo => {
+          {repositories.map((repo) => {
             // Arbitrary logic to determine which rows get which actions in this example
             let rowActions: IAction[] | null = defaultActions(repo);
             if (repo.name === 'a') {

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

@@ -73,7 +73,7 @@ export const TableBasic: React.FunctionComponent = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {repositories.map(repo => (
+          {repositories.map((repo) => (
             <Tr key={repo.name}>
               <Td dataLabel={columnNames.name}>{repo.name}</Td>
               <Td dataLabel={columnNames.branches}>{repo.branches}</Td>

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

@@ -39,7 +39,7 @@ export const TableCellWidth: React.FunctionComponent = () => {
         </Tr>
       </Thead>
       <Tbody>
-        {repositories.map(repo => (
+        {repositories.map((repo) => (
           <Tr key={repo.name}>
             <Td dataLabel={columnNames.name}>{repo.name}</Td>
             <Td dataLabel={columnNames.branches}>{repo.branches}</Td>

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

@@ -41,7 +41,7 @@ export const TableClickable: React.FunctionComponent = () => {
         </Tr>
       </Thead>
       <Tbody>
-        {repositories.map(repo => (
+        {repositories.map((repo) => (
           <Tr
             key={repo.name}
             onRowClick={() => setSelectedRepoName(repo.name)}

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

@@ -11,7 +11,7 @@ export const TableDraggable: React.FunctionComponent = () => {
 
   const bodyRef = React.useRef<HTMLTableSectionElement>();
 
-  const onDragStart: TrProps['onDragStart'] = evt => {
+  const onDragStart: TrProps['onDragStart'] = (evt) => {
     evt.dataTransfer.effectAllowed = 'move';
     evt.dataTransfer.setData('text/plain', evt.currentTarget.id);
     const draggedItemId = evt.currentTarget.id;
@@ -37,20 +37,20 @@ export const TableDraggable: React.FunctionComponent = () => {
   const move = (itemOrder: string[]) => {
     const ulNode = bodyRef.current;
     const nodes = Array.from(ulNode.children);
-    if (nodes.map(node => node.id).every((id, i) => id === itemOrder[i])) {
+    if (nodes.map((node) => node.id).every((id, i) => id === itemOrder[i])) {
       return;
     }
     while (ulNode.firstChild) {
       ulNode.removeChild(ulNode.lastChild);
     }
 
-    itemOrder.forEach(id => {
-      ulNode.appendChild(nodes.find(n => n.id === id));
+    itemOrder.forEach((id) => {
+      ulNode.appendChild(nodes.find((n) => n.id === id));
     });
   };
 
   const onDragCancel = () => {
-    Array.from(bodyRef.current.children).forEach(el => {
+    Array.from(bodyRef.current.children).forEach((el) => {
       el.classList.remove(styles.modifiers.ghostRow);
       el.setAttribute('aria-pressed', 'false');
     });
@@ -59,7 +59,7 @@ export const TableDraggable: React.FunctionComponent = () => {
     setIsDragging(false);
   };
 
-  const onDragLeave: TbodyProps['onDragLeave'] = evt => {
+  const onDragLeave: TbodyProps['onDragLeave'] = (evt) => {
     if (!isValidDrop(evt)) {
       move(itemOrder);
       setDraggingToItemIndex(null);
@@ -76,7 +76,7 @@ export const TableDraggable: React.FunctionComponent = () => {
     );
   };
 
-  const onDrop: TrProps['onDrop'] = evt => {
+  const onDrop: TrProps['onDrop'] = (evt) => {
     if (isValidDrop(evt)) {
       setItemOrder(tempItemOrder);
     } else {
@@ -84,7 +84,7 @@ export const TableDraggable: React.FunctionComponent = () => {
     }
   };
 
-  const onDragOver: TbodyProps['onDragOver'] = evt => {
+  const onDragOver: TbodyProps['onDragOver'] = (evt) => {
     evt.preventDefault();
 
     const curListItem = (evt.target as HTMLTableSectionElement).closest('tr');
@@ -92,7 +92,7 @@ export const TableDraggable: React.FunctionComponent = () => {
       return null;
     } else {
       const dragId = curListItem.id;
-      const newDraggingToItemIndex = Array.from(bodyRef.current.children).findIndex(item => item.id === dragId);
+      const newDraggingToItemIndex = Array.from(bodyRef.current.children).findIndex((item) => item.id === dragId);
       if (newDraggingToItemIndex !== draggingToItemIndex) {
         const tempItemOrder = moveItem([...itemOrder], draggedItemId, newDraggingToItemIndex);
         move(tempItemOrder);
@@ -102,7 +102,7 @@ export const TableDraggable: React.FunctionComponent = () => {
     }
   };
 
-  const onDragEnd: TrProps['onDragEnd'] = evt => {
+  const onDragEnd: TrProps['onDragEnd'] = (evt) => {
     const target = evt.target as HTMLTableRowElement;
     target.classList.remove(styles.modifiers.ghostRow);
     target.setAttribute('aria-pressed', 'false');

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

@@ -96,11 +96,11 @@ export const TableExpandable: React.FunctionComponent = () => {
   // In this example, expanded 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.
   // 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 initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded
   const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
   const setRepoExpanded = (repo: Repository, isExpanding = true) =>
-    setExpandedRepoNames(prevExpanded => {
-      const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name);
+    setExpandedRepoNames((prevExpanded) => {
+      const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);
       return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;
     });
   const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);

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

@@ -36,8 +36,8 @@ export const TableFavoritable: React.FunctionComponent = () => {
   // Favorite state is similar to selection state, see Selectable with checkbox.
   const [favoriteRepoNames, setFavoriteRepoNames] = React.useState<string[]>([]);
   const setRepoFavorited = (repo: Repository, isFavoriting = true) =>
-    setFavoriteRepoNames(prevFavorites => {
-      const otherFavorites = prevFavorites.filter(r => r !== repo.name);
+    setFavoriteRepoNames((prevFavorites) => {
+      const otherFavorites = prevFavorites.filter((r) => r !== repo.name);
       return isFavoriting ? [...otherFavorites, repo.name] : otherFavorites;
     });
   const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name);
@@ -47,10 +47,10 @@ export const TableFavoritable: React.FunctionComponent = () => {
   // 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((repo: Repository): boolean[] => [isRepoFavorited(repo)], [
-    activeSortIndex,
-    activeSortDirection
-  ]);
+  const getSortableRowValues = React.useCallback(
+    (repo: Repository): boolean[] => [isRepoFavorited(repo)],
+    [activeSortIndex, activeSortDirection]
+  );
 
   // Note that we perform the sort as part of the component's render logic and not in onSort.
   // We shouldn't store the list of data in state because we don't want to have to sync that with props.

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

@@ -114,7 +114,7 @@ export const TableMultipleStickyColumns: React.FunctionComponent = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {sortedFacts.map(fact => (
+          {sortedFacts.map((fact) => (
             <Tr key={fact.name}>
               <Th isStickyColumn modifier="truncate">
                 {fact.name}

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

@@ -1,14 +1,5 @@
 import React from 'react';
-import {
-  Table,
-  Thead,
-  Tr,
-  Th,
-  Tbody,
-  Td,
-  InnerScrollContainer,
-  ExpandableRowContent
-} from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ExpandableRowContent } from '@patternfly/react-table';
 import { Button } from '@patternfly/react-core';
 
 interface Team {
@@ -62,8 +53,8 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
   // Note that this behavior is very similar to selection state.
   const [expandedTeamNames, setExpandedTeamNames] = React.useState<string[]>([]);
   const setTeamExpanded = (team: Team, isExpanding = true) =>
-    setExpandedTeamNames(prevExpanded => {
-      const otherExpandedTeamNames = prevExpanded.filter(t => t !== team.name);
+    setExpandedTeamNames((prevExpanded) => {
+      const otherExpandedTeamNames = prevExpanded.filter((t) => t !== team.name);
       return isExpanding ? [...otherExpandedTeamNames, team.name] : otherExpandedTeamNames;
     });
   const isTeamExpanded = (team: Team) => expandedTeamNames.includes(team.name);

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

@@ -1,16 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react';
-import {
-  Table,
-  Thead,
-  Tr,
-  Th,
-  Tbody,
-  Td,
-  ExpandableRowContent,
-  ActionsColumn,
-  IAction
-} from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent, ActionsColumn, IAction } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -57,7 +47,7 @@ const NestedReposTable: React.FunctionComponent = () => {
         </Tr>
       </Thead>
       <Tbody>
-        {prs.map(repo => (
+        {prs.map((repo) => (
           <Tr key={repo.name}>
             <Td dataLabel={columnNames.name}>{repo.name}</Td>
             <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
@@ -111,11 +101,11 @@ export const TableExpandable: React.FunctionComponent = () => {
   // In this example, expanded 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.
   // 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 initialExpandedRepoNames = repositories.filter((repo) => !!repo.nestedComponent).map((repo) => repo.name); // Default to all expanded
   const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
   const setRepoExpanded = (repo: Repository, isExpanding = true) =>
-    setExpandedRepoNames(prevExpanded => {
-      const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name);
+    setExpandedRepoNames((prevExpanded) => {
+      const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);
       return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;
     });
   const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);

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

@@ -110,7 +110,7 @@ export const ComposableTableRightStickyColumn: React.FunctionComponent = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {sortedFacts.map(fact => (
+          {sortedFacts.map((fact) => (
             <Tr key={fact.name}>
               <Th modifier="nowrap">{fact.name}</Th>
               <Td modifier="nowrap" dataLabel={columnNames.state}>

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

@@ -35,12 +35,12 @@ export const TableSelectable: React.FunctionComponent = () => {
   // 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 setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? selectableRepos.map(r => r.name) : []);
+    setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []);
   const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
@@ -56,7 +56,7 @@ export const TableSelectable: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }

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

@@ -106,7 +106,7 @@ export const TableStickyColumn: React.FunctionComponent = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {sortedFacts.map(fact => (
+          {sortedFacts.map((fact) => (
             <Tr key={fact.name}>
               <Th isStickyColumn hasRightBorder modifier="truncate">
                 {fact.name}

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

@@ -126,7 +126,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
               </Tr>
             </Thead>
             <Tbody>
-              {sortedFacts.map(fact => (
+              {sortedFacts.map((fact) => (
                 <Tr key={fact.name}>
                   <Th isStickyColumn modifier="truncate">
                     {fact.name}

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

@@ -39,7 +39,7 @@ export const TableStriped: React.FunctionComponent = () => {
         </Tr>
       </Thead>
       <Tbody>
-        {repositories.map(repo => (
+        {repositories.map((repo) => (
           <Tr key={repo.name}>
             <Td dataLabel={columnNames.name}>{repo.name}</Td>
             <Td dataLabel={columnNames.branches}>{repo.branches}</Td>

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

@@ -91,11 +91,11 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
   // In this example, expanded 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.
   // 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 initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded
   const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
   const setRepoExpanded = (repo: Repository, isExpanding = true) =>
-    setExpandedRepoNames(prevExpanded => {
-      const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name);
+    setExpandedRepoNames((prevExpanded) => {
+      const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);
       return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;
     });
   const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);
@@ -112,12 +112,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
         id="toggle-compact-striped"
         name="toggle-compact-striped"
       />
-      <Table
-        aria-label="Expandable table"
-        variant={isExampleCompact ? 'compact' : undefined}
-        isStriped
-        isExpandable
-      >
+      <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined} isStriped isExpandable>
         <Thead>
           <Tr>
             <Th />

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

@@ -74,7 +74,7 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => {
         </Tr>
       </Thead>
       <Tbody isOddStriped>
-        {repositories1.map(repo => (
+        {repositories1.map((repo) => (
           <Tr key={repo.name}>
             <Td dataLabel={columnNames.name}>
               {repo.description ? (
@@ -95,7 +95,7 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => {
         ))}
       </Tbody>
       <Tbody isEvenStriped>
-        {repositories2.map(repo => (
+        {repositories2.map((repo) => (
           <Tr key={repo.name}>
             <Td dataLabel={columnNames.name}>
               {repo.description ? (

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

@@ -93,7 +93,7 @@ export const TableTree: React.FunctionComponent = () => {
       return [node];
     } else {
       let children: RepositoriesTreeNode[] = [];
-      node.children.forEach(child => {
+      node.children.forEach((child) => {
         children = [...children, ...getDescendants(child)];
       });
       return children;
@@ -101,9 +101,9 @@ export const TableTree: React.FunctionComponent = () => {
   };
 
   const areAllDescendantsSelected = (node: RepositoriesTreeNode) =>
-    getDescendants(node).every(n => selectedNodeNames.includes(n.name));
+    getDescendants(node).every((n) => selectedNodeNames.includes(n.name));
   const areSomeDescendantsSelected = (node: RepositoriesTreeNode) =>
-    getDescendants(node).some(n => selectedNodeNames.includes(n.name));
+    getDescendants(node).some((n) => selectedNodeNames.includes(n.name));
 
   const isNodeChecked = (node: RepositoriesTreeNode) => {
     if (areAllDescendantsSelected(node)) {
@@ -144,19 +144,19 @@ export const TableTree: React.FunctionComponent = () => {
 
     const treeRow: TdProps['treeRow'] = {
       onCollapse: () =>
-        setExpandedNodeNames(prevExpanded => {
-          const otherExpandedNodeNames = prevExpanded.filter(name => name !== node.name);
+        setExpandedNodeNames((prevExpanded) => {
+          const otherExpandedNodeNames = prevExpanded.filter((name) => name !== node.name);
           return isExpanded ? otherExpandedNodeNames : [...otherExpandedNodeNames, node.name];
         }),
       onToggleRowDetails: () =>
-        setExpandedDetailsNodeNames(prevDetailsExpanded => {
-          const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter(name => name !== node.name);
+        setExpandedDetailsNodeNames((prevDetailsExpanded) => {
+          const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter((name) => name !== node.name);
           return isDetailsExpanded ? otherDetailsExpandedNodeNames : [...otherDetailsExpandedNodeNames, node.name];
         }),
       onCheckChange: (_event, isChecking) => {
-        const nodeNamesToCheck = getDescendants(node).map(n => n.name);
-        setSelectedNodeNames(prevSelected => {
-          const otherSelectedNodeNames = prevSelected.filter(name => !nodeNamesToCheck.includes(name));
+        const nodeNamesToCheck = getDescendants(node).map((n) => n.name);
+        setSelectedNodeNames((prevSelected) => {
+          const otherSelectedNodeNames = prevSelected.filter((name) => !nodeNamesToCheck.includes(name));
           return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, ...nodeNamesToCheck];
         });
       },