Add new TableFoot component

src/components/data/TableFoot.tsx

@@ -0,0 +1,48 @@
+import classnames from 'classnames';
+import type { JSX } from 'preact';
+
+import type { PresentationalProps } from '../../types';
+import { downcastRef } from '../../util/typing';
+
+import TableSectionContext from './TableSectionContext';
+import type { TableSection } from './TableSectionContext';
+
+type HTMLAttributes = JSX.HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableFootProps = PresentationalProps & HTMLAttributes;
+
+/**
+ * Render a table footer section
+ */
+const TableFootNext = function TableFoot({
+  children,
+  classes,
+  elementRef,
+
+  ...htmlAttributes
+}: TableFootProps) {
+  const sectionContext: TableSection = {
+    section: 'foot',
+  };
+
+  return (
+    <TableSectionContext.Provider value={sectionContext}>
+      <tfoot
+        {...htmlAttributes}
+        data-component="TableFoot"
+        ref={downcastRef(elementRef)}
+        className={classnames(
+          // This tfoot element will take up available extra vertical space when
+          // a Table has sparse data. This prevents <TableRow>s from stretching
+          // vertically to fill extra space.
+          'h-full',
+          classes
+        )}
+      >
+        {children}
+      </tfoot>
+    </TableSectionContext.Provider>
+  );
+};
+
+export default TableFootNext;

src/components/data/index.js

@@ -7,6 +7,7 @@ export { default as ScrollBox } from './ScrollBox';
 export { default as Table } from './Table';
 export { default as TableBody } from './TableBody';
 export { default as TableCell } from './TableCell';
+export { default as TableFoot } from './TableFoot';
 export { default as TableHead } from './TableHead';
 export { default as TableRow } from './TableRow';
 export { default as Thumbnail } from './Thumbnail';

src/components/data/test/TableFoot-test.js

@@ -0,0 +1,26 @@
+import { mount } from 'enzyme';
+
+import { testPresentationalComponent } from '../../test/common-tests';
+
+import TableFoot from '../TableFoot';
+
+describe('TableFoot', () => {
+  // Content function for shared presentational test does not wrap with context
+  // This is to ensure the component functions as expected without context
+  const contentFn = (Component, props = {}) => {
+    return mount(
+      <table>
+        <Component {...props}>
+          <tr>
+            <td>Cell content</td>
+          </tr>
+        </Component>
+      </table>
+    );
+  };
+
+  testPresentationalComponent(TableFoot, {
+    createContent: contentFn,
+    elementSelector: '[data-component="TableFoot"]',
+  });
+});

src/next.js

@@ -14,6 +14,7 @@ export {
   Table,
   TableBody,
   TableCell,
+  TableFoot,
   TableHead,
   TableRow,
   Thumbnail,