@patternfly/react-table 4.44.10 → 4.44.14

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

@@ -0,0 +1,195 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Checkbox } from '@patternfly/react-core';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+  details?: {
+    detail1?: string;
+    detail2?: string;
+    detail3?: string;
+    detailFormat: 0 | 1 | 2 | 3;
+  };
+}
+
+export const ComposableTableExpandable: 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: 'parent 1',
+      branches: 'two',
+      prs: 'k',
+      workspaces: 'four',
+      lastCommit: 'five',
+      // 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',
+      lastCommit: 'five',
+      details: { detailFormat: 1, detail1: 'single cell - fullWidth' }
+    },
+    {
+      name: 'parent 3',
+      branches: '2',
+      prs: 'b',
+      workspaces: 'four',
+      lastCommit: 'five',
+      details: { detailFormat: 2, detail1: 'single cell - noPadding' }
+    },
+    {
+      name: 'parent 4',
+      branches: '2',
+      prs: 'b',
+      workspaces: 'four',
+      lastCommit: 'five',
+      details: { detailFormat: 3, detail1: 'single cell - fullWidth & noPadding' }
+    },
+    {
+      name: 'parent 5',
+      branches: '2',
+      prs: 'b',
+      workspaces: 'four',
+      lastCommit: 'five',
+      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',
+      lastCommit: 'five',
+      details: {
+        detailFormat: 1,
+        detail1: "fullWidth, spans the collapsible column and 'Repositories'",
+        detail2: "fullWidth, spans 'Branches' and 'Pull requests'",
+        detail3: "fullWidth, spans 'Workspaces' and 'Last commit'"
+      }
+    }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  // 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);
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Compact"
+        isChecked={isExampleCompact}
+        onChange={checked => setIsExampleCompact(checked)}
+        aria-label="toggle compact variation"
+        id="toggle-compact"
+        name="toggle-compact"
+      />
+      <TableComposable aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
+        <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>
+        {repositories.map((repo, rowIndex) => {
+          // Some arbitrary examples of how you could customize the child row based on your needs
+          let childIsFullWidth = false;
+          let childHasNoPadding = false;
+          let detail1Colspan = 1;
+          let detail2Colspan = 1;
+          let detail3Colspan = 1;
+          if (repo.details) {
+            const { detail1, detail2, detail3, detailFormat } = repo.details;
+            const numColumns = 5;
+            childIsFullWidth = [1, 3].includes(detailFormat);
+            childHasNoPadding = [2, 3].includes(detailFormat);
+            if (detail1 && !detail2 && !detail3) {
+              detail1Colspan = childIsFullWidth ? numColumns : numColumns + 1; // Account for toggle column
+            } else if (detail1 && detail2 && !detail3) {
+              detail1Colspan = 2;
+              detail2Colspan = childIsFullWidth ? 3 : 4;
+            } else if (detail1 && detail2 && detail3) {
+              detail1Colspan = 2;
+              detail2Colspan = 2;
+              detail3Colspan = childIsFullWidth ? 1 : 2;
+            }
+          }
+          return (
+            <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
+              <Tr>
+                <Td
+                  expand={
+                    repo.details
+                      ? {
+                          rowIndex,
+                          isExpanded: isRepoExpanded(repo),
+                          onToggle: () => setRepoExpanded(repo, !isRepoExpanded(repo))
+                        }
+                      : undefined
+                  }
+                />
+                <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>
+              {repo.details ? (
+                <Tr isExpanded={isRepoExpanded(repo)}>
+                  {!childIsFullWidth ? <Td /> : null}
+                  {repo.details.detail1 ? (
+                    <Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>
+                      <ExpandableRowContent>{repo.details.detail1}</ExpandableRowContent>
+                    </Td>
+                  ) : null}
+                  {repo.details.detail2 ? (
+                    <Td dataLabel="Repo detail 2" noPadding={childHasNoPadding} colSpan={detail2Colspan}>
+                      <ExpandableRowContent>{repo.details.detail2}</ExpandableRowContent>
+                    </Td>
+                  ) : null}
+                  {repo.details.detail3 ? (
+                    <Td dataLabel="Repo detail 3" noPadding={childHasNoPadding} colSpan={detail3Colspan}>
+                      <ExpandableRowContent>{repo.details.detail3}</ExpandableRowContent>
+                    </Td>
+                  ) : null}
+                </Tr>
+              ) : null}
+            </Tbody>
+          );
+        })}
+      </TableComposable>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,118 @@
+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 ComposableTableFavoritable: 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'
+  };
+
+  // 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);
+
+  // Favorite state is similar to selection state, see Composable: Selectable with checkbox.
+  const [favoriteRepoNames, setFavoriteRepoNames] = React.useState<string[]>([]);
+  const setRepoFavorited = (repo: Repository, isFavoriting = true) =>
+    setFavoriteRepoNames(prevFavorites => {
+      const otherFavorites = prevFavorites.filter(r => r !== repo.name);
+      return isFavoriting ? [...otherFavorites, repo.name] : otherFavorites;
+    });
+  const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name);
+
+  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
+  // In this example we only deal with booleans here because we only sort on the favorites column.
+  // For more complex sorting, see Composable: Sortable.
+  // Note: We also memoize the sortable values with useCallback to prevent rows jumping around when you change
+  // the favorites while sorting on that column. Only updating the sort state will reorder the rows.
+  const getSortableRowValues = React.useCallback((repo: Repository): boolean[] => [isRepoFavorited(repo)], [
+    activeSortIndex,
+    activeSortDirection
+  ]);
+
+  // 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 (aValue === bValue) {
+        return 0;
+      }
+      if (activeSortDirection === 'asc') {
+        return aValue > bValue ? 1 : -1;
+      } else {
+        return bValue > aValue ? 1 : -1;
+      }
+    });
+  }
+
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    isFavorites: columnIndex === 0, // Not just statically true in case we add sorting on other columns later
+    sortBy: {
+      index: activeSortIndex,
+      direction: activeSortDirection
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction);
+    },
+    columnIndex
+  });
+
+  return (
+    <TableComposable aria-label="Favoritable table" variant="compact">
+      <Thead>
+        <Tr>
+          <Th sort={getSortParams(0)} />
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {sortedRepositories.map((repo, rowIndex) => (
+          <Tr key={rowIndex}>
+            <Td
+              favorites={{
+                isFavorited: isRepoFavorited(repo),
+                onFavorite: (_event, isFavoriting) => setRepoFavorited(repo, isFavoriting),
+                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>
+  );
+};

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

@@ -0,0 +1,67 @@
+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 ComposableTableHoverable: 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'
+  };
+
+  // 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 ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
+    });
+  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
+
+  return (
+    <TableComposable aria-label="Hoverable 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 => (
+          <Tr
+            key={repo.name}
+            onRowClick={() => setRepoSelected(repo, !isRepoSelected(repo))}
+            isHoverable
+            isRowSelected={isRepoSelected(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/ComposableTableMisc.tsx

@@ -0,0 +1,92 @@
+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 ComposableTableMisc: 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="Misc table">
+      <Thead noWrap>
+        <Tr>
+          <Th
+            info={{
+              tooltip: 'More information about repositories',
+              className: 'repositories-info-tip',
+              tooltipProps: {
+                isContentLeftAligned: true
+              }
+            }}
+          >
+            {columnNames.name}
+          </Th>
+          <Th>{columnNames.branches}</Th>
+          <Th
+            info={{
+              popover: (
+                <div>
+                  More <strong>information</strong> on pull requests
+                </div>
+              ),
+              ariaLabel: 'More information on pull requests',
+              popoverProps: {
+                headerContent: columnNames.prs,
+                footerContent: <a href="#">Click here for even more info</a>
+              }
+            }}
+          >
+            {columnNames.prs}
+          </Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th textCenter>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {repositories.map((repo, rowIndex) => {
+          const isOddRow = (rowIndex + 1) % 2;
+          const customStyle = {
+            borderLeft: '3px solid var(--pf-global--primary-color--100)'
+          };
+          // Some arbitrary logic to demonstrate that cell styles can be based on anything
+          const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;
+          const lastCommitTextCenter = rowIndex !== 2;
+          return (
+            <Tr
+              key={repo.name}
+              className={isOddRow ? 'odd-row-class' : 'even-row-class'}
+              style={isOddRow ? customStyle : {}}
+            >
+              <Td dataLabel={columnNames.name} colSpan={nameColSpan}>
+                {repo.name}
+              </Td>
+              <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
+              <Td dataLabel={columnNames.prs}></Td>
+              <Td dataLabel={columnNames.workspaces}></Td>
+              <Td dataLabel={columnNames.lastCommit} textCenter={lastCommitTextCenter}></Td>
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </TableComposable>
+  );
+};

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+
+interface Fact {
+  name: string;
+  state: string;
+  detail1: string;
+  detail2: string;
+  detail3: string;
+  detail4: string;
+  detail5: string;
+  detail6: string;
+  detail7: string;
+}
+
+export const ComposableTableMultipleStickyColumns: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({
+    name: `Fact ${index + 1}`,
+    state: `State ${index + 1}`,
+    detail1: `Test cell ${index + 1}-3`,
+    detail2: `Test cell ${index + 1}-4`,
+    detail3: `Test cell ${index + 1}-5`,
+    detail4: `Test cell ${index + 1}-6`,
+    detail5: `Test cell ${index + 1}-7`,
+    detail6: `Test cell ${index + 1}-8`,
+    detail7: `Test cell ${index + 1}-9`
+  }));
+
+  const columnNames = {
+    name: 'Fact',
+    state: 'State',
+    header3: 'Header 3',
+    header4: 'Header 4',
+    header5: 'Header 5',
+    header6: 'Header 6',
+    header7: 'Header 7',
+    header8: 'Header 8',
+    header9: 'Header 9'
+  };
+
+  // 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 = (fact: Fact): (string | number)[] => {
+    const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact;
+    return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7];
+  };
+
+  // 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 sortedFacts = facts;
+  if (activeSortIndex !== null) {
+    sortedFacts = facts.sort((a, b) => {
+      const aValue = getSortableRowValues(a)[activeSortIndex];
+      const bValue = getSortableRowValues(b)[activeSortIndex];
+      if (aValue === bValue) {
+        return 0;
+      }
+      if (activeSortDirection === 'asc') {
+        return aValue > bValue ? 1 : -1;
+      } else {
+        return bValue > aValue ? 1 : -1;
+      }
+    });
+  }
+
+  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="Multiple sticky column table" gridBreakPoint="">
+        <Thead>
+          <Tr>
+            <Th isStickyColumn modifier="truncate" sort={getSortParams(0)}>
+              {columnNames.name}
+            </Th>
+            <Th
+              isStickyColumn
+              stickyMinWidth="120px"
+              stickyLeftOffset="120px"
+              hasRightBorder
+              modifier="truncate"
+              sort={getSortParams(1)}
+            >
+              {columnNames.state}
+            </Th>
+            <Th modifier="truncate">{columnNames.header3}</Th>
+            <Th modifier="truncate">{columnNames.header4}</Th>
+            <Th modifier="truncate">{columnNames.header5}</Th>
+            <Th modifier="truncate">{columnNames.header6}</Th>
+            <Th modifier="truncate">{columnNames.header7}</Th>
+            <Th modifier="truncate">{columnNames.header8}</Th>
+            <Th modifier="truncate">{columnNames.header9}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sortedFacts.map(fact => (
+            <Tr key={fact.name}>
+              <Th isStickyColumn modifier="truncate">
+                {fact.name}
+              </Th>
+              <Th isStickyColumn stickyMinWidth="120px" stickyLeftOffset="120px" modifier="truncate" hasRightBorder>
+                <BlueprintIcon />
+                {` ${fact.state}`}
+              </Th>
+              <Td modifier="nowrap" dataLabel={columnNames.header3}>
+                {fact.detail1}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header4}>
+                {fact.detail2}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header5}>
+                {fact.detail3}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header6}>
+                {fact.detail4}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header7}>
+                {fact.detail5}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header8}>
+                {fact.detail6}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header9}>
+                {fact.detail7}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </TableComposable>
+    </InnerScrollContainer>
+  );
+};