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

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

@@ -0,0 +1,121 @@
+import React 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';
+
+interface RepositoriesTreeNode {
+  name: string;
+  branches: string;
+  pullRequests: string;
+  workspaces: string;
+  children?: RepositoriesTreeNode[];
+}
+
+export const TableTreeNoInset: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const data: RepositoriesTreeNode[] = [
+    {
+      name: 'Repositories one',
+      branches: 'Branch one',
+      pullRequests: 'Pull request one',
+      workspaces: 'Workplace one',
+      children: []
+    },
+    {
+      name: 'Repositories seven',
+      branches: 'Branch seven',
+      pullRequests: 'Pull request seven',
+      workspaces: 'Workplace seven',
+      children: []
+    },
+    {
+      name: 'Repositories nine',
+      branches: 'Branch nine',
+      pullRequests: 'Pull request nine',
+      workspaces: 'Workplace nine'
+    }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces'
+  };
+
+  const [selectedNodeNames, setSelectedNodeNames] = React.useState<string[]>([]);
+  const isNodeChecked = (node: RepositoriesTreeNode) => selectedNodeNames.includes(node.name);
+
+  /**
+   Recursive function which flattens the data into an array of flattened TreeRowWrapper components
+   params:
+   - nodes - array of a single level of tree nodes
+   - level - number representing how deeply nested the current row is
+   - posinset - position of the row relative to this row's siblings
+   - currentRowIndex - position of the row relative to the entire table
+   - isHidden - defaults to false, true if this row's parent is expanded
+   */
+  const renderRows = (
+    [node, ...remainingNodes]: RepositoriesTreeNode[],
+    level = 1,
+    posinset = 1,
+    rowIndex = 0,
+    isHidden = false
+  ): React.ReactNode[] => {
+    if (!node) {
+      return [];
+    }
+    const isChecked = isNodeChecked(node);
+    const icon = <LeafIcon />;
+
+    const treeRow: TdProps['treeRow'] = {
+      onCollapse: () => {},
+      onToggleRowDetails: () => {},
+      onCheckChange: (_event, isChecking) => {
+        setSelectedNodeNames((prevSelected) => {
+          const otherSelectedNodeNames = prevSelected.filter((name) => name === node.name);
+          return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, node.name];
+        });
+      },
+      rowIndex,
+      props: {
+        isHidden,
+        'aria-level': level,
+        'aria-posinset': posinset,
+        'aria-setsize': node.children ? node.children.length : 0,
+        isChecked,
+        checkboxId: `flat_checkbox_id_${node.name.toLowerCase().replace(/\s+/g, '_')}`,
+        icon
+      }
+    };
+
+    const childRows =
+      node.children && node.children.length ? renderRows(node.children, level + 1, 1, rowIndex + 1, isHidden) : [];
+
+    return [
+      <TreeRowWrapper key={node.name} row={{ props: treeRow.props }}>
+        <Td dataLabel={columnNames.name} treeRow={treeRow}>
+          {node.name}
+        </Td>
+        <Td dataLabel={columnNames.branches}>{node.branches}</Td>
+        <Td dataLabel={columnNames.prs}>{node.pullRequests}</Td>
+        <Td dataLabel={columnNames.workspaces}>{node.workspaces}</Td>
+      </TreeRowWrapper>,
+      ...childRows,
+      ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden)
+    ];
+  };
+
+  return (
+    <Table isTreeTable aria-label="Tree table" hasNoInset>
+      <Thead>
+        <Tr>
+          <Th width={40}>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>{renderRows(data)}</Tbody>
+    </Table>
+  );
+};

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

@@ -21,59 +21,57 @@ const resolveOrDefault = (
   extraData: IExtraData
 ) => (typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue);
 
