diff --git a/src/components/ModularTable/ModularTable.stories.tsx b/src/components/ModularTable/ModularTable.stories.tsx index 5d1eca4d1..3c68b841a 100644 --- a/src/components/ModularTable/ModularTable.stories.tsx +++ b/src/components/ModularTable/ModularTable.stories.tsx @@ -343,6 +343,107 @@ export const Subrows: Story = { name: "Subrows", }; +export const Subheading: Story = { + render: () => ( + > + 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) => #{value}, + }, + { + 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={ + + + Showing 3 of 3 results + + + } + /> + ), + + name: "Subheading", +}; + /** Example below shows a basic `ModularTable` with `SummaryButton` component in the footer. ``` diff --git a/src/components/ModularTable/ModularTable.tsx b/src/components/ModularTable/ModularTable.tsx index e630ca4cf..0cd0d95ca 100644 --- a/src/components/ModularTable/ModularTable.tsx +++ b/src/components/ModularTable/ModularTable.tsx @@ -73,6 +73,10 @@ export type Props> = 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 >; @@ -193,6 +197,7 @@ function ModularTable>({ initialSortColumn, initialSortDirection, autoResetSortBy = false, + subhead, ...props }: Props): React.JSX.Element { const sortBy = useMemo( @@ -273,6 +278,7 @@ function ModularTable>({ ))} ))} + {subhead} {generateRows(rows, prepareRow, getRowProps, getCellProps)}