diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
index d4e6a4ab7..79d6e8fb6 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
@@ -35,7 +35,7 @@ import { DataFilters } from "../DataFilters";
import { EmptyState } from "../../EmptyState";
import { fetchData } from "./fetchData";
import { LayoutSwitcher } from "./LayoutSwitcher";
-import { MenuButton } from "../..";
+import { MenuButton } from "../../MenuButton";
import { MoreIcon } from "../../icons.generated";
import { TableSettings } from "./TableSettings";
import { Pagination, usePagination } from "../../Pagination";
@@ -43,6 +43,7 @@ import { TableLayoutContent } from "./TableLayoutContent";
import { CardLayoutContent } from "./CardLayoutContent";
import { useFilterConversion } from "./useFilterConversion";
import { useRowReordering } from "../../DataTable/useRowReordering";
+import { Typography } from "../../Typography";
import {
DesignTokens,
useOdysseyDesignTokens,
@@ -72,6 +73,20 @@ const AdditionalActionsContainer = styled("div", {
gap: odysseyDesignTokens.Spacing2,
}));
+const AdditionalActionsInner = styled("div", {
+ shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+ display: "flex",
+ alignItems: "center",
+ gap: odysseyDesignTokens.Spacing2,
+}));
+
+const MetaTextContainer = styled("div", {
+ shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+ marginInlineEnd: odysseyDesignTokens.Spacing2,
+}));
+
const DataView = ({
additionalActionButton,
additionalActionMenuItems,
@@ -96,6 +111,7 @@ const DataView = ({
isNoResults: isNoResultsProp,
isPaginationMoreDisabled,
isRowReorderingDisabled,
+ metaText,
noResultsPlaceholder,
onChangeRowSelection,
onReorderRows,
@@ -266,49 +282,62 @@ const DataView = ({
return;
}, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);
- const additionalActions = useMemo(
- () => (
- <>
- {currentLayout === "table" && tableLayoutOptions && (
-
- )}
-
- {availableLayouts.length > 1 && (
-
- )}
-
- {additionalActionButton}
-
- {additionalActionMenuItems && (
- }
- ariaLabel={t("table.moreactions.arialabel")}
- buttonVariant="secondary"
- menuAlignment="right"
- >
- {additionalActionMenuItems}
-
- )}
- >
- ),
- [
- currentLayout,
- tableLayoutOptions,
- tableState,
- availableLayouts,
- additionalActionButton,
- additionalActionMenuItems,
- t,
- ],
- );
+ const additionalActions = useMemo(() => {
+ return (
+ (metaText ||
+ (currentLayout === "table" && tableLayoutOptions) ||
+ availableLayouts.length > 1 ||
+ additionalActionButton ||
+ additionalActionMenuItems) && (
+
+ {metaText && (
+
+ {metaText}
+
+ )}
+
+ {currentLayout === "table" && tableLayoutOptions && (
+
+ )}
+
+ {availableLayouts.length > 1 && (
+
+ )}
+
+ {additionalActionButton}
+
+ {additionalActionMenuItems && (
+ }
+ ariaLabel={t("table.moreactions.arialabel")}
+ buttonVariant="secondary"
+ menuAlignment="right"
+ >
+ {additionalActionMenuItems}
+
+ )}
+
+ )
+ );
+ }, [
+ additionalActionButton,
+ additionalActionMenuItems,
+ availableLayouts,
+ currentLayout,
+ metaText,
+ odysseyDesignTokens,
+ tableLayoutOptions,
+ tableState,
+ t,
+ ]);
const enableVirtualization = useMemo(
() => enableVirtualizationProp ?? paginationType === "loadMore",
@@ -365,11 +394,14 @@ const DataView = ({
)}
- {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && (
-
- {additionalActions}
-
- )}
+ {!shouldShowFilters &&
+ !bulkActionMenuItems &&
+ !hasRowSelection &&
+ additionalActions && (
+
+ {additionalActions}
+
+ )}
{currentLayout === "table" && tableLayoutOptions && (
void;
onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
index a67815c37..0b49457ca 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
@@ -118,6 +118,9 @@ const storybookMeta: Meta = {
currentPage: {
control: "number",
},
+ metaText: {
+ control: "text",
+ },
paginationType: {
control: "select",
options: paginationTypeValues,
@@ -417,6 +420,7 @@ const BaseStory: StoryObj = {
hasSearch={args.hasSearch}
hasSearchSubmitButton={args.hasSearchSubmitButton}
isPaginationMoreDisabled={args.isPaginationMoreDisabled}
+ metaText={args.metaText}
searchDelayTime={args.searchDelayTime}
errorMessage={args.errorMessage}
initialLayout={args.initialLayout}
@@ -506,6 +510,7 @@ export const Everything: StoryObj = {
hasRowSelection: true,
hasAdditionalActionButton: true,
hasAdditionalActionMenuItems: true,
+ metaText: "Last updated 12 hours ago",
},
};