-export const cellActions = (
-  actions: IActions,
-  actionResolver: IActionsResolver,
-  areActionsDisabled: IAreActionsDisabled
-): ITransform => (
-  label: IFormatterValueType,
-  {
-    rowData,
-    column,
-    rowIndex,
-    columnIndex,
-    column: {
-      extraParams: { actionsToggle, actionsPopperProps }
-    },
-    property
-  }: IExtra
-) => {
-  const extraData = {
-    rowIndex,
-    columnIndex,
-    column,
-    property
-  };
-  const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData) as IAction[];
-  const resolvedIsDisabled = resolveOrDefault(
-    areActionsDisabled,
-    rowData && rowData.disableActions,
-    rowData,
-    extraData
-  ) as boolean;
+export const cellActions =
+  (actions: IActions, actionResolver: IActionsResolver, areActionsDisabled: IAreActionsDisabled): ITransform =>
+  (
+    label: IFormatterValueType,
+    {
+      rowData,
+      column,
+      rowIndex,
+      columnIndex,
+      column: {
+        extraParams: { actionsToggle, actionsPopperProps }
+      },
+      property
+    }: IExtra
+  ) => {
+    const extraData = {
+      rowIndex,
+      columnIndex,
+      column,
+      property
+    };
+    const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData) as IAction[];
+    const resolvedIsDisabled = resolveOrDefault(
+      areActionsDisabled,
+      rowData && rowData.disableActions,
+      rowData,
+      extraData
+    ) as boolean;
 
-  const renderProps =
-    resolvedActions && (resolvedActions as []).length > 0
-      ? {
-          children: (
-            <ActionsColumn
-              items={resolvedActions}
-              isDisabled={resolvedIsDisabled}
-              rowData={rowData}
-              extraData={extraData}
-              actionsToggle={actionsToggle}
-              popperProps={actionsPopperProps}
-            >
-              {label as React.ReactNode}
-            </ActionsColumn>
-          )
-        }
-      : {};
+    const renderProps =
+      resolvedActions && (resolvedActions as []).length > 0
+        ? {
+            children: (
+              <ActionsColumn
+                items={resolvedActions}
+                isDisabled={resolvedIsDisabled}
+                rowData={rowData}
+                extraData={extraData}
+                actionsToggle={actionsToggle}
+                popperProps={actionsPopperProps}
+              >
+                {label as React.ReactNode}
+              </ActionsColumn>
+            )
+          }
+        : {};
 
-  return {
-    className: css(styles.tableAction),
-    style: { paddingRight: 0 },
-    isVisible: true,
-    ...renderProps
+    return {
+      className: css(styles.tableAction),
+      style: { paddingRight: 0 },
+      isVisible: true,
+      ...renderProps
+    };
   };
-};

package/src/components/Table/utils/decorators/cellWidth.ts

@@ -19,12 +19,12 @@ type WidthClass =
   | 'width_90'
   | 'width_100';
 
-export const cellWidth = (
-  width: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100
-): ITransform => () => ({
-  className: css(
-    styles.modifiers[
-      typeof width === 'number' ? (`width_${width}` as WidthClass) : (`width${capitalize(width)}` as WidthClass)
-    ]
-  )
-});
+export const cellWidth =
+  (width: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100): ITransform =>
+  () => ({
+    className: css(
+      styles.modifiers[
+        typeof width === 'number' ? (`width_${width}` as WidthClass) : (`width${capitalize(width)}` as WidthClass)
+      ]
+    )
+  });

package/src/components/Table/utils/decorators/classNames.ts

@@ -31,13 +31,15 @@ export interface IVisibility {
 }
 
 export const Visibility = visibilityModifiers
-  .filter(key => styles.modifiers[key])
+  .filter((key) => styles.modifiers[key])
   .reduce((acc, curr) => {
     const key2 = curr.replace('_2xl', '2Xl') as keyof typeof Visibility;
     acc[key2] = styles.modifiers[curr];
     return acc;
   }, {} as IVisibility);
 
-export const classNames = (...classes: string[]): ITransform => () => ({
-  className: css(...classes)
-});
+export const classNames =
+  (...classes: string[]): ITransform =>
+  () => ({
+    className: css(...classes)
+  });

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

