feat(Table): add composable sticky footer (#12645)

Author: gabipodolnikova

packages/react-table/src/components/Table/Table.tsx

@@ -58,6 +58,8 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   isStickyHeaderBase?: boolean;
   /** @beta Flag indicating the table header should have stuck styling, when the header is not at the top of the scroll container. */
   isStickyHeaderStuck?: boolean;
+  /** Flag indicating the table footer should stick to the bottom of its scroll container. */
+  isStickyFooter?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<any>;
   /** Flag indicating table is a tree table */
@@ -104,6 +106,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isStickyHeader = false,
   isStickyHeaderBase = false,
   isStickyHeaderStuck = false,
+  isStickyFooter = false,
   isPlain = false,
   isNoPlainOnGlass = false,
   gridBreakPoint = TableGridBreakpoint.gridMd,
@@ -233,6 +236,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isStickyHeader && styles.modifiers.stickyHeader,
           isStickyHeaderBase && styles.modifiers.stickyHeaderBase,
           isStickyHeaderStuck && styles.modifiers.stickyHeaderStuck,
+          isStickyFooter && styles.modifiers.stickyFooter,
           isTreeTable && stylesTreeView.modifiers.treeView,
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,

packages/react-table/src/components/Table/Tfoot.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+export interface TfootProps extends React.HTMLProps<HTMLTableSectionElement> {
+  /** Content rendered inside the <tfoot> row group */
+  children?: React.ReactNode;
+  /** Additional classes added to the <tfoot> element */
+  className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+}
+
+const TfootBase: React.FunctionComponent<TfootProps> = ({ children, className, innerRef, ...props }: TfootProps) => (
+  <tfoot className={css(styles.tableTfoot, className)} ref={innerRef} {...props}>
+    {children}
+  </tfoot>
+);
+
+export const Tfoot = forwardRef((props: TfootProps, ref: React.Ref<HTMLTableSectionElement>) => (
+  <TfootBase {...props} innerRef={ref} />
+));
+Tfoot.displayName = 'Tfoot';

packages/react-table/src/components/Table/__tests__/Table.test.tsx

@@ -222,3 +222,15 @@ test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isSt
 
   expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
 });
+
+test(`Renders with class ${styles.modifiers.stickyFooter} when isStickyFooter is true`, () => {
+  render(<Table isStickyFooter aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyFooter);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyFooter} when isStickyFooter is false`, () => {
+  render(<Table isStickyFooter={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyFooter);
+});

packages/react-table/src/components/Table/__tests__/Tfoot.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { Tfoot } from '../Tfoot';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(
+    <table>
+      <Tfoot />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(
+    <table>
+      <Tfoot>Footer content</Tfoot>
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveTextContent('Footer content');
+});
+
+test(`Renders with class ${styles.tableTfoot} only by default`, () => {
+  render(
+    <table>
+      <Tfoot />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveClass(styles.tableTfoot, { exact: true });
+});
+
+test('Forwards refs to the tfoot element', () => {
+  const ref = { current: null } as React.RefObject<HTMLTableSectionElement>;
+
+  render(
+    <table>
+      <Tfoot ref={ref} />
+    </table>
+  );
+
+  expect(ref.current).toBe(screen.getByRole('rowgroup'));
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(
+    <table>
+      <Tfoot className="custom-footer" />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveClass('custom-footer');
+});
+
+test('Spreads additional props', () => {
+  render(
+    <table>
+      <Tfoot data-custom="true" />
+    </table>
+  );
+
+  expect(screen.getByRole('rowgroup')).toHaveAttribute('data-custom', 'true');
+});

packages/react-table/src/components/Table/examples/Table.md

@@ -10,6 +10,7 @@ propComponents:
     'Tr',
     'Th',
     'Td',
+    'Tfoot',
     'Caption',
     'TableText',
     'TdActionsType',
@@ -480,6 +481,14 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 
 ```
 
+### Sticky footer
+
+Use `Tfoot` for semantic table footer rows. Set `isStickyFooter` on `Table` to keep the footer visible while its scroll container is scrolling.
+
+```ts file="TableStickyFooter.tsx"
+
+```
+
 ### Striped
 
 To apply striping to a basic table, add the `isStriped` property to `Table`.

packages/react-table/src/components/Table/examples/TableStickyFooter.tsx

@@ -0,0 +1,33 @@
+import { Table, Thead, Tfoot, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
+
+export const TableStickyFooter: React.FunctionComponent = () => {
+  const rows = Array.from({ length: 12 }, (_, index) => index + 1);
+
+  return (
+    <div style={{ height: '400px' }}>
+      <InnerScrollContainer>
+        <Table aria-label="Sticky footer table" isStickyFooter>
+          <Thead>
+            <Tr>
+              <Th>Item</Th>
+              <Th>Value</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map((row) => (
+              <Tr key={row}>
+                <Td dataLabel="Item">Item {row}</Td>
+                <Td dataLabel="Value">Value {row}</Td>
+              </Tr>
+            ))}
+          </Tbody>
+          <Tfoot>
+            <Tr>
+              <Td colSpan={2}>Total: {rows.length} items</Td>
+            </Tr>
+          </Tfoot>
+        </Table>
+      </InnerScrollContainer>
+    </div>
+  );
+};

packages/react-table/src/components/Table/index.ts

@@ -16,6 +16,7 @@ export * from './TreeRowWrapper';
 export * from './Table';
 export * from './Thead';
 export * from './Tbody';
+export * from './Tfoot';
 export * from './Tr';
 export * from './Th';
 export * from './Td';