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

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}
@@ -120,9 +140,9 @@ export const BulkSelectTableDemo = () => {
     <Toolbar>
       <ToolbarContent>
         <ToolbarGroup>
-          <ToolbarItem variant="bulk-select">{buildBulkSelectDropdown()}</ToolbarItem>
+          <ToolbarItem>{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>
   );