@@ -15,7 +15,7 @@ export const editable: ITransform = (label: IFormatterValueType, { rowIndex, row
       validationErrors =
         rowData.rowEditValidationRules &&
         rowData.rowEditValidationRules.reduce((acc, rule) => {
-          const invalidCells = (rowData.cells as IRowCell[]).filter(cellData => {
+          const invalidCells = (rowData.cells as IRowCell[]).filter((cellData) => {
             const testValue =
               cellData.props.editableValue === '' ? '' : cellData.props.editableValue || cellData.props.value;
 
@@ -45,7 +45,7 @@ export const editable: ITransform = (label: IFormatterValueType, { rowIndex, row
           });
 
           if (invalidCells.length) {
-            acc[rule.name] = invalidCells.map(cell => cell.props.name);
+            acc[rule.name] = invalidCells.map((cell) => cell.props.name);
           }
           return acc;
         }, {} as RowErrors);

package/src/components/Table/utils/headerUtils.test.tsx

@@ -12,9 +12,9 @@ describe('headerUtils', () => {
       expect(collapsibleTransfroms[0].extraParams.onCollapse).toBeDefined();
       expect(collapsibleTransfroms[0].header.transforms).toHaveLength(2);
       expect(collapsibleTransfroms[1].cell.transforms).toHaveLength(3);
-      expect(collapsibleTransfroms[1].cell.transforms.find(transform => transform.name === 'parentId')).toBeDefined();
+      expect(collapsibleTransfroms[1].cell.transforms.find((transform) => transform.name === 'parentId')).toBeDefined();
       expect(
-        collapsibleTransfroms[1].cell.transforms.find(transform => transform.name === 'expandedRowFormatter')
+        collapsibleTransfroms[1].cell.transforms.find((transform) => transform.name === 'expandedRowFormatter')
       ).toBeDefined();
     });
 
@@ -101,8 +101,8 @@ describe('headerUtils', () => {
           ],
           {}
         );
-        expect(result[0].header.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined();
-        expect(result[0].header.transforms.find(transform => transform.name === 'testFunc')).toBeDefined();
+        expect(result[0].header.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined();
+        expect(result[0].header.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined();
       });
 
       test('custom functions in header', () => {
@@ -119,8 +119,8 @@ describe('headerUtils', () => {
           ],
           {}
         );
-        expect(result[0].header.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined();
-        expect(result[0].header.transforms.find(transform => transform.name === 'testFunc')).toBeDefined();
+        expect(result[0].header.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined();
+        expect(result[0].header.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined();
       });
     });
 
@@ -151,8 +151,8 @@ describe('headerUtils', () => {
           ],
           {}
         );
-        expect(result[0].cell.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined();
-        expect(result[0].cell.transforms.find(transform => transform.name === 'testFunc')).toBeDefined();
+        expect(result[0].cell.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined();
+        expect(result[0].cell.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined();
       });
 
       test('custom functions in header', () => {
@@ -169,8 +169,8 @@ describe('headerUtils', () => {
           ],
           {}
         );
-        expect(result[0].cell.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined();
-        expect(result[0].cell.transforms.find(transform => transform.name === 'testFunc')).toBeDefined();
+        expect(result[0].cell.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined();
+        expect(result[0].cell.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined();
       });
 
       describe('custom dataLabel', () => {

package/src/components/Table/utils/headerUtils.tsx

@@ -99,13 +99,7 @@ const mapHeader = (column: ICell, extra: any, key: number, ...props: any) => {
   }
 
   return {
-    property:
-      (typeof title === 'string' &&
-        title
-          .toLowerCase()
-          .trim()
-          .replace(/\s/g, '-')) ||
-      `column-${key}`,
+    property: (typeof title === 'string' && title.toLowerCase().trim().replace(/\s/g, '-')) || `column-${key}`,
     extraParams: extra,
     data: column.data,
     header: generateHeader(column, title),

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

@@ -37,12 +37,12 @@ export const isRowExpanded = (row: IRow, rows: IRow[]) => {
 };
 
 export const getErrorTextByValidator = (validatorName: string, validators: IValidatorDef[]) => {
-  const result = validators.filter(validator => validator.name === validatorName);
+  const result = validators.filter((validator) => validator.name === validatorName);
   return result[0].errorText;
 };
 
 export const cancelCellEdits = (row: IRow) => {
-  (row.cells as IRowCell[]).forEach(cell => {
+  (row.cells as IRowCell[]).forEach((cell) => {
     delete cell.props.errorText;
     delete cell.props.editableValue;
     cell.props.isValid = true;
@@ -65,7 +65,7 @@ export const validateCellEdits = (
 ) => {
   row.isValid = Object.keys(validationErrors).length ? false : true;
 
-  (row.cells as IRowCell[]).forEach(cell => {
+  (row.cells as IRowCell[]).forEach((cell) => {
     delete cell.props.errorText;
 
     const hasValue = cell.props.value !== undefined && cell.props.value !== null;
@@ -74,8 +74,8 @@ export const validateCellEdits = (
     if (cell.props && hasValue && hasEditableValue) {
       if (type === 'save') {
         const errorMsg = Object.keys(validationErrors)
-          .filter(validatorName => validationErrors[validatorName].includes(cell.props.name))
-          .map(validatorName => getErrorTextByValidator(validatorName, row.rowEditValidationRules));
+          .filter((validatorName) => validationErrors[validatorName].includes(cell.props.name))
+          .map((validatorName) => getErrorTextByValidator(validatorName, row.rowEditValidationRules));
 
         if (errorMsg.length) {
           cell.props.errorText = cell.props.name ? errorMsg.join(', ') : missingPropErrorTxt;
@@ -94,7 +94,7 @@ export const validateCellEdits = (
 };
 
 export const applyCellEdits = (row: IRow, type: RowEditType) => {
-  (row.cells as IRowCell[]).forEach(cell => {
+  (row.cells as IRowCell[]).forEach((cell) => {
     delete cell.props.errorText;
     const hasValue = cell.props.value !== undefined && cell.props.value !== null;
     const hasEditableValue = cell.props.editableValue !== undefined && cell.props.editableValue !== null;
@@ -119,11 +119,7 @@ export const applyCellEdits = (row: IRow, type: RowEditType) => {
   return row;
 };
 
-const camelize = (s: string) =>
-  s
-    .toUpperCase()
-    .replace('-', '')
-    .replace('_', '');
+const camelize = (s: string) => s.toUpperCase().replace('-', '').replace('_', '');
 export const toCamel = (s: string) => s.replace(/([-_][a-z])/gi, camelize);
 
 /**

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

@@ -28,7 +28,7 @@ export const BodyWrapper: React.FunctionComponent<BodyWrapperProps> = ({
   /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: BodyWrapperProps) => {
-  if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) {
+  if (mappedRows && mappedRows.some((row) => row.hasOwnProperty('parent'))) {
     return (
       <React.Fragment>
         {mapOpenedRows(mappedRows, props.children).map((oneRow, key) => (

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

@@ -27,7 +27,8 @@ import {
   IHeaderRow,
   OnFavorite,
   TreeRowWrapper,
-  CustomActionsToggleProps } from '../../../components';
+  CustomActionsToggleProps
+} from '../../../components';
 
 export interface TableProps extends OUIAProps {
   /** Adds an accessible name for the Table */
@@ -131,7 +132,7 @@ export interface TableProps extends OUIAProps {
   ouiaSafe?: boolean;
 }
 
-export class Table extends React.Component<TableProps, {}> {
+class Table extends React.Component<TableProps, {}> {
   static displayName = 'Table';
   static hasWarnBeta = false;
   static defaultProps: Partial<TableProps> = {
@@ -297,3 +298,5 @@ export class Table extends React.Component<TableProps, {}> {
     return table;
   }
 }
+
+export { Table };

package/src/deprecated/components/Table/base/body-row.tsx

@@ -28,7 +28,7 @@ export interface BodyRowProps {
   rowKey: string;
 }
 
-export class BodyRow extends React.Component<BodyRowProps, {}> {
+class BodyRow extends React.Component<BodyRowProps, {}> {
   static displayName = 'BodyRow';
   static defaultProps = {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -97,3 +97,5 @@ export class BodyRow extends React.Component<BodyRowProps, {}> {
     );
   }
 }
+
+export { BodyRow };

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

@@ -6,7 +6,14 @@
  */
 import * as React from 'react';
 import isEqual from 'lodash/isEqual';
-import { RowsType, RowType, RowKeyType, RenderersTypes, createElementType, ColumnsType } from '../../../../components/Table/base/types';
+import {
+  RowsType,
+  RowType,
+  RowKeyType,
+  RenderersTypes,
+  createElementType,
+  ColumnsType
+} from '../../../../components/Table/base/types';
 import { ProviderContext } from '../../../../components/Table/base/provider';
 import { resolveRowKey } from './resolve-row-key';
 import { BodyRow } from './body-row';

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

@@ -5,12 +5,7 @@
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
 import * as React from 'react';
-import {
-  createElementType,
-  RowsType,
-  ColumnsType,
-  RenderersTypes
-} from '../../../../components/Table/base/types';
+import { createElementType, RowsType, ColumnsType, RenderersTypes } from '../../../../components/Table/base/types';
 import { ProviderContext } from '../../../../components/Table/base/provider';
 
 import { HeaderRow } from './header-row';

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

@@ -19,12 +19,7 @@ import {
   IActionsResolver,
   TableText
 } from '@patternfly/react-table';
-import {
-  Table,
-  TableBody,
-  TableHeader,
-  TableProps
-} from '@patternfly/react-table/deprecated';
+import { Table, TableBody, TableHeader, TableProps } from '@patternfly/react-table/deprecated';
 
 interface Repository {
   name: string;
@@ -78,7 +73,7 @@ export const LegacyTableActions: React.FunctionComponent = () => {
     { title: '', dataLabel: 'Action', cellTransforms: [fitContent] }
   ];
 
-  const rows: TableProps['rows'] = repositories.map(repo => {
+  const rows: TableProps['rows'] = repositories.map((repo) => {
     let singleActionButton: React.ReactNode = null;
     if (repo.singleAction !== '') {
       singleActionButton = (
@@ -196,7 +191,7 @@ export const LegacyTableActions: React.FunctionComponent = () => {
         rows={rows}
         {...(propToUse === 'actions' && { actions })}
         {...(propToUse === 'actionResolver' && { actionResolver })}
-        areActionsDisabled={rowData => !!rowData.disableActions}
+        areActionsDisabled={(rowData) => !!rowData.disableActions}
         dropdownPosition="left"
         dropdownDirection="down"
         actionsToggle={useCustomToggle ? customActionsToggle : undefined}

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

@@ -45,7 +45,7 @@ export const LegacyTableBasic: React.FunctionComponent = () => {
   };
 
   const columns: TableProps['cells'] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
-  const rows: TableProps['rows'] = repositories.map(repo => [
+  const rows: TableProps['rows'] = repositories.map((repo) => [
     repo.name,
     repo.branches,
     repo.prs,

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

@@ -50,7 +50,7 @@ export const LegacyTableCellWidth: React.FunctionComponent = () => {
       transforms: [cellWidth(30)]
     }
   ];
-  const rows: TableProps['rows'] = repositories.map(repo => [
+  const rows: TableProps['rows'] = repositories.map((repo) => [
     repo.name,
     repo.branches,
     repo.prs,

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

@@ -72,7 +72,7 @@ export const LegacyTableClickable: React.FunctionComponent = () => {
       cellTransforms: [textCenter]
     }
   ];
-  const rows: TableProps['rows'] = repositories.map(repo => {
+  const rows: TableProps['rows'] = repositories.map((repo) => {
     let cells: (string | ICell)[] = [repo.name, repo.branches || '', repo.prs || '', repo.workspaces, repo.lastCommit];
     // These rows have arbitrary differences for this example, but these could be based on some other conditions
     if (repo.name === 'one - 2') {

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

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  cellWidth,
-  truncate,
-  breakWord,
-  wrappable,
-  fitContent,
-  nowrap
-} from '@patternfly/react-table';
+import { cellWidth, truncate, breakWord, wrappable, fitContent, nowrap } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 // This example has been simplified to focus on the text modifier props. In real usage,

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

@@ -77,11 +77,11 @@ export const LegacyTableExpandable: 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);
@@ -103,7 +103,7 @@ export const LegacyTableExpandable: React.FunctionComponent = () => {
     { title: '' /* deliberately empty */, dataLabel: 'Label for mobile view' }
   ];
   const rows: TableProps['rows'] = [];
-  repositories.forEach(repo => {
+  repositories.forEach((repo) => {
     rows.push({
       ...(repo.details ? { isOpen: isRepoExpanded(repo) } : {}),
       cells: [repo.name, repo.branches, repo.prs, repo.workspaces]

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

@@ -30,8 +30,8 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => {
   // Favorite state is similar to selection state. See selectedRepoNames and associated code below.
   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);
@@ -78,12 +78,12 @@ export const LegacyTableFavoritable: 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 isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   const columns: TableProps['cells'] = [
@@ -93,7 +93,7 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => {
     'Workspaces',
     'Last commit'
   ];
-  const rows: TableProps['rows'] = sortedRepositories.map(repo => {
+  const rows: TableProps['rows'] = sortedRepositories.map((repo) => {
     const favorited = isRepoFavorited(repo);
     return {
       favorited,

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

@@ -31,7 +31,7 @@ export const LegacyTableSelectableRadio: React.FunctionComponent = () => {
     'Workspaces',
     'Last commit'
   ];
-  const rows: TableProps['rows'] = repositories.map(repo => ({
+  const rows: TableProps['rows'] = repositories.map((repo) => ({
     cells: [repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit],
     selected: selectedRepoName === repo.name,
     disableSelection: !isRepoSelectable(repo)