@patternfly/react-table 4.61.18 → 4.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "4.61.18",
+  "version": "4.62.0",
   "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",
@@ -31,10 +31,10 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.192.18",
-    "@patternfly/react-icons": "^4.43.18",
-    "@patternfly/react-styles": "^4.42.18",
-    "@patternfly/react-tokens": "^4.44.18",
+    "@patternfly/react-core": "^4.193.0",
+    "@patternfly/react-icons": "^4.44.0",
+    "@patternfly/react-styles": "^4.43.0",
+    "@patternfly/react-tokens": "^4.45.0",
     "lodash": "^4.17.19",
     "tslib": "^2.0.0"
   },
@@ -46,5 +46,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "2d02c33cb5709f4127f04d277e2349a4402b2753"
+  "gitHead": "acfe91c96bf582f580d05d671f1fd979bd88d830"
 }

package/src/components/Table/Body.tsx

@@ -32,6 +32,10 @@ export interface TableBodyProps {
   onRowClick?: OnRowClick;
   /** @hide This prop should not be set manually  */
   onRow?: Function;
+  /** Flag indicating the <tbody> contains oddly striped rows. */
+  isOddStriped?: boolean;
+  /** Flag indicating the <tbody> contains evenly striped rows. */
+  isEvenStriped?: boolean;
 }
 
 const flagVisibility = (rows: IRow[]) => {

package/src/components/Table/Table.tsx

@@ -114,6 +114,10 @@ export interface TableProps extends OUIAProps {
   isTreeTable?: boolean;
   /** Flag indicating this table is nested within another table */
   isNested?: boolean;
+  /** Flag indicating this table is striped */
+  isStriped?: boolean;
+  /** Flag indicating this table contains expandable rows to maintain proper striping */
+  isExpandable?: boolean;
 }
 
 export class Table extends React.Component<TableProps, {}> {

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table';
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const LegacyTableStriped: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    {
+      name: 'Repository one',
+      branches: 'Branch one',
+      prs: 'PR one',
+      workspaces: 'Workspace one',
+      lastCommit: 'Commit one'
+    },
+    {
+      name: 'Repository two',
+      branches: 'Branch two',
+      prs: 'PR two',
+      workspaces: 'Workspace two',
+      lastCommit: 'Commit two'
+    },
+    {
+      name: 'Repository three',
+      branches: 'Branch three',
+      prs: 'PR three',
+      workspaces: 'Workspace three',
+      lastCommit: 'Commit three'
+    }
+  ];
+
+  const columns: TableProps['cells'] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+  const rows: TableProps['rows'] = repositories.map(repo => [
+    repo.name,
+    repo.branches,
+    repo.prs,
+    repo.workspaces,
+    repo.lastCommit
+  ]);
+
+  return (
+    <Table aria-label="Simple Table" cells={columns} rows={rows} isStriped>
+      <TableHeader />
+      <TableBody />
+    </Table>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table';
+import { css } from '@patternfly/react-styles';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const LegacyTableStripedCustomTr: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }
+  ];
+
+  const columns: TableProps['cells'] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+  const rows: TableProps['rows'] = repositories.map(repo => [
+    repo.name,
+    repo.branches || '',
+    repo.prs || '',
+    repo.workspaces,
+    repo.lastCommit
+  ]);
+
+  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row, ...props }) => {
+    const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true;
+    return (
+      <tr
+        {...props}
+        ref={trRef as React.LegacyRef<HTMLTableRowElement>}
+        className={css(className, isOddRow && 'pf-m-striped')}
+      />
+    );
+  };
+
+  return (
+    <Table
+      caption="Table with custom row wrapper that stripes odd rows"
+      cells={columns}
+      rows={rows}
+      rowWrapper={customRowWrapper}
+    >
+      <TableHeader />
+      <TableBody />
+    </Table>
+  );
+};

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import { Table, TableBody, TableHeader, TableVariant, TableProps, expandable, IRowCell } from '@patternfly/react-table';
+import { Checkbox } from '@patternfly/react-core';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  details?: {
+    detail1?: string;
+    detail2?: string;
+    detail3?: string;
+    detailFormat: 0 | 1 | 2 | 3;
+  };
+}
+
+export const LegacyTableStripedExpandable: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four' },
+    {
+      name: 'parent 1',
+      branches: 'two',
+      prs: 'k',
+      workspaces: 'four',
+      // This `details` structure is just for this example. You can drive expanded content from any kind of data.
+      details: { detailFormat: 0, detail1: 'single cell' }
+    },
+    {
+      name: 'parent 2',
+      branches: 'two',
+      prs: 'b',
+      workspaces: 'four',
+      details: { detailFormat: 1, detail1: 'single cell - fullWidth' }
+    },
+    {
+      name: 'parent 3',
+      branches: '2',
+      prs: 'b',
+      workspaces: 'four',
+      details: { detailFormat: 2, detail1: 'single cell - noPadding' }
+    },
+    {
+      name: 'parent 4',
+      branches: '2',
+      prs: 'b',
+      workspaces: 'four',
+      details: { detailFormat: 3, detail1: 'single cell - fullWidth & noPadding' }
+    },
+    {
+      name: 'parent 5',
+      branches: '2',
+      prs: 'b',
+      workspaces: 'four',
+      details: {
+        detailFormat: 0,
+        detail1: "spans 'Repositories and 'Branches'",
+        detail2: "spans 'Pull requests' and 'Workspaces', and 'Last commit'"
+      }
+    },
+    {
+      name: 'parent 6',
+      branches: '2',
+      prs: 'b',
+      workspaces: 'four',
+      details: {
+        detailFormat: 1,
+        detail1: "fullWidth, spans the collapsible column and 'Repositories'",
+        detail2: "fullWidth, spans 'Branches' and 'Pull requests'",
+        detail3: 'fullWidth, spans the empty column'
+      }
+    }
+  ];
+
+  // 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 [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
+  const setRepoExpanded = (repo: Repository, isExpanding = true) =>
+    setExpandedRepoNames(prevExpanded => {
+      const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name);
+      return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;
+    });
+  const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);
+
+  const [isExampleCompact, setIsExampleCompact] = React.useState(true);
+
+  // We want to be able to reference the original data object based on row index. But because an expanded
+  // row takes up two row indexes, repositories[rowIndex] will not be accurate like it would in a normal table.
+  // One solution to this is to create an array of data objects indexed by the displayed row index.
+  const reposByRowIndex: (Repository | null)[] = [];
+
+  const columns: TableProps['cells'] = [
+    {
+      title: 'Repositories',
+      cellFormatters: [expandable]
+    },
+    'Branches',
+    { title: 'Pull requests' },
+    { title: '' /* deliberately empty */, dataLabel: 'Label for mobile view' }
+  ];
+  const rows: TableProps['rows'] = [];
+  repositories.forEach(repo => {
+    rows.push({
+      ...(repo.details ? { isOpen: isRepoExpanded(repo) } : {}),
+      cells: [repo.name, repo.branches, repo.prs, repo.workspaces]
+    });
+    reposByRowIndex.push(repo);
+    if (repo.details) {
+      // Some arbitrary examples of how you could customize the child row based on your needs
+      const { detail1, detail2, detail3, detailFormat } = repo.details;
+      const numColumns = 5;
+      const childIsFullWidth = [1, 3].includes(detailFormat);
+      const childHasNoPadding = [2, 3].includes(detailFormat);
+      let detailColSpans = [1, 1, 1];
+      if (detail1 && !detail2 && !detail3) {
+        detailColSpans = [childIsFullWidth ? numColumns : numColumns + 1]; // Account for toggle column
+      } else if (detail1 && detail2 && !detail3) {
+        detailColSpans = [2, childIsFullWidth ? 3 : 4];
+      } else if (detail1 && detail2 && detail3) {
+        detailColSpans = [2, 2, childIsFullWidth ? 1 : 2];
+      }
+      const cells: IRowCell[] = [];
+      [detail1, detail2, detail3].forEach((detail, index) => {
+        if (detail) {
+          cells.push({
+            title: detail1,
+            props: {
+              colSpan: detailColSpans[index]
+            }
+          });
+        }
+      });
+      rows.push({
+        parent: rows.length - 1,
+        cells,
+        fullWidth: childIsFullWidth,
+        noPadding: childHasNoPadding
+      });
+      reposByRowIndex.push(null);
+    }
+  });
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Compact"
+        isChecked={isExampleCompact}
+        onChange={checked => setIsExampleCompact(checked)}
+        aria-label="toggle striped compact variation"
+        id="toggle-compact-striped"
+        name="toggle-compact-striped"
+      />
+      <Table
+        aria-label="Expandable table"
+        variant={isExampleCompact ? TableVariant.compact : undefined}
+        onCollapse={(_event, rowIndex, isOpen) => {
+          if (reposByRowIndex[rowIndex]) {
+            setRepoExpanded(reposByRowIndex[rowIndex], isOpen);
+          }
+        }}
+        rows={rows}
+        cells={columns}
+        isStriped
+        isExpandable
+      >
+        <TableHeader />
+        <TableBody />
+      </Table>
+    </React.Fragment>
+  );
+};

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

