@patternfly/react-table 4.44.12 → 4.44.16

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import {
+  TableComposable,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  InnerScrollContainer,
+  ExpandableRowContent
+} from '@patternfly/react-table';
+import { Button } from '@patternfly/react-core';
+
+interface Team {
+  name: string;
+  members: {
+    lead: string;
+    interaction: string;
+    visual: string;
+  };
+  email: string;
+  description: string;
+}
+
+export const ComposableTableNestedExpandable: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const teams: Team[] = [
+    {
+      name: 'Developer program 1',
+      members: { lead: 'Person 1', interaction: 'Person 2', visual: 'Person 3' },
+      email: 'devteam1@example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      name: 'Developer program 2',
+      members: { lead: 'Person A', interaction: 'Person B', visual: 'Person C' },
+      email: 'devteam2@example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      name: 'Developer program 3',
+      members: { lead: 'Person X', interaction: 'Person Y', visual: 'Person Z' },
+      email: 'devteam3@example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    }
+  ];
+
+  const columnNames = {
+    team: 'Team',
+    members: 'Members',
+    lead: 'Design Lead',
+    interaction: 'Interaction Designer',
+    visual: 'Visual Designer',
+    contact: 'Contact'
+  };
+
+  // In this example, expanded rows are tracked by the team 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 [expandedTeamNames, setExpandedTeamNames] = React.useState<string[]>([]);
+  const setTeamExpanded = (team: Team, isExpanding = true) =>
+    setExpandedTeamNames(prevExpanded => {
+      const otherExpandedTeamNames = prevExpanded.filter(t => t !== team.name);
+      return isExpanding ? [...otherExpandedTeamNames, team.name] : otherExpandedTeamNames;
+    });
+  const isTeamExpanded = (team: Team) => expandedTeamNames.includes(team.name);
+
+  return (
+    <InnerScrollContainer>
+      <TableComposable
+        aria-label="Nested column headers with expandable rows table"
+        gridBreakPoint=""
+        nestedHeaderColumnSpans={[1, 3, 1]}
+      >
+        <Thead hasNestedHeader>
+          <Tr>
+            <Th rowSpan={2} />
+            <Th rowSpan={2} hasRightBorder>
+              {columnNames.team}
+            </Th>
+            <Th colSpan={3} hasRightBorder>
+              {columnNames.members}
+            </Th>
+            <Th rowSpan={2}>{columnNames.contact}</Th>
+          </Tr>
+          <Tr resetOffset>
+            <Th isSubheader>{columnNames.lead}</Th>
+            <Th isSubheader>{columnNames.interaction}</Th>
+            <Th isSubheader hasRightBorder>
+              {columnNames.visual}
+            </Th>
+          </Tr>
+        </Thead>
+        {teams.map((team, rowIndex) => (
+          <Tbody key={team.name} isExpanded={isTeamExpanded(team)}>
+            <Tr>
+              <Td
+                expand={{
+                  rowIndex,
+                  isExpanded: isTeamExpanded(team),
+                  onToggle: () => setTeamExpanded(team, !isTeamExpanded(team))
+                }}
+              />
+              <Td dataLabel={columnNames.team}>{team.name}</Td>
+              <Td dataLabel={columnNames.lead}>{team.members.lead}</Td>
+              <Td dataLabel={columnNames.interaction}>{team.members.interaction}</Td>
+              <Td dataLabel={columnNames.visual}>{team.members.visual}</Td>
+              <Td dataLabel={columnNames.contact}>
+                <Button variant="link" component="a" href={`mailto:${team.email}`} isInline>
+                  Message us!
+                </Button>
+              </Td>
+            </Tr>
+            <Tr isExpanded={isTeamExpanded(team)}>
+              <Td dataLabel={`Team ${team.name} description`} colSpan={6}>
+                <ExpandableRowContent>{team.description}</ExpandableRowContent>
+              </Td>
+            </Tr>
+          </Tbody>
+        ))}
+      </TableComposable>
+    </InnerScrollContainer>
+  );
+};

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

