@patternfly/react-table 4.44.10 → 4.44.14

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

@@ -0,0 +1,163 @@
+/* eslint-disable no-console */
+import React from 'react';
+import {
+  ButtonVariant,
+  DropdownToggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroupItemProps
+} from '@patternfly/react-core';
+import {
+  TableComposable,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  CustomActionsToggleProps,
+  ActionsColumn,
+  IAction
+} from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+type ExampleType = 'defaultToggle' | 'customToggle';
+
+export const ComposableTableActions: 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', lastCommit: 'five' },
+    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' },
+    { name: '4', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five' },
+    { name: '5', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  // This state is just for the ToggleGroup in this example and isn't necessary for TableComposable usage.
+  const [exampleChoice, setExampleChoice] = React.useState<ExampleType>('defaultToggle');
+  const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (_isSelected, event) => {
+    const id = event.currentTarget.id;
+    setExampleChoice(id as ExampleType);
+  };
+
+  const customActionsToggle = (props: CustomActionsToggleProps) => (
+    <DropdownToggle onToggle={props.onToggle} isDisabled={props.isDisabled}>
+      Actions
+    </DropdownToggle>
+  );
+
+  const defaultActions = (repo: Repository): IAction[] => [
+    {
+      title: 'Some action',
+      onClick: () => console.log(`clicked on Some action, on row ${repo.name}`)
+    },
+    {
+      title: <a href="https://www.patternfly.org">Link action</a>
+    },
+    {
+      isSeparator: true
+    },
+    {
+      title: 'Third action',
+      onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)
+    },
+    {
+      title: 'Start',
+      variant: ButtonVariant.secondary,
+      onClick: () => console.log(`clicked on extra action, on row ${repo.name}`),
+      isOutsideDropdown: true
+    }
+  ];
+
+  const lastRowActions = (repo: Repository): IAction[] => [
+    {
+      title: 'Some action',
+      onClick: () => console.log(`clicked on Some action, on row ${repo.name}`)
+    },
+    {
+      title: <div>Another action</div>,
+      onClick: () => console.log(`clicked on Another action, on row ${repo.name}`)
+    },
+    {
+      isSeparator: true
+    },
+    {
+      title: 'Third action',
+      onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)
+    }
+  ];
+
+  return (
+    <React.Fragment>
+      <ToggleGroup aria-label="Default uses kebab toggle">
+        <ToggleGroupItem
+          text="Default actions toggle"
+          buttonId="defaultToggle"
+          isSelected={exampleChoice === 'defaultToggle'}
+          onChange={onExampleTypeChange}
+        />
+        <ToggleGroupItem
+          text="Custom actions toggle"
+          buttonId="customToggle"
+          isSelected={exampleChoice === 'customToggle'}
+          onChange={onExampleTypeChange}
+        />
+      </ToggleGroup>
+      <TableComposable aria-label="Actions table">
+        <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 => {
+            // Arbitrary logic to determine which rows get which actions in this example
+            let rowActions: IAction[] | null = defaultActions(repo);
+            if (repo.name === 'a') {
+              rowActions = null;
+            }
+            if (repo.name === '5') {
+              rowActions = lastRowActions(repo);
+            }
+            return (
+              <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>
+                <Td>
+                  {rowActions ? (
+                    <ActionsColumn
+                      items={rowActions}
+                      isDisabled={repo.name === '4'} // Also arbitrary for the example
+                      actionsToggle={exampleChoice === 'customToggle' ? customActionsToggle : undefined}
+                    />
+                  ) : null}
+                </Td>
+              </Tr>
+            );
+          })}
+        </Tbody>
+      </TableComposable>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
+import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+type ExampleType = 'default' | 'compact' | 'compactBorderless';
+
+export const ComposableTableBasic: 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 columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  // This state is just for the ToggleGroup in this example and isn't necessary for TableComposable usage.
+  const [exampleChoice, setExampleChoice] = React.useState<ExampleType>('default');
+  const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (_isSelected, event) => {
+    const id = event.currentTarget.id;
+    setExampleChoice(id as ExampleType);
+  };
+
+  return (
+    <React.Fragment>
+      <ToggleGroup aria-label="Default with single selectable">
+        <ToggleGroupItem
+          text="Default"
+          buttonId="default"
+          isSelected={exampleChoice === 'default'}
+          onChange={onExampleTypeChange}
+        />
+        <ToggleGroupItem
+          text="Compact"
+          buttonId="compact"
+          isSelected={exampleChoice === 'compact'}
+          onChange={onExampleTypeChange}
+        />
+        <ToggleGroupItem
+          text="Compact borderless"
+          buttonId="compactBorderless"
+          isSelected={exampleChoice === 'compactBorderless'}
+          onChange={onExampleTypeChange}
+        />
+      </ToggleGroup>
+      <TableComposable
+        aria-label="Simple table"
+        variant={exampleChoice !== 'default' ? 'compact' : undefined}
+        borders={exampleChoice !== 'compactBorderless'}
+      >
+        <Caption>Simple 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>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const ComposableTableCellWidth: 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 columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  return (
+    <TableComposable aria-label="Cell widths">
+      <Thead>
+        <Tr>
+          <Th width={15}>{columnNames.name}</Th>
+          <Th width={15}>{columnNames.branches}</Th>
+          <Th width={40} visibility={['hiddenOnMd', 'visibleOnLg']}>
+            {columnNames.prs}
+          </Th>
+          <Th width={15}>{columnNames.workspaces}</Th>
+          <Th width={15}>{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} visibility={['hiddenOnMd', 'visibleOnLg']}>
+              {repo.prs}
+            </Td>
+            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
+            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '@patternfly/react-table';
+
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+
+interface Repository {
+  name: string;
+  branches: number;
+  prs: number;
+  workspaces: number;
+  lastCommit: string;
+}
+
+export const ComposableTableCompoundExpandable: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'siemur/test-space', branches: 10, prs: 4, workspaces: 4, lastCommit: '20 minutes' },
+    { name: 'siemur/test-space-2', branches: 3, prs: 4, workspaces: 4, lastCommit: '20 minutes' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+  type ColumnKey = keyof typeof columnNames;
+
+  // In this example, expanded cells are tracked by the repo and property names from each row. This could be any pair of unique identifiers.
+  // This is to prevent state from being based on row and column order index in case we later add sorting and rearranging columns.
+  // Note that this behavior is very similar to selection state.
+  const [expandedCells, setExpandedCells] = React.useState<Record<string, ColumnKey>>({
+    'siemur/test-space': 'branches' // Default to the first cell of the first row being expanded
+  });
+  const setCellExpanded = (repo: Repository, columnKey: ColumnKey, isExpanding = true) => {
+    const newExpandedCells = { ...expandedCells };
+    if (isExpanding) {
+      newExpandedCells[repo.name] = columnKey;
+    } else {
+      delete newExpandedCells[repo.name];
+    }
+    setExpandedCells(newExpandedCells);
+  };
+  const compoundExpandParams = (repo: Repository, columnKey: ColumnKey): TdProps['compoundExpand'] => ({
+    isExpanded: expandedCells[repo.name] === columnKey,
+    onToggle: () => setCellExpanded(repo, columnKey, expandedCells[repo.name] !== columnKey)
+  });
+
+  return (
+    <TableComposable aria-label="Compound expandable table">
+      <Thead>
+        <Tr>
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+          <Th />
+        </Tr>
+      </Thead>
+      {repositories.map(repo => {
+        const expandedCellKey = expandedCells[repo.name];
+        const isRowExpanded = !!expandedCellKey;
+        return (
+          <Tbody key={repo.name} isExpanded={isRowExpanded}>
+            <Tr>
+              <Td dataLabel={columnNames.name} component="th">
+                <a href="#">{repo.name}</a>
+              </Td>
+              <Td dataLabel={columnNames.branches} compoundExpand={compoundExpandParams(repo, 'branches')}>
+                <CodeBranchIcon key="icon" /> {repo.branches}
+              </Td>
+              <Td dataLabel={columnNames.prs} compoundExpand={compoundExpandParams(repo, 'prs')}>
+                <CodeIcon key="icon" /> {repo.prs}
+              </Td>
+              <Td dataLabel={columnNames.workspaces} compoundExpand={compoundExpandParams(repo, 'workspaces')}>
+                <CubeIcon key="icon" /> {repo.workspaces}
+              </Td>
+              <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+              <Td>
+                <a href="#">Open in GitHub</a>
+              </Td>
+            </Tr>
+            {isRowExpanded ? (
+              <Tr isExpanded={isRowExpanded}>
+                <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={6}>
+                  <ExpandableRowContent>
+                    <div className="pf-u-m-md">
+                      Expanded content for {repo.name}: {expandedCellKey} goes here!
+                    </div>
+                  </ExpandableRowContent>
+                </Td>
+              </Tr>
+            ) : null}
+          </Tbody>
+        );
+      })}
+    </TableComposable>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+// This example has been simplified to focus on the text modifier props. In real usage,
+// you may want to derive your rows from typed underlying data and minimal state. See other examples.
+
+const columnNames = {
+  truncate: 'Truncate (width 20%)',
+  break: 'Break word',
+  wrap: 'Wrapping table header text. This th text will wrap instead of truncate.',
+  fit: 'Fit content',
+  nowrap: 'No wrap'
+};
+
+export const ComposableTableControllingText: React.FunctionComponent = () => (
+  <TableComposable aria-label="Controlling text">
+    <Thead>
+      <Tr>
+        <Th width={20}>{columnNames.truncate}</Th>
+        <Th>{columnNames.break}</Th>
+        <Th modifier="wrap">{columnNames.wrap}</Th>
+        <Th modifier="fitContent">{columnNames.fit}</Th>
+        <Th>{columnNames.nowrap}</Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      <Tr>
+        <Td dataLabel={columnNames.truncate} modifier="truncate">
+          This text will truncate instead of wrap.
+        </Td>
+        <Td dataLabel={columnNames.break} modifier="breakWord">
+          <a>http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</a>
+        </Td>
+        <Td dataLabel={columnNames.wrap}>
+          <p>
+            By default,
+            <code>thead</code> cells will truncate and
+            <code>tbody</code> cells will wrap. Use
+            <code>.pf-m-wrap</code> on a<code>th</code> to change its behavior.
+          </p>
+        </Td>
+        <Td dataLabel={columnNames.fit}>
+          This cell's content will adjust itself to the parent th width. This modifier only affects table layouts.
+        </Td>
+        <Td dataLabel={columnNames.nowrap} modifier="nowrap">
+          <a href="#">No wrap</a>
+        </Td>
+      </Tr>
+    </Tbody>
+  </TableComposable>
+);

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

@@ -0,0 +1,170 @@
+import React from 'react';
+import { TableComposable, Thead, Tbody, Tr, Th, Td, TbodyProps, TrProps } from '@patternfly/react-table';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+export const ComposableTableDraggable: React.FunctionComponent = () => {
+  const [draggedItemId, setDraggedItemId] = React.useState<string | null>(null);
+  const [draggingToItemIndex, setDraggingToItemIndex] = React.useState<number | null>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [itemOrder, setItemOrder] = React.useState(['row1', 'row2', 'row3']);
+  const [tempItemOrder, setTempItemOrder] = React.useState<string[]>([]);
+
+  const bodyRef = React.useRef<HTMLTableSectionElement>();
+
+  const onDragStart: TrProps['onDragStart'] = evt => {
+    evt.dataTransfer.effectAllowed = 'move';
+    evt.dataTransfer.setData('text/plain', evt.currentTarget.id);
+    const draggedItemId = evt.currentTarget.id;
+
+    evt.currentTarget.classList.add(styles.modifiers.ghostRow);
+    evt.currentTarget.setAttribute('aria-pressed', 'true');
+
+    setDraggedItemId(draggedItemId);
+    setIsDragging(true);
+  };
+
+  const moveItem = (arr: string[], i1: string, toIndex: number) => {
+    const fromIndex = arr.indexOf(i1);
+    if (fromIndex === toIndex) {
+      return arr;
+    }
+    const temp = arr.splice(fromIndex, 1);
+    arr.splice(toIndex, 0, temp[0]);
+
+    return arr;
+  };
+
+  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])) {
+      return;
+    }
+    while (ulNode.firstChild) {
+      ulNode.removeChild(ulNode.lastChild);
+    }
+
+    itemOrder.forEach(id => {
+      ulNode.appendChild(nodes.find(n => n.id === id));
+    });
+  };
+
+  const onDragCancel = () => {
+    Array.from(bodyRef.current.children).forEach(el => {
+      el.classList.remove(styles.modifiers.ghostRow);
+      el.setAttribute('aria-pressed', 'false');
+    });
+    setDraggedItemId(null);
+    setDraggingToItemIndex(null);
+    setIsDragging(false);
+  };
+
+  const onDragLeave: TbodyProps['onDragLeave'] = evt => {
+    if (!isValidDrop(evt)) {
+      move(itemOrder);
+      setDraggingToItemIndex(null);
+    }
+  };
+
+  const isValidDrop = (evt: React.DragEvent<HTMLTableSectionElement | HTMLTableRowElement>) => {
+    const ulRect = bodyRef.current.getBoundingClientRect();
+    return (
+      evt.clientX > ulRect.x &&
+      evt.clientX < ulRect.x + ulRect.width &&
+      evt.clientY > ulRect.y &&
+      evt.clientY < ulRect.y + ulRect.height
+    );
+  };
+
+  const onDrop: TrProps['onDrop'] = evt => {
+    if (isValidDrop(evt)) {
+      setItemOrder(tempItemOrder);
+    } else {
+      onDragCancel();
+    }
+  };
+
+  const onDragOver: TbodyProps['onDragOver'] = evt => {
+    evt.preventDefault();
+
+    const curListItem = (evt.target as HTMLTableSectionElement).closest('tr');
+    if (!curListItem || !bodyRef.current.contains(curListItem) || curListItem.id === draggedItemId) {
+      return null;
+    } else {
+      const dragId = curListItem.id;
+      const newDraggingToItemIndex = Array.from(bodyRef.current.children).findIndex(item => item.id === dragId);
+      if (newDraggingToItemIndex !== draggingToItemIndex) {
+        const tempItemOrder = moveItem([...itemOrder], draggedItemId, newDraggingToItemIndex);
+        move(tempItemOrder);
+        setDraggingToItemIndex(newDraggingToItemIndex);
+        setTempItemOrder(tempItemOrder);
+      }
+    }
+  };
+
+  const onDragEnd: TrProps['onDragEnd'] = evt => {
+    const target = evt.target as HTMLTableRowElement;
+    target.classList.remove(styles.modifiers.ghostRow);
+    target.setAttribute('aria-pressed', 'false');
+    setDraggedItemId(null);
+    setDraggingToItemIndex(null);
+    setIsDragging(false);
+  };
+
+  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+  const rows = [
+    {
+      id: 'row1',
+      repository: 'one',
+      branch: 'two',
+      pullRequest: 'three',
+      workspace: 'four',
+      lastCommit: 'five'
+    },
+    {
+      id: 'row2',
+      repository: 'one -2',
+      branch: null,
+      pullRequest: null,
+      workspace: 'four -2',
+      lastCommit: 'five -2'
+    },
+    {
+      id: 'row3',
+      repository: 'one - 3',
+      branch: 'two - 3',
+      pullRequest: 'three - 3',
+      workspace: 'four - 3',
+      lastCommit: 'five - 3'
+    }
+  ];
+
+  return (
+    <TableComposable aria-label="Draggable table" className={isDragging && styles.modifiers.dragOver}>
+      <Thead>
+        <Tr>
+          <Th />
+          {columns.map((column, columnIndex) => (
+            <Th key={columnIndex}>{column}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody ref={bodyRef} onDragOver={onDragOver} onDrop={onDragOver} onDragLeave={onDragLeave}>
+        {rows.map((row, rowIndex) => (
+          <Tr key={rowIndex} id={row.id} draggable onDrop={onDrop} onDragEnd={onDragEnd} onDragStart={onDragStart}>
+            <Td
+              draggableRow={{
+                id: `draggable-row-${row.id}`
+              }}
+            />
+            {Object.keys(row).map((key, keyIndex) => (
+              <Td key={`${rowIndex}_${keyIndex}`} dataLabel={columns[keyIndex]}>
+                {row[key]}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  Title,
+  EmptyStateBody,
+  Button
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+// This example has been simplified to focus on the empty state. In real usage,
+// you may want to derive your rows from typed underlying data and minimal state. See other examples.
+
+export const ComposableTableEmptyState: React.FunctionComponent = () => (
+  <TableComposable aria-label="Empty state table">
+    <Thead>
+      <Tr>
+        <Th>Repositories</Th>
+        <Th>Branches</Th>
+        <Th>Pull requests</Th>
+        <Th>Workspaces</Th>
+        <Th>Last commit</Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      <Tr>
+        <Td colSpan={8}>
+          <Bullseye>
+            <EmptyState variant={EmptyStateVariant.small}>
+              <EmptyStateIcon icon={SearchIcon} />
+              <Title headingLevel="h2" size="lg">
+                No results found
+              </Title>
+              <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>
+              <Button variant="link">Clear all filters</Button>
+            </EmptyState>
+          </Bullseye>
+        </Td>
+      </Tr>
+    </Tbody>
+  </TableComposable>
+);