@patternfly/react-table 6.0.0-alpha.2 → 6.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.4",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.2",
-    "@patternfly/react-icons": "^6.0.0-alpha.2",
-    "@patternfly/react-styles": "^6.0.0-alpha.2",
-    "@patternfly/react-tokens": "^6.0.0-alpha.2",
+    "@patternfly/react-core": "^6.0.0-alpha.4",
+    "@patternfly/react-icons": "^6.0.0-alpha.3",
+    "@patternfly/react-styles": "^6.0.0-alpha.3",
+    "@patternfly/react-tokens": "^6.0.0-alpha.3",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e097336a87fa3cd2ab41654bec28d120beed10bc"
+  "gitHead": "a566e687735aab45907215a3ee70850908d12c70"
 }

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

@@ -8,7 +8,8 @@ import {
   Td,
   InnerScrollContainer,
   OuterScrollContainer,
-  ThProps
+  ThProps,
+  ISortBy
 } from '@patternfly/react-table';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 
@@ -53,10 +54,10 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   // 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);
+  const [activeSortIndex, setActiveSortIndex] = React.useState(-1);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = React.useState<ISortBy['direction']>();
 
   // 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
@@ -69,7 +70,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   // 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) {
+  if (activeSortIndex > -1) {
     sortedFacts = facts.sort((a, b) => {
       const aValue = getSortableRowValues(a)[activeSortIndex];
       const bValue = getSortableRowValues(b)[activeSortIndex];

package/src/components/Table/utils/transformers.test.tsx

@@ -76,6 +76,7 @@ const testCellActions = async ({
     const { container } = render(returnedData.children as React.ReactElement<any>);
     await user.click(screen.getAllByRole('button')[0]);
     await waitFor(() =>
+      // eslint-disable-next-line testing-library/no-container
       expect(container.querySelectorAll(`.${dropdownStyles.dropdownMenu} li button`)).toHaveLength(
         expectDisabled ? 0 : 1
       )

package/src/demos/Table.md

@@ -0,0 +1,159 @@
+---
+id: Table
+section: components
+---
+
+import {
+Checkbox,
+Label,
+PageSection,
+ToolbarExpandIconWrapper,
+ToolbarContent,
+Toolbar,
+ToolbarItem,
+SearchInput,
+Masthead,
+MastheadToggle,
+MastheadMain,
+MastheadContent,
+SkipToContent,
+Breadcrumb,
+BreadcrumbItem,
+Page,
+PageSectionVariants,
+TextContent,
+Text,
+Divider } from '@patternfly/react-core';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
+import imgBrand from '@patternfly/react-core/src/components/assets/pfLogo.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+
+## Demos
+
+### Bulk select
+
+```js isFullscreen file="./examples/TableBulkSelect.tsx"
+```
+
+### Expand/collapse all
+
+```js isFullscreen file="./examples/TableExpandCollapseAll.tsx"
+
+```
+
+### Compact
+
+```js isFullscreen file="./examples/TableCompact.tsx"
+
+```
+
+### Compound expansion
+
+```js isFullscreen file="./examples/TableCompoundExpansion.tsx"
+
+```
+
+### Column management
+
+```js isFullscreen file="./examples/TableColumnManagement.tsx"
+
+```
+
+### Column management with draggable
+
+```js isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx"
+```
+
+### Filterable
+
+```js isFullscreen file="./examples/TableFilterable.tsx"
+```
+
+### Sortable - responsive
+
+```js isFullscreen file="./examples/TableSortableResponsive.tsx"
+
+```
+
+### Automatic pagination
+
+The below example illustrates the `isLastFullPageShown` prop, which makes the following changes when the user sets the number of items to display per page to an amount that exceeds the remaining amount of data:
+
+- The component automatically changes the page back to the last full page of results, rather than defaulting to the final page of results.
+
+To demonstrate this, navigate to the last page of data below using the `>>` navigation arrows, then use the dropdown selector to change the view to 5 per page.
+
+- The default behavior would show the last page of results, which would only contain the last two rows (rows 11 - 12).
+- The `isLastFullPageShown` prop navigates you back to the previous page which does contain a full page of 5 rows (rows 6 - 10).
+
+```js isFullscreen file="./examples/TableAutomaticPagination.tsx"
+```
+
+### Static bottom pagination on mobile
+
+```ts isFullscreen file="./examples/TableStaticBottomPagination.tsx"
+
+```
+
+### Sticky header
+
+```js isFullscreen file="./examples/TableStickyHeader.tsx"
+
+```
+
+### Sticky first column
+
+```js isFullscreen file="./examples/TableStickyFirstColumn.tsx"
+
+```
+
+### Sticky columns and header with toolbar
+
+A toolbar may be added above a sticky table either inside or outside the `OuterScrollContainer`.
+
+```js isFullscreen file="../components/Table/examples/TableStickyColumnsAndHeader.tsx"
+
+```
+
+## Empty states
+
+These examples demonstrate the use of an [Empty State component](/components/empty-state) inside of a [Table](/components/table). Empty states are useful in a table when a filter returns no results, while data is loading, or when any type of error or exception condition occurs.
+
+### Empty
+
+```js isFullscreen file="./examples/TableEmptyStateDefault.tsx"
+```
+
+### Loading
+
+```js isFullscreen file="./examples/TableEmptyStateLoading.tsx"
+```
+
+### Error
+
+```js isFullscreen file="./examples/TableEmptyStateError.tsx"
+```

package/src/demos/examples/TableAutomaticPagination.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+export const TableAutomaticPagination: React.FunctionComponent = () => {
+  const columns = {
+    firstColumn: 'First column',
+    secondColumn: 'Second column',
+    thirdColumn: 'Third column'
+  };
+
+  const defaultRows = [
+    { firstColumn: 'Row 1 column 1', secondColumn: 'Row 1 column 2', thirdColumn: 'Row 1 column 3' },
+    { firstColumn: 'Row 2 column 1', secondColumn: 'Row 2 column 2', thirdColumn: 'Row 2 column 3' },
+    { firstColumn: 'Row 3 column 1', secondColumn: 'Row 3 column 2', thirdColumn: 'Row 3 column 3' },
+    { firstColumn: 'Row 4 column 1', secondColumn: 'Row 4 column 2', thirdColumn: 'Row 4 column 3' },
+    { firstColumn: 'Row 5 column 1', secondColumn: 'Row 5 column 2', thirdColumn: 'Row 5 column 3' },
+    { firstColumn: 'Row 6 column 1', secondColumn: 'Row 6 column 2', thirdColumn: 'Row 6 column 3' },
+    { firstColumn: 'Row 7 column 1', secondColumn: 'Row 7 column 2', thirdColumn: 'Row 7 column 3' },
+    { firstColumn: 'Row 8 column 1', secondColumn: 'Row 8 column 2', thirdColumn: 'Row 8 column 3' },
+    { firstColumn: 'Row 9 column 1', secondColumn: 'Row 9 column 2', thirdColumn: 'Row 9 column 3' },
+    { firstColumn: 'Row 10 column 1', secondColumn: 'Row 10 column 2', thirdColumn: 'Row 10 column 3' },
+    { firstColumn: 'Row 11 column 1', secondColumn: 'Row 11 column 2', thirdColumn: 'Row 11 column 3' },
+    { firstColumn: 'Row 12 column 1', secondColumn: 'Row 12 column 2', thirdColumn: 'Row 12 column 3' }
+  ];
+  const defaultPerPage = 10;
+
+  const [perPage, setPerPage] = React.useState(defaultPerPage);
+  const [page, setPage] = React.useState(1);
+  const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage));
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPage(newPage);
+    setRows(defaultRows.slice(startIdx, endIdx));
+  };
+
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+    setRows(defaultRows.slice(startIdx, endIdx));
+  };
+
+  const renderPagination = (variant = 'top') => (
+    <Pagination
+      isCompact
+      itemCount={defaultRows.length}
+      page={page}
+      perPage={perPage}
+      isLastFullPageShown
+      onSetPage={handleSetPage}
+      onPerPageSelect={handlePerPageSelect}
+      perPageOptions={[
+        { title: '3', value: 3 },
+        { title: '5', value: 5 },
+        { title: '12', value: 12 },
+        { title: '20', value: 20 }
+      ]}
+      titles={{
+        paginationAriaLabel: `${variant} pagination`
+      }}
+    />
+  );
+
+  return (
+    <React.Fragment>
+      {renderPagination()}
+      <Table aria-label="Automated Pagination Table Demo">
+        <Thead>
+          <Tr>
+            <Th>{columns.firstColumn}</Th>
+            <Th>{columns.secondColumn}</Th>
+            <Th>{columns.thirdColumn}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {rows.map((row, rowIndex) => (
+            <Tr key={rowIndex}>
+              <>
+                <Td dataLabel={columns.firstColumn}>{row.firstColumn}</Td>
+                <Td dataLabel={columns.secondColumn}>{row.secondColumn}</Td>
+                <Td dataLabel={columns.thirdColumn}>{row.thirdColumn}</Td>
+              </>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </React.Fragment>
+  );
+};

package/src/{docs/demos/table-demos/BulkSelect.jsx → demos/examples/TableBulkSelect.tsx}

@@ -6,44 +6,63 @@ import {
   DropdownItem,
   MenuToggle,
   MenuToggleCheckbox,
+  MenuToggleElement,
   PageSection,
   Pagination,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  PaginationVariant
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
+import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 
-export const BulkSelectTableDemo = () => {
+export const TableBulkSelect: React.FunctionComponent = () => {
   const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);
   const [bulkSelection, setBulkSelection] = React.useState('');
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(10);
   const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [selectedRows, setSelectedRows] = React.useState([]);
-  const handleSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => {
-    setPaginatedRows(rows.slice(startIdx, endIdx));
+  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
+    setPaginatedRows(rows?.slice(startIdx, endIdx));
     setPage(newPage);
   };
-  const handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => {
+
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
     setPaginatedRows(rows.slice(startIdx, endIdx));
     setPage(newPage);
     setPerPage(newPerPage);
   };
 
-  const setRowSelected = (row, isSelecting = true) =>
+  const setRowSelected = (row: SampleDataRow, isSelecting: boolean) =>
     setSelectedRows((prevSelected) => {
       const otherSelectedRows = prevSelected.filter((r) => r !== row.name);
       return isSelecting ? [...otherSelectedRows, row.name] : otherSelectedRows;
     });
-  const selectAllRows = (isSelecting = true) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []);
-  const selectPageRows = (isSelecting = true) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []);
-  const isRowSelected = (row) => selectedRows.includes(row.name);
 
-  const buildPagination = (variant, isCompact) => (
+  const selectAllRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []);
+
+  const selectPageRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []);
+
+  const isRowSelected = (row: any) => selectedRows.includes(row.name);
+
+  const buildPagination = (variant: 'bottom' | 'top' | PaginationVariant, isCompact: boolean) => (
     <Pagination
       isCompact={isCompact}
       itemCount={rows.length}
@@ -72,10 +91,11 @@ export const BulkSelectTableDemo = () => {
         <DropdownItem value="all">Select all ({rows.length} items)</DropdownItem>
       </>
     );
+
     return (
       <Dropdown
         role="menu"
-        onSelect={(_ev, value) => {
+        onSelect={(_event: React.MouseEvent<Element, MouseEvent>, value: string) => {
           if (value === 'all') {
             selectAllRows(bulkSelection !== 'all');
           } else if (value === 'page') {
@@ -83,11 +103,11 @@ export const BulkSelectTableDemo = () => {
           } else {
             setSelectedRows([]);
           }
-          setBulkSelection(value);
+          setBulkSelection(value as string);
         }}
         isOpen={isBulkSelectDropdownOpen}
-        onOpenChange={(isOpen) => setIsBulkSelectDropdownOpen(isOpen)}
-        toggle={(toggleRef) => (
+        onOpenChange={(isOpen: boolean) => setIsBulkSelectDropdownOpen(isOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
           <MenuToggle
             ref={toggleRef}
             isExpanded={isBulkSelectDropdownOpen}
@@ -122,7 +142,7 @@ export const BulkSelectTableDemo = () => {
         <ToolbarGroup>
           <ToolbarItem variant="bulk-select">{buildBulkSelectDropdown()}</ToolbarItem>
         </ToolbarGroup>
-        <ToolbarItem variant="pagination">{buildPagination('top')}</ToolbarItem>
+        <ToolbarItem variant="pagination">{buildPagination('top', false)}</ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
@@ -147,7 +167,8 @@ export const BulkSelectTableDemo = () => {
                 <Td
                   select={{
                     rowIndex,
-                    onSelect: (_event, isSelecting) => setRowSelected(row, isSelecting),
+                    onSelect: (_event: React.FormEvent<HTMLInputElement>, isSelecting: boolean) =>
+                      setRowSelected(row, isSelecting),
                     isSelected: isRowSelected(row)
                   }}
                 />
@@ -159,7 +180,7 @@ export const BulkSelectTableDemo = () => {
             ))}
           </Tbody>
         </Table>
-        {buildPagination('bottom')}
+        {buildPagination('bottom', true)}
       </PageSection>
     </DashboardWrapper>
   );