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

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-table/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`
       }}
@@ -58,12 +72,17 @@ export const CompactTable = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
-                <FilterIcon /> Status
+              <MenuToggle
+                icon={<FilterIcon />}
+                ref={toggleRef}
+                onClick={() => setIsSelectOpen(!isSelectOpen)}
+                isExpanded={isSelectOpen}
+              >
+                Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
-            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
+            onOpenChange={(isOpen: boolean) => setIsSelectOpen(isOpen)}
             onSelect={() => setIsSelectOpen(!isSelectOpen)}
           >
             {[
@@ -92,7 +111,7 @@ export const CompactTable = () => {
     </Toolbar>
   );
 
-  const renderLabel = (labelText) => {
+  const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
         return <Label color="green">{labelText}</Label>;
@@ -102,8 +121,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 +168,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-table/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);
 
@@ -49,12 +51,12 @@ export const CompoundExpandable = () => {
             <Th>{columnNames.description}</Th>
             <Th>{columnNames.date}</Th>
             <Th>{columnNames.status}</Th>
-            <Th />
+            <Th screenReaderText="Actions" />
           </Tr>
         </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}
@@ -82,7 +84,7 @@ export const CompoundExpandable = () => {
   );
 
   const tableToolbar = (
-    <Toolbar id="compact-toolbar" usePageInsets>
+    <Toolbar id="compact-toolbar">
       <ToolbarContent>
         <ToolbarItem>
           <Select
@@ -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',
@@ -191,7 +205,8 @@ export const CompoundExpandable = () => {
                 <Th>{columnNames.prs}</Th>
                 <Th>{columnNames.workspaces}</Th>
                 <Th>{columnNames.lastCommit}</Th>
-                <Th />
+                <Th screenReaderText="URL" />
+                <Th screenReaderText="Actions" />
               </Tr>
             </Thead>
             {repositories.map((repo, rowIndex) => {
@@ -248,7 +263,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,58 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import {
+  Bullseye,
+  Button,
+  Card,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+  PageSection
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import { DashboardWrapper } from '@patternfly/react-table/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
+                    titleText="No results found"
+                    icon={SearchIcon}
+                    headingLevel="h2"
+                    variant={EmptyStateVariant.sm}
+                  >
+                    <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,43 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-table/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
+                    icon={ExclamationCircleIcon}
+                    titleText="Unable to connect"
+                    headingLevel="h2"
+                    variant={EmptyStateVariant.sm}
+                  >
+                    <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,33 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-table/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 titleText="Loading" icon={Spinner} headingLevel="h2" />
+                </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 { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
+import React, { ReactNode } from 'react';
+import { Card, Content, Label, PageSection } 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-table/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,
@@ -13,17 +22,17 @@ const serverData = [
     workspaces: 7,
     status: { title: <Label color="green">Running</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Boston</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>2 hours ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node1</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Boston</small>
+        </p>
+        <p>
+          Last Modified<small>2 hours ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node1</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -33,17 +42,17 @@ const serverData = [
     workspaces: 17,
     status: { title: <Label color="red">Down</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Atlanta</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>5 hours ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node2</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Atlanta</small>
+        </p>
+        <p>
+          Last Modified<small>5 hours ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node2</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -53,17 +62,17 @@ const serverData = [
     workspaces: 3,
     status: { title: <Label color="green">Running</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>San Francisco</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>20 minutes ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node3</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>San Francisco</small>
+        </p>
+        <p>
+          Last Modified<small>20 minutes ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node3</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -73,17 +82,17 @@ const serverData = [
     workspaces: 15,
     status: { title: <Label color="blue">Needs Maintenance</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Raleigh</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>10 minutes ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node4</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Raleigh</small>
+        </p>
+        <p>
+          Last Modified<small>10 minutes ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node4</small>
+        </p>
+      </Content>
     )
   },
   {
@@ -93,24 +102,24 @@ const serverData = [
     workspaces: 17,
     status: { title: <Label color="orange">Stopped</Label> },
     details: (
-      <TextContent>
-        <Text component={TextVariants.p}>
-          Location<Text component={TextVariants.small}>Atlanta</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          Last Modified<Text component={TextVariants.small}>15 minutes ago</Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node5</Text>
-        </Text>
-      </TextContent>
+      <Content>
+        <p>
+          Location<small>Atlanta</small>
+        </p>
+        <p>
+          Last Modified<small>15 minutes ago</small>
+        </p>
+        <p>
+          URL<small>http://www.redhat.com/en/office-locations/US-node5</small>
+        </p>
+      </Content>
     )
   }
 ];
 
 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,10 +161,11 @@ const ExpandCollapseAllTableDemo = () => {
                   <Th
                     expand={{
                       areAllExpanded: !areAllExpanded,
-                      collapseAllAriaLabel: collapseAllAriaLabel,
+                      collapseAllAriaLabel,
                       onToggle: onCollapseAll
                     }}
-                  ></Th>
+                    aria-label="Row expansion"
+                  />
                   {expandableColumns.map((column) => (
                     <Th key={column}>{column}</Th>
                   ))}