@patternfly/react-table 6.3.1 → 6.4.0-prerelease.2

package/src/demos/examples/TableSortableResponsive.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useEffect, useState } from 'react';
 import {
   Button,
-  Card,
   Content,
   Dropdown,
   DropdownList,
@@ -49,14 +48,14 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   const sortRows = (rows: SampleDataRow[], sortIndex: number, sortDirection: Direction) =>
     [...rows].sort((a, b) => {
       let returnValue = 0;
-      if (sortIndex === 0 || sortIndex === 7) {
-        returnValue = 1;
-      } else if (typeof Object.values(a)[sortIndex] === 'number') {
+      if (typeof Object.values(a)[sortIndex] === 'number') {
         // numeric sort
         returnValue = Object.values(a)[sortIndex] - Object.values(b)[sortIndex];
       } else {
-        // string sort
-        returnValue = Object.values(a)[sortIndex].localeCompare(Object.values(b)[sortIndex]);
+        // string sort using natural sort
+        returnValue = Object.values(a)[sortIndex].localeCompare(Object.values(b)[sortIndex], undefined, {
+          numeric: true
+        });
       }
       if (sortDirection === 'desc') {
         return returnValue * -1;
@@ -245,86 +244,84 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
           }}
           aria-label="Sortable table data"
         >
-          <Card component="div">
-            {tableToolbar}
-            <Table aria-label="Sortable Table">
-              <Thead>
-                <Tr>
-                  {columns.map((column, columnIndex) => {
-                    const sortParams = {
-                      sort: {
-                        sortBy: {
-                          index: activeSortIndex,
-                          direction: activeSortDirection
-                        },
-                        onSort,
-                        columnIndex
-                      }
-                    };
-                    return (
-                      <Th modifier={columnIndex !== 6 ? 'wrap' : undefined} key={columnIndex} {...sortParams}>
-                        {column}
-                      </Th>
-                    );
-                  })}
+          {tableToolbar}
+          <Table aria-label="Sortable Table">
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => {
+                  const sortParams = {
+                    sort: {
+                      sortBy: {
+                        index: activeSortIndex,
+                        direction: activeSortDirection
+                      },
+                      onSort,
+                      columnIndex
+                    }
+                  };
+                  return (
+                    <Th modifier={columnIndex !== 6 ? 'wrap' : undefined} key={columnIndex} {...sortParams}>
+                      {column}
+                    </Th>
+                  );
+                })}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {sortedRows.map((row, rowIndex) => (
+                <Tr key={rowIndex}>
+                  <>
+                    <Td dataLabel={columns[0]} width={15}>
+                      <div>{row.name}</div>
+                    </Td>
+                    <Td dataLabel={columns[1]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>
+                          <CodeBranchIcon key="icon" />
+                        </FlexItem>
+                        <FlexItem>{row.threads}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[2]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>
+                          <CodeIcon key="icon" />
+                        </FlexItem>
+                        <FlexItem>{row.applications}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[3]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>
+                          <CubeIcon key="icon" />
+                        </FlexItem>
+                        <FlexItem>{row.workspaces}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[4]} width={15}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>{renderLabel(row.status)}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[5]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>{row.location}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[6]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>{row.lastModified[0]} days ago</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[7]} modifier="truncate">
+                      <a href="#">{row.url}</a>
+                    </Td>
+                  </>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {sortedRows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      <Td dataLabel={columns[0]} width={15}>
-                        <div>{row.name}</div>
-                      </Td>
-                      <Td dataLabel={columns[1]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CodeBranchIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row.threads}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[2]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CodeIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row.applications}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[3]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CubeIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row.workspaces}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[4]} width={15}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>{renderLabel(row.status)}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[5]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>{row.location}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[6]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>{row.lastModified[0]} days ago</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[7]} modifier="truncate">
-                        <a href="#">{row.url}</a>
-                      </Td>
-                    </>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-            {renderPagination('bottom', false)}
-          </Card>
+              ))}
+            </Tbody>
+          </Table>
+          {renderPagination('bottom', false)}
         </PageSection>
       </DashboardWrapper>
     </Fragment>

