@patternfly/react-table 4.44.10 → 4.44.14

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

@@ -0,0 +1,175 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
+import {
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  OptionsMenu,
+  OptionsMenuItemGroup,
+  OptionsMenuItem,
+  OptionsMenuSeparator,
+  OptionsMenuToggle
+} from '@patternfly/react-core';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const ComposableTableSortableCustom: 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);
+
+  // Sort dropdown expansion
+  const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+
+  // 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
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction);
+    },
+    columnIndex
+  });
+
+  return (
+    <React.Fragment>
+      <Toolbar id="toolbar">
+        <ToolbarContent>
+          <ToolbarItem>
+            <OptionsMenu
+              id="options-menu-multiple-options-example"
+              menuItems={[
+                <OptionsMenuItemGroup key="first group" aria-label="Sort column">
+                  {Object.values(columnNames).map((columnName, columnIndex) => (
+                    <OptionsMenuItem
+                      key={columnName}
+                      isSelected={activeSortIndex === columnIndex}
+                      onSelect={() => {
+                        setActiveSortIndex(columnIndex);
+                        setActiveSortDirection(activeSortDirection !== null ? activeSortDirection : 'asc');
+                      }}
+                    >
+                      {columnName}
+                    </OptionsMenuItem>
+                  ))}
+                </OptionsMenuItemGroup>,
+                <OptionsMenuSeparator key="separator" />,
+                <OptionsMenuItemGroup key="second group" aria-label="Sort direction">
+                  <OptionsMenuItem
+                    onSelect={() => setActiveSortDirection('asc')}
+                    isSelected={activeSortDirection === 'asc'}
+                    id="ascending"
+                    key="ascending"
+                  >
+                    Ascending
+                  </OptionsMenuItem>
+                  <OptionsMenuItem
+                    onSelect={() => setActiveSortDirection('desc')}
+                    isSelected={activeSortDirection === 'desc'}
+                    id="descending"
+                    key="descending"
+                  >
+                    Descending
+                  </OptionsMenuItem>
+                </OptionsMenuItemGroup>
+              ]}
+              isOpen={isSortDropdownOpen}
+              toggle={
+                <OptionsMenuToggle
+                  hideCaret
+                  onToggle={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
+                  toggleTemplate={<SortAmountDownIcon />}
+                />
+              }
+              isPlain
+              isGrouped
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <TableComposable aria-label="Sortable table custom toolbar">
+        <Thead>
+          <Tr>
+            <Th sort={getSortParams(0)}>{columnNames.name}</Th>
+            <Th sort={getSortParams(1)}>{columnNames.branches}</Th>
+            <Th sort={getSortParams(2)} info={{ tooltip: 'More information ' }}>
+              {columnNames.prs}
+            </Th>
+            <Th sort={getSortParams(3)}>{columnNames.workspaces}</Th>
+            <Th sort={getSortParams(4)}>{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>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,144 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+
+interface Fact {
+  name: string;
+  state: string;
+  detail1: string;
+  detail2: string;
+  detail3: string;
+  detail4: string;
+  detail5: string;
+  detail6: string;
+  detail7: string;
+}
+
+export const ComposableTableStickyColumn: 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="Sticky column table" gridBreakPoint="">
+        <Thead>
+          <Tr>
+            <Th isStickyColumn hasRightBorder modifier="truncate" sort={getSortParams(0)}>
+              {columnNames.name}
+            </Th>
+            <Th 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 hasRightBorder modifier="truncate">
+                {fact.name}
+              </Th>
+              <Td modifier="nowrap" dataLabel={columnNames.state}>
+                {fact.state}
+              </Td>
+              <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>
+  );
+};

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

@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  TableComposable,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  InnerScrollContainer,
+  OuterScrollContainer,
+  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 ComposableTableStickyColumnsAndHeader: 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 (
+    <div style={{ height: '600px' }}>
+      <OuterScrollContainer>
+        <InnerScrollContainer>
+          <TableComposable aria-label="Sticky columns and header table" gridBreakPoint="" isStickyHeader>
+            <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>
+      </OuterScrollContainer>
+    </div>
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, TableText } 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: 'Truncating text',
+  wrap: 'Wrapping table header text. This th text will wrap instead of truncate.'
+};
+
+export const ComposableTableText: React.FunctionComponent = () => (
+  <TableComposable aria-label="Table text">
+    <Thead>
+      <Tr>
+        <Th width={30}>{columnNames.truncate}</Th>
+        <Th>{columnNames.wrap}</Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      <Tr>
+        <Td dataLabel={columnNames.truncate}>
+          <TableText wrapModifier="truncate">This text will truncate instead of wrap.</TableText>
+        </Td>
+        <Td dataLabel={columnNames.wrap}>
+          <TableText wrapModifier="nowrap">
+            <a href="#">This is a link that needs to be on one line and fully readable.</a>
+          </TableText>
+        </Td>
+      </Tr>
+    </Tbody>
+  </TableComposable>
+);