@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.11

package/src/{docs/demos/table-demos/Compact.jsx → demos/examples/TableCompact.tsx}

@@ -1,9 +1,7 @@
 import React from 'react';
-
 import {
   Button,
   Card,
-  Label,
   MenuToggle,
   MenuToggleElement,
   Pagination,
@@ -13,29 +11,45 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  Label,
+  PaginationVariant
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 
-export const CompactTable = () => {
-  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+export const TableCompact: React.FunctionComponent = () => {
+  const [isSelectOpen, setIsSelectOpen] = React.useState<boolean>(false);
+  const [page, setPage] = React.useState<number>(1);
+  const [perPage, setPerPage] = React.useState<number>(10);
   const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => {
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number,
+    startIdx: number,
+    endIdx: number
+  ) => {
     setPaginatedRows(rows.slice(startIdx, endIdx));
     setPage(newPage);
   };
-  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 renderPagination = (variant, isCompact) => (
+  const renderPagination = (variant: string, isCompact: boolean) => (
     <Pagination
       isCompact={isCompact}
       itemCount={rows.length}
@@ -43,7 +57,7 @@ export const CompactTable = () => {
       perPage={perPage}
       onSetPage={handleSetPage}
       onPerPageSelect={handlePerPageSelect}
-      variant={variant}
+      variant={variant as PaginationVariant}
       titles={{
         paginationAriaLabel: `${variant} pagination`
       }}
@@ -63,7 +77,7 @@ export const CompactTable = () => {
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
-            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
+            onOpenChange={(isOpen: boolean) => setIsSelectOpen(isOpen)}
             onSelect={() => setIsSelectOpen(!isSelectOpen)}
           >
             {[
@@ -92,7 +106,7 @@ export const CompactTable = () => {
     </Toolbar>
   );
 
-  const renderLabel = (labelText) => {
+  const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
         return <Label color="green">{labelText}</Label>;
@@ -102,8 +116,11 @@ export const CompactTable = () => {
         return <Label color="blue">{labelText}</Label>;
       case 'Down':
         return <Label color="red">{labelText}</Label>;
+      default:
+        return <></>;
     }
   };
+
   return (
     <React.Fragment>
       <DashboardWrapper hasPageTemplateTitle>
@@ -146,7 +163,6 @@ export const CompactTable = () => {
                 ))}
               </Tbody>
             </Table>
-            {renderPagination('bottom', false)}
           </Card>
         </PageSection>
       </DashboardWrapper>

package/src/{docs/demos/table-demos/CompoundExpansion.jsx → demos/examples/TableCompoundExpansion.tsx}

@@ -14,15 +14,17 @@ import {
   Pagination,
   PageSection,
   Select,
-  SelectOption
+  SelectOption,
+  PaginationVariant
 } from '@patternfly/react-core';
 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';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
-export const CompoundExpandable = () => {
+export const TableCompoundExpansion: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
 
@@ -54,7 +56,7 @@ export const CompoundExpandable = () => {
         </Thead>
         <Tbody>
           {items.map((item) => (
-            <Tr key={item.name}>
+            <Tr key={item.description}>
               <Td dataLabel={columnNames.description}>{item.description}</Td>
               <Td dataLabel={columnNames.date}>{item.date}</Td>
               <Td dataLabel={columnNames.status}>{item.status}</Td>
@@ -68,7 +70,7 @@ export const CompoundExpandable = () => {
     );
   };
 
-  const renderPagination = (variant, isCompact) => (
+  const renderPagination = (variant: 'top' | 'bottom' | PaginationVariant, isCompact: boolean) => (
     <Pagination
       isCompact={isCompact}
       itemCount={36}
@@ -94,7 +96,7 @@ export const CompoundExpandable = () => {
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
-            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
+            onOpenChange={(isOpen: boolean) => setIsSelectOpen(isOpen)}
             onSelect={() => setIsSelectOpen(!isSelectOpen)}
           >
             {[
@@ -136,7 +138,19 @@ export const CompoundExpandable = () => {
     }
   ];
 
-  const repositories = [
+  interface Repo {
+    name: string;
+    branches: number;
+    prs: number;
+    workspaces: number;
+    lastCommit: string;
+  }
+
+  interface IDictionary<T> {
+    [Key: string]: T;
+  }
+
+  const repositories: Repo[] = [
     {
       name: 'siemur/test-space',
       branches: 10,
@@ -147,7 +161,7 @@ export const CompoundExpandable = () => {
     { name: 'siemur/test-space-2', branches: 3, prs: 4, workspaces: 4, lastCommit: '20 minutes' }
   ];
 
-  const columnNames = {
+  const columnNames: IDictionary<string> = {
     name: 'Repositories',
     branches: 'Branches',
     prs: 'Pull requests',
@@ -158,11 +172,11 @@ export const CompoundExpandable = () => {
   // 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({
+  const [expandedCells, setExpandedCells] = React.useState<IDictionary<string>>({
     'siemur/test-space': 'branches' // Default to the first cell of the first row being expanded
   });
-  const setCellExpanded = (repo, columnKey, isExpanding = true) => {
-    const newExpandedCells = { ...expandedCells };
+  const setCellExpanded = (repo: Repo, columnKey: string, isExpanding = true) => {
+    const newExpandedCells: IDictionary<string> = { ...expandedCells };
     if (isExpanding) {
       newExpandedCells[repo.name] = columnKey;
     } else {
@@ -170,7 +184,7 @@ export const CompoundExpandable = () => {
     }
     setExpandedCells(newExpandedCells);
   };
-  const compoundExpandParams = (repo, columnKey, rowIndex, columnIndex) => ({
+  const compoundExpandParams = (repo: Repo, columnKey: string, rowIndex: number, columnIndex: number) => ({
     isExpanded: expandedCells[repo.name] === columnKey,
     onToggle: () => setCellExpanded(repo, columnKey, expandedCells[repo.name] !== columnKey),
     expandId: 'compound-expandable-demo',
@@ -248,7 +262,7 @@ export const CompoundExpandable = () => {
                           <NestedItemsTable />
                         ) : (
                           <ExpandableRowContent>
-                            <div className="pf-v5-u-m-md">
+                            <div className={spacing.mMd}>
                               Expanded content for {repo.name}: {expandedCellKey} goes here!
                             </div>
                           </ExpandableRowContent>

package/src/demos/examples/TableEmptyStateDefault.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import {
+  Bullseye,
+  Button,
+  Card,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateActions,
+  PageSection
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+
+export const TableEmptyStateDefault: React.FunctionComponent = () => (
+  <DashboardWrapper hasPageTemplateTitle>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <Card component="div">
+        <Table 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.sm}>
+                    <EmptyStateHeader
+                      icon={<EmptyStateIcon icon={SearchIcon} />}
+                      titleText="No results found"
+                      headingLevel="h2"
+                    />
+                    <EmptyStateBody>
+                      No results match this filter criteria. Clear all filters and try again.
+                    </EmptyStateBody>
+                    <EmptyStateFooter>
+                      <EmptyStateActions>
+                        <Button variant="link">Clear all filters</Button>
+                      </EmptyStateActions>
+                    </EmptyStateFooter>
+                  </EmptyState>
+                </Bullseye>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);

package/src/demos/examples/TableEmptyStateError.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import {
+  Bullseye,
+  Card,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateHeader,
+  PageSection
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+
+export const TableEmptyStateError: React.FunctionComponent = () => (
+  <DashboardWrapper hasPageTemplateTitle>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <Card component="div">
+        <Table aria-label="Loading table demo">
+          <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.sm}>
+                    <EmptyStateHeader
+                      titleText="Unable to connect"
+                      icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
+                      headingLevel="h2"
+                    />
+                    <EmptyStateBody>
+                      There was an error retrieving data. Check your connection and reload the page.
+                    </EmptyStateBody>
+                  </EmptyState>
+                </Bullseye>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);

package/src/demos/examples/TableEmptyStateLoading.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import {
+  Bullseye,
+  Card,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateHeader,
+  PageSection,
+  Spinner
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+
+export const TableEmptyStateLoading: React.FunctionComponent = () => (
+  <DashboardWrapper hasPageTemplateTitle>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <Card component="div">
+        <Table aria-label="Loading table demo">
+          <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>
+                    <EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
+                  </EmptyState>
+                </Bullseye>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);

package/src/{docs/demos/table-demos/ExpandCollapseAll.jsx → demos/examples/TableExpandCollapseAll.tsx}

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 
 const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 
-const serverData = [
+interface Server {
+  name: string;
+  threads: number;
+  applications: number;
+  workspaces: number;
+  status: { title: ReactNode };
+  details: ReactNode;
+}
+
+const serverData: Server[] = [
   {
     name: 'US-Node 1',
     threads: 18,
@@ -110,7 +119,7 @@ const serverData = [
 
 const initialExpandedServerNames = ['US-Node 2']; // Default to expanded
 
-const ExpandCollapseAllTableDemo = () => {
+export const TableExpandCollapseAll: React.FunctionComponent = () => {
   const [areAllExpanded, setAreAllExpanded] = React.useState(false);
   const [collapseAllAriaLabel, setCollapseAllAriaLabel] = React.useState('Expand all');
   const [expandedServerNames, setExpandedServerNames] = React.useState(initialExpandedServerNames);
@@ -121,20 +130,18 @@ const ExpandCollapseAllTableDemo = () => {
     setCollapseAllAriaLabel(allExpanded ? 'Collapse all' : 'Expand all');
   }, [expandedServerNames]);
 
-  const setServerExpanded = (server, isExpanding) => {
+  const setServerExpanded = (server: Server, isExpanding: boolean) => {
     const otherExpandedServerNames = expandedServerNames.filter((r) => r !== server.name);
     setExpandedServerNames(isExpanding ? [...otherExpandedServerNames, server.name] : otherExpandedServerNames);
   };
 
-  const isServerExpanded = (server) => {
-    return expandedServerNames.includes(server.name);
-  };
+  const isServerExpanded = (server: Server) => expandedServerNames.includes(server.name);
 
   // We want to be able to reference the original data object based on row index. But because an expanded
   // row takes up two row indexes, servers[rowIndex] will not be accurate like it would in a normal table.
   // One solution to this is to create an array of data objects indexed by the displayed row index.
 
-  const onCollapseAll = (_event, _rowIndex, isOpen) => {
+  const onCollapseAll = (_event: any, _rowIndex: number, isOpen: boolean) => {
     setExpandedServerNames(isOpen ? [...serverData.map((server) => server.name)] : []);
   };
 
@@ -154,7 +161,7 @@ const ExpandCollapseAllTableDemo = () => {
                   <Th
                     expand={{
                       areAllExpanded: !areAllExpanded,
-                      collapseAllAriaLabel: collapseAllAriaLabel,
+                      collapseAllAriaLabel,
                       onToggle: onCollapseAll
                     }}
                   ></Th>