@@ -792,3 +792,24 @@ the voice over technologies will recognize the flat table structure as a tree.
 
 ```ts isBeta file="LegacyTableTree.tsx"
 ```
+
+### Striped
+
+To apply striping to a basic table, add the `isStriped` property to `Table`.
+
+```ts file="LegacyTableStriped.tsx"
+```
+
+### Striped expandable
+
+To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`.
+
+```ts file="LegacyTableStripedExpandable.tsx"
+```
+
+### Striped custom tr
+
+To manually control striping, use a custom row wrapper that applies the `pf-m-striped` css class for each desired row.
+
+```ts file="LegacyTableStripedCustomTr.tsx"
+```

package/src/components/TableComposable/TableComposable.tsx

@@ -53,7 +53,11 @@ export interface TableComposableProps extends React.HTMLProps<HTMLTableElement>,
   isTreeTable?: boolean;
   /** Flag indicating this table is nested within another table */
   isNested?: boolean;
-  /** Collection of column spans for nested headers */
+  /** Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components. */
+  isStriped?: boolean;
+  /** Flag indicating this table contains expandable rows to maintain proper striping */
+  isExpandable?: boolean;
+  /** Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584 */
   nestedHeaderColumnSpans?: number[];
 }
 
@@ -71,6 +75,9 @@ const TableComposableBase: React.FunctionComponent<TableComposableProps> = ({
   ouiaSafe = true,
   isTreeTable = false,
   isNested = false,
+  isStriped = false,
+  isExpandable = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   nestedHeaderColumnSpans,
   ...props
 }: TableComposableProps) => {
@@ -152,6 +159,8 @@ const TableComposableBase: React.FunctionComponent<TableComposableProps> = ({
         !borders && styles.modifiers.noBorderRows,
         isStickyHeader && styles.modifiers.stickyHeader,
         isTreeTable && stylesTreeView.modifiers.treeView,
+        isStriped && styles.modifiers.striped,
+        isExpandable && styles.modifiers.expandable,
         isNested && 'pf-m-nested'
       )}
       ref={tableRef}
@@ -159,14 +168,6 @@ const TableComposableBase: React.FunctionComponent<TableComposableProps> = ({
       {...ouiaProps}
       {...props}
     >
-      {nestedHeaderColumnSpans &&
-        nestedHeaderColumnSpans.map((span: number, index) => {
-          if (span === 1) {
-            return <col key={index} />;
-          } else {
-            return <colgroup key={index} span={span} />;
-          }
-        })}
       {children}
     </table>
   );

package/src/components/TableComposable/Tbody.tsx

@@ -11,6 +11,10 @@ export interface TbodyProps extends React.HTMLProps<HTMLTableSectionElement> {
   isExpanded?: boolean;
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Flag indicating the <tbody> contains oddly striped rows. */
+  isOddStriped?: boolean;
+  /** Flag indicating the <tbody> contains evenly striped rows. */
+  isEvenStriped?: boolean;
 }
 
 const TbodyBase: React.FunctionComponent<TbodyProps> = ({
@@ -18,9 +22,21 @@ const TbodyBase: React.FunctionComponent<TbodyProps> = ({
   className,
   isExpanded,
   innerRef,
+  isEvenStriped = false,
+  isOddStriped = false,
   ...props
 }: TbodyProps) => (
-  <tbody role="rowgroup" className={css(className, isExpanded && styles.modifiers.expanded)} ref={innerRef} {...props}>
+  <tbody
+    role="rowgroup"
+    className={css(
+      className,
+      isExpanded && styles.modifiers.expanded,
+      isOddStriped && styles.modifiers.striped,
+      isEvenStriped && styles.modifiers.stripedEven
+    )}
+    ref={innerRef}
+    {...props}
+  >
     {children}
   </tbody>
 );

package/src/components/TableComposable/Tr.tsx

@@ -21,6 +21,8 @@ export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps
   isHoverable?: boolean;
   /** Flag indicating the row is selected - adds selected styling */
   isRowSelected?: boolean;
+  /** Flag indicating the row is striped */
+  isStriped?: boolean;
   /** An event handler for the row */
   onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
   /** Flag indicating the spacing offset of the first cell should be reset */
@@ -35,6 +37,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   isHidden = false,
   isHoverable = false,
   isRowSelected = false,
+  isStriped = false,
   innerRef,
   ouiaId,
   ouiaSafe = true,
@@ -63,6 +66,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         isEditable && inlineStyles.modifiers.inlineEditable,
         isHoverable && styles.modifiers.hoverable,
         isRowSelected && styles.modifiers.selected,
+        isStriped && styles.modifiers.striped,
         resetOffset && styles.modifiers.firstCellOffsetReset
       )}
       hidden={isHidden || (isExpanded !== undefined && !isExpanded)}

package/src/components/TableComposable/examples/ComposableTable.md

@@ -349,3 +349,31 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 
 ```ts file="ComposableTableNestedTableExpandable.tsx"
 ```
+
+### Composable: Striped
+
+To apply striping to a basic table, add the `isStriped` property to `TableComposable`.
+
+```ts file="ComposableTableStriped.tsx"
+```
+
+### Composable: Striped expandable
+
+To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `TableComposable`.
+
+```ts file="ComposableTableStripedExpandable.tsx"
+```
+
+### Composable: Striped multiple tobdy
+
+When there are multiple `Tbody` components within a table, a more granular application of striping may be controlled by adding either the `isEvenStriped` or `isOddStriped` properties to `Tbody`. These properties will stripe even or odd rows within that `Tbody` respectively.
+
+```ts file="ComposableTableStripedMultipleTbody.tsx"
+```
+
+### Composable: Striped tr
+
+To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `TableComposable`.
+
+```ts file="ComposableTableStripedTr.tsx"
+```

package/src/components/TableComposable/examples/ComposableTableNestedExpandable.tsx

@@ -70,11 +70,7 @@ export const ComposableTableNestedExpandable: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <TableComposable
-        aria-label="Nested column headers with expandable rows table"
-        gridBreakPoint=""
-        nestedHeaderColumnSpans={[1, 3, 1]}
-      >
+      <TableComposable aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
             <Th rowSpan={2} />

package/src/components/TableComposable/examples/ComposableTableNestedHeaders.tsx

@@ -114,11 +114,7 @@ export const ComposableTableNestedHeaders: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <TableComposable
-        aria-label="Nested column headers table"
-        gridBreakPoint=""
-        nestedHeaderColumnSpans={[3, 2, 1, 1, 1, 1]}
-      >
+      <TableComposable aria-label="Nested column headers table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
             <Th hasRightBorder colSpan={3}>

package/src/components/TableComposable/examples/ComposableTableStriped.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: number;
+  prs: number;
+  workspaces: number;
+  lastCommit: string;
+}
+
+export const ComposableTableStriped: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'Repository 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },
+    { name: 'Repository 2', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },
+    { name: 'Repository 3', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },
+    { name: 'Repository 4', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  return (
+    <TableComposable aria-label="Simple table" isStriped>
+      <Caption>Simple striped table using composable components</Caption>
+      <Thead>
+        <Tr>
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {repositories.map(repo => (
+          <Tr key={repo.name}>
+            <Td dataLabel={columnNames.name}>{repo.name}</Td>
+            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
+            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
+            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
+            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};