feat(ModularTable): subheading

src/components/ModularTable/ModularTable.stories.tsx

@@ -343,6 +343,107 @@ export const Subrows: Story = {
   name: "Subrows",
 };
 
+export const Subheading: Story = {
+  render: () => (
+    <ModularTable<Record<string, string>>
+      getCellProps={({ value }) => ({
+        className: value === "1 minute" ? "p-heading--5" : "",
+      })}
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      columns={React.useMemo(
+        () => [
+          {
+            Header: "ID",
+            accessor: "buildId",
+            Cell: ({ value }: Cell) => <a href="#test">#{value}</a>,
+          },
+          {
+            Header: "Architecture",
+            accessor: "arch",
+          },
+          {
+            Header: "Build Duration",
+            accessor: "duration",
+            className: "u-hide--small",
+          },
+          {
+            Header: "Result",
+            accessor: "result",
+
+            Cell: ({ value }: Cell) => {
+              switch (value) {
+                case "released":
+                  return "Released";
+                case "failed":
+                  return "Failed";
+                default:
+                  return "Unknown";
+              }
+            },
+
+            getCellIcon: ({ value }) => {
+              switch (value) {
+                case "released":
+                  return ICONS.success;
+                case "failed":
+                  return ICONS.error;
+                default:
+                  return false;
+              }
+            },
+          },
+          {
+            Header: "Build Finished",
+            accessor: "finished",
+            className: "u-align-text--right",
+          },
+        ],
+        [],
+      )}
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      data={React.useMemo(
+        () => [
+          {
+            buildId: "5432",
+            arch: "arm64",
+            duration: "5 minutes",
+            result: "released",
+            finished: "10 minutes ago",
+          },
+          {
+            buildId: "1234",
+            arch: "armhf",
+            duration: "5 minutes",
+            result: "failed",
+            finished: "over 1 year ago",
+          },
+          {
+            buildId: "1111",
+            arch: "test64",
+            duration: "1 minute",
+            result: "other",
+            finished: "ages ago",
+          },
+        ],
+        [],
+      )}
+      subhead={
+        <tr>
+          <th
+            colSpan={5}
+            className="p-text--default"
+            style={{ textTransform: "none" }}
+          >
+            Showing 3 of 3 results
+          </th>
+        </tr>
+      }
+    />
+  ),
+
+  name: "Subheading",
+};
+
 /**
 Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
 ```

src/components/ModularTable/ModularTable.tsx

@@ -73,6 +73,10 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<
      * Whether the sort by needs to be reset after each data change.
      */
     autoResetSortBy?: boolean;
+    /**
+     * This will render between the header and the content.
+     */
+    subhead?: ReactNode;
   },
   HTMLProps<HTMLTableElement>
 >;
@@ -193,6 +197,7 @@ function ModularTable<D extends Record<string, unknown>>({
   initialSortColumn,
   initialSortDirection,
   autoResetSortBy = false,
+  subhead,
   ...props
 }: Props<D>): React.JSX.Element {
   const sortBy = useMemo(
@@ -273,6 +278,7 @@ function ModularTable<D extends Record<string, unknown>>({
             ))}
           </TableRow>
         ))}
+        {subhead}
       </thead>
       <tbody {...getTableBodyProps()}>
         {generateRows(rows, prepareRow, getRowProps, getCellProps)}