package/src/demos/examples/TableStaticBottomPagination.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useState } from 'react';
 import {
   Button,
-  Card,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -143,37 +142,35 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled aria-label="Paginated table data">
-          <Card>
-            {tableToolbar}
-            <Table variant="compact" aria-label="Paginated Table">
-              <Thead>
-                <Tr>
-                  {columns.map((column, columnIndex) => (
-                    <Th key={columnIndex}>{column}</Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {paginatedRows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <Td dataLabel={columns[0]}>{row.name}</Td>
-                    <Td dataLabel={columns[1]}>{row.threads}</Td>
-                    <Td dataLabel={columns[2]}>{row.applications}</Td>
-                    <Td dataLabel={columns[3]}>{row.workspaces}</Td>
-                    <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
-                    <Td dataLabel={columns[5]}>{row.location}</Td>
-                    <Td dataLabel={columns[6]}>{row.lastModified}</Td>
-                    <Td dataLabel={columns[7]} modifier="truncate">
-                      <TableText>
-                        <a href="#">{row.url}</a>
-                      </TableText>
-                    </Td>
-                  </Tr>
+          {tableToolbar}
+          <Table variant="compact" aria-label="Paginated Table">
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => (
+                  <Th key={columnIndex}>{column}</Th>
                 ))}
-              </Tbody>
-            </Table>
-            {renderPagination('bottom', false)}
-          </Card>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {paginatedRows.map((row, rowIndex) => (
+                <Tr key={rowIndex}>
+                  <Td dataLabel={columns[0]}>{row.name}</Td>
+                  <Td dataLabel={columns[1]}>{row.threads}</Td>
+                  <Td dataLabel={columns[2]}>{row.applications}</Td>
+                  <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                  <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                  <Td dataLabel={columns[5]}>{row.location}</Td>
+                  <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                  <Td dataLabel={columns[7]} modifier="truncate">
+                    <TableText>
+                      <a href="#">{row.url}</a>
+                    </TableText>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+          {renderPagination('bottom', false)}
         </PageSection>
       </DashboardWrapper>
     </Fragment>

package/src/demos/examples/TableStickyFirstColumn.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
-import { Card, PageSection } from '@patternfly/react-core';
+import { PageSection } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 type Direction = 'asc' | 'desc' | undefined;
@@ -140,96 +140,88 @@ export const TableStickyFirstColumn = () => {
         padding={{ default: 'noPadding', xl: 'padding' }}
         aria-label="Sticky column table data"
       >
-        <Card component="div">
-          <InnerScrollContainer>
-            <Table aria-label="Sticky column table" gridBreakPoint="">
-              <Thead>
-                <Tr>
-                  <Th
-                    isStickyColumn
-                    stickyMinWidth="100px"
-                    hasRightBorder
-                    modifier="fitContent"
-                    sort={getSortParams(0)}
-                  >
-                    {columnNames.name}
+        <InnerScrollContainer>
+          <Table aria-label="Sticky column table" gridBreakPoint="">
+            <Thead>
+              <Tr>
+                <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="fitContent" sort={getSortParams(0)}>
+                  {columnNames.name}
+                </Th>
+                <Th modifier="fitContent" sort={getSortParams(1)}>
+                  {columnNames.state}
+                </Th>
+                <Th>{columnNames.header3}</Th>
+                <Th>{columnNames.header4}</Th>
+                <Th>{columnNames.header5}</Th>
+                <Th>{columnNames.header6}</Th>
+                <Th>{columnNames.header7}</Th>
+                <Th>{columnNames.header8}</Th>
+                <Th>{columnNames.header9}</Th>
+                <Th>{columnNames.header10}</Th>
+                <Th>{columnNames.header11}</Th>
+                <Th>{columnNames.header12}</Th>
+                <Th>{columnNames.header13}</Th>
+                <Th>{columnNames.header14}</Th>
+                <Th>{columnNames.header15}</Th>
+                <Th>{columnNames.header16}</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {sortedFacts.map((fact) => (
+                <Tr key={fact.name}>
+                  <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="truncate">
+                    {fact.name}
                   </Th>
-                  <Th modifier="fitContent" sort={getSortParams(1)}>
-                    {columnNames.state}
-                  </Th>
-                  <Th>{columnNames.header3}</Th>
-                  <Th>{columnNames.header4}</Th>
-                  <Th>{columnNames.header5}</Th>
-                  <Th>{columnNames.header6}</Th>
-                  <Th>{columnNames.header7}</Th>
-                  <Th>{columnNames.header8}</Th>
-                  <Th>{columnNames.header9}</Th>
-                  <Th>{columnNames.header10}</Th>
-                  <Th>{columnNames.header11}</Th>
-                  <Th>{columnNames.header12}</Th>
-                  <Th>{columnNames.header13}</Th>
-                  <Th>{columnNames.header14}</Th>
-                  <Th>{columnNames.header15}</Th>
-                  <Th>{columnNames.header16}</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>
+                  <Td modifier="nowrap" dataLabel={columnNames.header10}>
+                    {fact.detail8}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header11}>
+                    {fact.detail9}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header12}>
+                    {fact.detail10}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header13}>
+                    {fact.detail11}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header14}>
+                    {fact.detail12}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header15}>
+                    {fact.detail13}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header16}>
+                    {fact.detail14}
+                  </Td>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {sortedFacts.map((fact) => (
-                  <Tr key={fact.name}>
-                    <Th isStickyColumn stickyMinWidth="100px" 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>
-                    <Td modifier="nowrap" dataLabel={columnNames.header10}>
-                      {fact.detail8}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header11}>
-                      {fact.detail9}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header12}>
-                      {fact.detail10}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header13}>
-                      {fact.detail11}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header14}>
-                      {fact.detail12}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header15}>
-                      {fact.detail13}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header16}>
-                      {fact.detail14}
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </InnerScrollContainer>
-        </Card>
+              ))}
+            </Tbody>
+          </Table>
+        </InnerScrollContainer>
       </PageSection>
     </DashboardWrapper>
   );