@@ -0,0 +1,202 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+import { Stack, StackItem } from '@patternfly/react-core';
+
+interface PodConnection {
+  source: {
+    podName: string;
+    port: { num: number; protocol: string };
+  };
+  destination: {
+    podName: string;
+    port: { num: number; protocol: string };
+  };
+  timestamp: string;
+  protocol: string;
+  flowRate: string;
+  traffic: string;
+  packets: number;
+}
+
+export const ComposableTableNestedHeaders: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const connections: PodConnection[] = [
+    {
+      source: { podName: 'api-pod-source-name', port: { num: 443, protocol: 'HTTPS' } },
+      destination: { podName: 'api-pod-destination-name', port: { num: 24, protocol: 'SMTP' } },
+      timestamp: '2021-06-22T19:58:24.000Z',
+      protocol: 'TCP',
+      flowRate: '1.9 Kbps',
+      traffic: '2.1 KB',
+      packets: 3
+    },
+    {
+      source: { podName: 'api-pod-source2-name', port: { num: 80, protocol: 'HTTP' } },
+      destination: { podName: 'api-pod-destination2-name', port: { num: 24, protocol: 'SMTP' } },
+      timestamp: '2021-06-22T21:42:01.000Z',
+      protocol: 'UDP',
+      flowRate: '3.4 Kbps',
+      traffic: '6.1 KB',
+      packets: 7
+    }
+  ];
+
+  const columnNames = {
+    pods: 'Pods',
+    source: 'Source',
+    destination: 'Destination',
+    datetime: 'Date & Time',
+    ports: 'Ports',
+    protocol: 'Protocol',
+    flowRate: 'Flow rate',
+    traffic: 'Traffic',
+    packets: 'Packets'
+  };
+
+  // Index of the currently sorted column
+  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
+  // as the identifier of the sorted column. See the "Compound expandable" example.
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+
+  // Sort direction of the currently sorted column
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+
+  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
+  const getSortableRowValues = (connection: PodConnection): (string | number)[] => {
+    const { source, destination, timestamp, protocol, flowRate, traffic, packets } = connection;
+    return [
+      source.podName,
+      destination.podName,
+      timestamp,
+      source.port.num,
+      destination.port.num,
+      protocol,
+      flowRate,
+      traffic,
+      packets
+    ];
+  };
+
+  // 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.
+  let sortedConnections = connections;
+  if (activeSortIndex !== null) {
+    sortedConnections = connections.sort((a, b) => {
+      const aValue = getSortableRowValues(a)[activeSortIndex];
+      const bValue = getSortableRowValues(b)[activeSortIndex];
+      if (typeof aValue === 'number') {
+        // Numeric sort
+        if (activeSortDirection === 'asc') {
+          return (aValue as number) - (bValue as number);
+        }
+        return (bValue as number) - (aValue as number);
+      } else {
+        // String sort
+        if (activeSortDirection === 'asc') {
+          return (aValue as string).localeCompare(bValue as string);
+        }
+        return (bValue as string).localeCompare(aValue as string);
+      }
+    });
+  }
+
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    sortBy: {
+      index: activeSortIndex,
+      direction: activeSortDirection
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction);
+    },
+    columnIndex
+  });
+
+  return (
+    <InnerScrollContainer>
+      <TableComposable
+        aria-label="Nested column headers table"
+        gridBreakPoint=""
+        nestedHeaderColumnSpans={[3, 2, 1, 1, 1, 1]}
+      >
+        <Thead hasNestedHeader>
+          <Tr>
+            <Th hasRightBorder colSpan={3}>
+              {columnNames.pods}
+            </Th>
+            <Th hasRightBorder colSpan={2}>
+              {columnNames.ports}
+            </Th>
+            <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(5)}>
+              {columnNames.protocol}
+            </Th>
+            <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(6)}>
+              {columnNames.flowRate}
+            </Th>
+            <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(7)}>
+              {columnNames.traffic}
+            </Th>
+            <Th modifier="fitContent" rowSpan={2} sort={getSortParams(8)}>
+              {columnNames.packets}
+            </Th>
+          </Tr>
+          <Tr>
+            <Th isSubheader sort={getSortParams(0)}>
+              {columnNames.source}
+            </Th>
+            <Th isSubheader sort={getSortParams(1)}>
+              {columnNames.destination}
+            </Th>
+            <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(2)}>
+              {columnNames.datetime}
+            </Th>
+            <Th isSubheader modifier="fitContent" sort={getSortParams(3)}>
+              {columnNames.source}
+            </Th>
+            <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(4)}>
+              {columnNames.destination}
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sortedConnections.map(connection => (
+            <Tr key={connection.source.podName}>
+              <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>
+              <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
+              <Td dataLabel={columnNames.datetime}>
+                <div>
+                  <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
+                  <span className="pf-u-color-200">{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                </div>
+              </Td>
+              <Td dataLabel={columnNames.source}>
+                <Stack>
+                  <StackItem>
+                    <span>{connection.source.port.num}</span>
+                  </StackItem>
+                  <StackItem>
+                    <span className="pf-u-color-200">({connection.source.port.protocol})</span>
+                  </StackItem>
+                </Stack>
+              </Td>
+              <Td dataLabel={columnNames.destination}>
+                <Stack>
+                  <StackItem>
+                    <span>{connection.destination.port.num}</span>
+                  </StackItem>
+                  <StackItem>
+                    <span className="pf-u-color-200">({connection.destination.port.protocol})</span>
+                  </StackItem>
+                </Stack>
+              </Td>
+              <Td dataLabel={columnNames.protocol}>{connection.protocol}</Td>
+              <Td dataLabel={columnNames.flowRate}>{connection.flowRate}</Td>
+              <Td dataLabel={columnNames.traffic}>{connection.traffic}</Td>
+              <Td dataLabel={columnNames.packets}>{connection.packets}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </TableComposable>
+    </InnerScrollContainer>
+  );
+};

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const ComposableTableSelectable: 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: 'b', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'c', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'd', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'e', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
+  const selectableRepos = repositories.filter(isRepoSelectable);
+
+  // In this example, selected 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.
+  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const setRepoSelected = (repo: Repository, isSelecting = true) =>
+    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) : []);
+  const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;
+  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
+
+  // To allow shift+click to select/deselect multiple rows
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
+  const [shifting, setShifting] = React.useState(false);
+
+  const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
+    // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
+    if (shifting && recentSelectedRowIndex !== null) {
+      const numberSelected = rowIndex - recentSelectedRowIndex;
+      const intermediateIndexes =
+        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));
+    } else {
+      setRepoSelected(repo, isSelecting);
+    }
+    setRecentSelectedRowIndex(rowIndex);
+  };
+
+  React.useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        setShifting(true);
+      }
+    };
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        setShifting(false);
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('keyup', onKeyUp);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('keyup', onKeyUp);
+    };
+  }, []);
+
+  return (
+    <TableComposable aria-label="Selectable table">
+      <Thead>
+        <Tr>
+          <Th
+            select={{
+              onSelect: (_event, isSelecting) => selectAllRepos(isSelecting),
+              isSelected: areAllReposSelected
+            }}
+          />
+          <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, rowIndex) => (
+          <Tr key={repo.name}>
+            <Td
+              select={{
+                rowIndex,
+                onSelect: (_event, isSelecting) => onSelectRepo(repo, rowIndex, isSelecting),
+                isSelected: isRepoSelected(repo),
+                disable: !isRepoSelectable(repo)
+              }}
+            />
+            <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>
+  );
+};

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const ComposableTableSelectableRadio: 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' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
+
+  // In this example, selected 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.
+  const [selectedRepoName, setSelectedRepoName] = React.useState<string | null>(null);
+
+  return (
+    <TableComposable aria-label="Selectable table">
+      <Thead>
+        <Tr>
+          <Th />
+          <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, rowIndex) => (
+          <Tr key={repo.name}>
+            <Td
+              select={{
+                rowIndex,
+                onSelect: () => setSelectedRepoName(repo.name),
+                isSelected: selectedRepoName === repo.name,
+                disable: !isRepoSelectable(repo),
+                variant: 'radio'
+              }}
+            />
+            <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>
+  );
+};

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const ComposableTableSortable: 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' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories table header that goes on for a long time.',
+    branches: 'Branches table header that goes on for a long time.',
+    prs: 'Pull requests table header that goes on for a long time.',
+    workspaces: 'Workspaces table header that goes on for a long time.',
+    lastCommit: 'Last commit table header that goes on for a long time.'
+  };
+
+  // Index of the currently sorted column
+  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
+  // as the identifier of the sorted column. See the "Compound expandable" example.
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+
+  // Sort direction of the currently sorted column
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+
+  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
+  // This example is trivial since our data objects just contain strings, but if the data was more complex
+  // this would be a place to return simplified string or number versions of each column to sort by.
+  const getSortableRowValues = (repo: Repository): (string | number)[] => {
+    const { name, branches, prs, workspaces, lastCommit } = repo;
+    return [name, branches, prs, workspaces, lastCommit];
+  };
+
+  // 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.
+  let sortedRepositories = repositories;
+  if (activeSortIndex !== null) {
+    sortedRepositories = repositories.sort((a, b) => {
+      const aValue = getSortableRowValues(a)[activeSortIndex];
+      const bValue = getSortableRowValues(b)[activeSortIndex];
+      if (typeof aValue === 'number') {
+        // Numeric sort
+        if (activeSortDirection === 'asc') {
+          return (aValue as number) - (bValue as number);
+        }
+        return (bValue as number) - (aValue as number);
+      } else {
+        // String sort
+        if (activeSortDirection === 'asc') {
+          return (aValue as string).localeCompare(bValue as string);
+        }
+        return (bValue as string).localeCompare(aValue as string);
+      }
+    });
+  }
+
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    sortBy: {
+      index: activeSortIndex,
+      direction: activeSortDirection,
+      defaultDirection: 'asc' // starting sort direction when first sorting a column. Defaults to 'asc'
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction);
+    },
+    columnIndex
+  });
+
+  // In this example, we wrap all but the 1st column and make the 1st and 3rd columns sortable just to demonstrate.
+  return (
+    <TableComposable aria-label="Sortable table">
+      <Thead>
+        <Tr>
+          <Th sort={getSortParams(0)}>{columnNames.name}</Th>
+          <Th modifier="wrap">{columnNames.branches}</Th>
+          <Th modifier="wrap" sort={getSortParams(2)} info={{ tooltip: 'More information ' }}>
+            {columnNames.prs}
+          </Th>
+          <Th modifier="wrap">{columnNames.workspaces}</Th>
+          <Th modifier="wrap">{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {sortedRepositories.map((repo, rowIndex) => (
+          <Tr key={rowIndex}>
+            <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>
+  );
+};