package/src/demos/examples/TableStickyHeader.tsx

@@ -1,4 +1,4 @@
-import { Card, Label, PageSection } from '@patternfly/react-core';
+import { Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
@@ -20,40 +20,38 @@ export const TableStickyHeader: React.FunctionComponent = () => {
   return (
     <DashboardWrapper hasPageTemplateTitle>
       <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Sticky header table data">
-        <Card component="div">
-          <Table aria-label="Sticky Header Table Demo" isStickyHeader>
-            <Thead>
-              <Tr>
-                <Th width={15}>{columns[0]}</Th>
-                <Th width={10}>{columns[1]}</Th>
-                <Th width={10}>{columns[2]}</Th>
-                <Th width={10}>{columns[3]}</Th>
-                <Th width={10}>{columns[4]}</Th>
-                <Th width={15}>{columns[5]}</Th>
-                <Th width={15}>{columns[6]}</Th>
-                <Th width={10}>{columns[7]}</Th>
+        <Table aria-label="Sticky Header Table Demo" isStickyHeader>
+          <Thead>
+            <Tr>
+              <Th width={15}>{columns[0]}</Th>
+              <Th width={10}>{columns[1]}</Th>
+              <Th width={10}>{columns[2]}</Th>
+              <Th width={10}>{columns[3]}</Th>
+              <Th width={10}>{columns[4]}</Th>
+              <Th width={15}>{columns[5]}</Th>
+              <Th width={15}>{columns[6]}</Th>
+              <Th width={10}>{columns[7]}</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map((row) => (
+              <Tr key={row.name}>
+                <Td dataLabel={columns[0]}>{row.name}</Td>
+                <Td dataLabel={columns[1]}>{row.threads}</Td>
+                <Td dataLabel={columns[2]}>{row.applications}</Td>
+                <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                <Td dataLabel={columns[5]}>{row.location}</Td>
+                <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                <Td dataLabel={columns[7]}>
+                  <a href="#">
+                    <TableText wrapModifier="truncate">{row.url} </TableText>
+                  </a>
+                </Td>
               </Tr>
-            </Thead>
-            <Tbody>
-              {rows.map((row) => (
-                <Tr key={row.name}>
-                  <Td dataLabel={columns[0]}>{row.name}</Td>
-                  <Td dataLabel={columns[1]}>{row.threads}</Td>
-                  <Td dataLabel={columns[2]}>{row.applications}</Td>
-                  <Td dataLabel={columns[3]}>{row.workspaces}</Td>
-                  <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
-                  <Td dataLabel={columns[5]}>{row.location}</Td>
-                  <Td dataLabel={columns[6]}>{row.lastModified}</Td>
-                  <Td dataLabel={columns[7]}>
-                    <a href="#">
-                      <TableText wrapModifier="truncate">{row.url} </TableText>
-                    </a>
-                  </Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </Card>
+            ))}
+          </Tbody>
+        </Table>
       </PageSection>
     </DashboardWrapper>
   );