From 8d2301d9d5826870cba8b1c224ec493b4c540851 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Mon, 17 Jun 2024 21:05:21 -0400
Subject: [PATCH 01/15] feat: add DataComponent work

---
 packages/odyssey-react-mui/src/Card.tsx       |  55 +--
 .../src/DataTable/DataTableRowActions.tsx     |   2 +-
 .../src/OdysseyCacheProvider.tsx              |   4 +-
 .../labs/DataComponents/BulkActionsMenu.tsx   |  85 ++++
 .../src/labs/DataComponents/DataStack.tsx     |  93 +++++
 .../src/labs/DataComponents/DataTable.tsx     |  95 +++++
 .../src/labs/DataComponents/DataView.tsx      | 388 ++++++++++++++++++
 .../labs/DataComponents/LayoutSwitcher.tsx    |  65 +++
 .../src/labs/DataComponents/RowActions.tsx    | 119 ++++++
 .../src/labs/DataComponents/StackCard.tsx     | 194 +++++++++
 .../src/labs/DataComponents/StackContent.tsx  | 238 +++++++++++
 .../src/labs/DataComponents/TableContent.tsx  | 361 ++++++++++++++++
 .../src/labs/DataComponents/TableSettings.tsx | 137 +++++++
 .../src/labs/DataComponents/componentTypes.ts | 118 ++++++
 .../src/labs/DataComponents/constants.tsx     |  20 +
 .../src/labs/DataComponents/dataTypes.ts      |  72 ++++
 .../src/labs/DataComponents/fetchData.ts      |  49 +++
 .../src/labs/DataComponents/index.tsx         |  19 +
 .../labs/DataComponents/tableConstants.tsx    | 156 +++++++
 .../DataComponents/useFilterConversion.ts     |  91 ++++
 packages/odyssey-react-mui/src/labs/index.ts  |   2 +
 .../src/theme/components.tsx                  |   5 +-
 .../odyssey-mui/Card/Card.stories.tsx         |  27 +-
 .../DataTable/DataTable.stories.tsx           |  14 +-
 24 files changed, 2367 insertions(+), 42 deletions(-)
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/index.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts

diff --git a/packages/odyssey-react-mui/src/Card.tsx b/packages/odyssey-react-mui/src/Card.tsx
index 41c540ec05..7549944d7f 100644
--- a/packages/odyssey-react-mui/src/Card.tsx
+++ b/packages/odyssey-react-mui/src/Card.tsx
@@ -33,6 +33,7 @@ import {
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "./Typography";
+import { Box } from "./Box";
 
 export const CARD_IMAGE_HEIGHT = "64px";
 
@@ -91,30 +92,36 @@ const Card = ({
 
   const cardContent = useMemo(
     () => (
-      <>
-        {image && (
-          <ImageContainer
-            odysseyDesignTokens={odysseyDesignTokens}
-            hasMenuButtonChildren={Boolean(menuButtonChildren)}
-          >
-            {image}
-          </ImageContainer>
-        )}
-
-        {overline && <Support component="div">{overline}</Support>}
-        {title && <Heading5 component="div">{title}</Heading5>}
-        {description && (
-          <Paragraph color="textSecondary">{description}</Paragraph>
-        )}
-
-        {button && (
-          <MuiCardActions>
-            <ButtonContext.Provider value={buttonProviderValue}>
-              {button}
-            </ButtonContext.Provider>
-          </MuiCardActions>
-        )}
-      </>
+      <Box
+        sx={{
+          display: "flex",
+        }}
+      >
+        <Box>
+          {image && (
+            <ImageContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              hasMenuButtonChildren={Boolean(menuButtonChildren)}
+            >
+              {image}
+            </ImageContainer>
+          )}
+
+          {overline && <Support component="div">{overline}</Support>}
+          {title && <Heading5 component="div">{title}</Heading5>}
+          {description && (
+            <Paragraph color="textSecondary">{description}</Paragraph>
+          )}
+
+          {button && (
+            <MuiCardActions>
+              <ButtonContext.Provider value={buttonProviderValue}>
+                {button}
+              </ButtonContext.Provider>
+            </MuiCardActions>
+          )}
+        </Box>
+      </Box>
     ),
     [
       button,
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx b/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx
index 773aed4882..2e80e6407f 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx
@@ -27,7 +27,7 @@ import { DataTableProps } from "./DataTable";
 import { Trans, useTranslation } from "react-i18next";
 
 export type DataTableRowActionsProps = {
-  row: MRT_Row<MRT_RowData>;
+  row: MRT_Row<MRT_RowData> | MRT_RowData;
   rowIndex: number;
   rowActionButtons?: (
     row: MRT_RowData,
diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
index 43742f4491..6132920bc5 100644
--- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
@@ -51,7 +51,9 @@ const OdysseyCacheProvider = ({
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
-      speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
+      // TODO: Change this back!!
+      speedy: true,
+      // speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
       ...(stylisPlugins && { stylisPlugins }),
     });
   }, [emotionRoot, nonce, stylisPlugins, uniqueAlphabeticalId]);
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
new file mode 100644
index 0000000000..cbe327bf4b
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
@@ -0,0 +1,85 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback, Dispatch, SetStateAction } from "react";
+import { UniversalProps } from "./componentTypes";
+import { MenuButton } from "../../MenuButton";
+import { Button } from "../../Button";
+import { Box } from "../../Box";
+import { ChevronDownIcon } from "../../icons.generated";
+import { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
+
+export type BulkActionMenuProps = {
+  data: MRT_RowData[];
+  menuItems: UniversalProps["bulkActionMenuItems"];
+  rowSelection: MRT_RowSelectionState;
+  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
+};
+
+const BulkActionMenu = ({
+  data,
+  menuItems,
+  rowSelection,
+  setRowSelection,
+}: BulkActionMenuProps) => {
+  const selectedRowCount = Object.values(rowSelection).filter(
+    (value) => value === true,
+  ).length;
+
+  const handleSelectAll = useCallback(() => {
+    const rows = Object.fromEntries(data.map((row) => [row.id, true]));
+    setRowSelection(rows);
+  }, [data, setRowSelection]);
+
+  const handleSelectNone = useCallback(() => {
+    setRowSelection({});
+  }, [setRowSelection]);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        gap: 2,
+      }}
+    >
+      {selectedRowCount > 0 && (
+        <MenuButton
+          buttonVariant="primary"
+          endIcon={<ChevronDownIcon />}
+          buttonLabel={`${selectedRowCount} selected`}
+          ariaLabel="More actions"
+        >
+          {menuItems?.(rowSelection)}
+        </MenuButton>
+      )}
+      <Box>
+        <Button
+          variant="secondary"
+          label="Select all"
+          isDisabled={selectedRowCount === 20}
+          onClick={handleSelectAll}
+        />
+        <Button
+          variant="secondary"
+          label="Select none"
+          isDisabled={selectedRowCount === 0}
+          onClick={handleSelectNone}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+const MemoizedBulkActionMenu = memo(BulkActionMenu);
+MemoizedBulkActionMenu.displayName = "BulkActionMenu";
+
+export { MemoizedBulkActionMenu as BulkActionMenu };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
new file mode 100644
index 0000000000..395e4efc28
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
@@ -0,0 +1,93 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { DataView } from "./DataView";
+import {
+  AvailableStackLayouts,
+  StackProps,
+  UniversalProps,
+} from "./componentTypes";
+import { availableStackLayouts } from "./constants";
+
+export type DataStackProps = UniversalProps &
+  StackProps & {
+    initialLayout?: (typeof availableStackLayouts)[number];
+    availableLayouts?: AvailableStackLayouts;
+  };
+
+const DataStack = ({
+  availableLayouts,
+  getData,
+  hasRowSelection,
+  onChangeRowSelection,
+  bulkActionMenuItems,
+  hasPagination,
+  currentPage,
+  paginationType,
+  resultsPerPage,
+  totalRows,
+  hasFilters,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  isRowReorderingDisabled,
+  filters,
+  searchDelayTime,
+  errorMessage,
+  emptyPlaceholder,
+  noResultsPlaceholder,
+  isLoading,
+  isEmpty,
+  isNoResults,
+  cardProps,
+  maxGridColumns,
+  rowActionMenuItems,
+}: DataStackProps) => {
+  return (
+    <DataView
+      availableLayouts={availableLayouts}
+      getData={getData}
+      hasRowSelection={hasRowSelection}
+      onChangeRowSelection={onChangeRowSelection}
+      bulkActionMenuItems={bulkActionMenuItems}
+      hasPagination={hasPagination}
+      currentPage={currentPage}
+      paginationType={paginationType}
+      resultsPerPage={resultsPerPage}
+      totalRows={totalRows}
+      hasFilters={hasFilters}
+      hasSearch={hasSearch}
+      hasSearchSubmitButton={hasSearchSubmitButton}
+      hasRowReordering={hasRowReordering}
+      isRowReorderingDisabled={isRowReorderingDisabled}
+      filters={filters}
+      searchDelayTime={searchDelayTime}
+      errorMessage={errorMessage}
+      emptyPlaceholder={emptyPlaceholder}
+      noResultsPlaceholder={noResultsPlaceholder}
+      isLoading={isLoading}
+      isEmpty={isEmpty}
+      isNoResults={isNoResults}
+      stackOptions={{
+        cardProps,
+        maxGridColumns,
+        rowActionMenuItems,
+      }}
+    />
+  );
+};
+
+const MemoizedDataStack = memo(DataStack);
+MemoizedDataStack.displayName = "DataStack";
+
+export { MemoizedDataStack as DataStack };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
new file mode 100644
index 0000000000..05c2b65015
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
@@ -0,0 +1,95 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { DataView } from "./DataView";
+import { TableProps, UniversalProps } from "./componentTypes";
+
+export type DataTableProps = UniversalProps & TableProps;
+
+const DataTable = ({
+  getData,
+  hasRowSelection,
+  onChangeRowSelection,
+  bulkActionMenuItems,
+  hasPagination,
+  currentPage,
+  paginationType,
+  resultsPerPage,
+  totalRows,
+  hasFilters,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  isRowReorderingDisabled,
+  filters,
+  searchDelayTime,
+  errorMessage,
+  emptyPlaceholder,
+  noResultsPlaceholder,
+  isLoading,
+  isEmpty,
+  isNoResults,
+  columns,
+  initialDensity,
+  hasChangeableDensity,
+  hasColumnResizing,
+  hasColumnVisibility,
+  renderDetailPanel,
+  rowActionButtons,
+  rowActionMenuItems,
+  hasSorting,
+}: DataTableProps) => {
+  return (
+    <DataView
+      availableLayouts={["table"]}
+      getData={getData}
+      hasRowSelection={hasRowSelection}
+      onChangeRowSelection={onChangeRowSelection}
+      bulkActionMenuItems={bulkActionMenuItems}
+      hasPagination={hasPagination}
+      currentPage={currentPage}
+      paginationType={paginationType}
+      resultsPerPage={resultsPerPage}
+      totalRows={totalRows}
+      hasFilters={hasFilters}
+      hasSearch={hasSearch}
+      hasSearchSubmitButton={hasSearchSubmitButton}
+      hasRowReordering={hasRowReordering}
+      isRowReorderingDisabled={isRowReorderingDisabled}
+      filters={filters}
+      searchDelayTime={searchDelayTime}
+      errorMessage={errorMessage}
+      emptyPlaceholder={emptyPlaceholder}
+      noResultsPlaceholder={noResultsPlaceholder}
+      isLoading={isLoading}
+      isEmpty={isEmpty}
+      isNoResults={isNoResults}
+      tableOptions={{
+        columns,
+        initialDensity,
+        hasChangeableDensity,
+        hasColumnResizing,
+        hasColumnVisibility,
+        renderDetailPanel,
+        rowActionButtons,
+        rowActionMenuItems,
+        hasSorting,
+      }}
+    />
+  );
+};
+
+const MemoizedDataTable = memo(DataTable);
+MemoizedDataTable.displayName = "DataTable";
+
+export { MemoizedDataTable as DataTable };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
new file mode 100644
index 0000000000..2d365ae245
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
@@ -0,0 +1,388 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useEffect, useMemo, useState } from "react";
+import {
+  Layout,
+  UniversalProps,
+  ViewProps,
+  TableState,
+} from "./componentTypes";
+import {
+  availableLayouts as allAvailableLayouts,
+  densityValues,
+} from "./constants";
+import { Box } from "../../Box";
+import { DataFilter, DataFilters } from "../DataFilters";
+import { useFilterConversion } from "./useFilterConversion";
+import { BulkActionMenu } from "./BulkActionsMenu";
+import { LayoutSwitcher } from "./LayoutSwitcher";
+import { TableSettings } from "./TableSettings";
+import { Callout } from "../../Callout";
+import { Pagination, usePagination } from "../../Pagination";
+import { t } from "i18next";
+import { fetchData } from "./fetchData";
+import { TableContent } from "./TableContent";
+import { StackContent } from "./StackContent";
+import { useRowReordering } from "../../DataTable/useRowReordering";
+import { EmptyState } from "../../EmptyState";
+import {
+  MRT_Row,
+  MRT_RowData,
+  MRT_RowSelectionState,
+} from "material-react-table";
+
+export type DataViewProps = UniversalProps & ViewProps<Layout>;
+
+const DataView = ({
+  getData: getDataFn,
+  getRowId: getRowIdProp,
+  availableLayouts = allAvailableLayouts,
+  initialLayout,
+  hasSearch,
+  hasFilters,
+  hasSearchSubmitButton,
+  searchDelayTime,
+  bulkActionMenuItems,
+  hasPagination,
+  paginationType = "paged",
+  resultsPerPage = 20,
+  currentPage = 1,
+  totalRows,
+  errorMessage: errorMessageProp,
+  hasRowReordering,
+  isRowReorderingDisabled,
+  onReorderRows,
+  emptyPlaceholder,
+  noResultsPlaceholder,
+  tableOptions,
+  stackOptions,
+  hasRowSelection,
+  onChangeRowSelection,
+  isEmpty: isEmptyProp,
+  isLoading: isLoadingProp,
+  isNoResults: isNoResultsProp,
+}: DataViewProps) => {
+  const [currentLayout, setCurrentLayout] = useState<Layout>(
+    initialLayout ?? availableLayouts[0],
+  );
+
+  const [data, setData] = useState<MRT_RowData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(isLoadingProp ?? true);
+  const [isEmpty, setIsEmpty] = useState<boolean>(isEmptyProp ?? true);
+  const [isNoResults, setIsNoResults] = useState<boolean>(
+    isNoResultsProp ?? false,
+  );
+  const [errorMessage, setErrorMessage] =
+    useState<UniversalProps["errorMessage"]>(errorMessageProp);
+
+  const [search, setSearch] = useState<string>("");
+  const [initialFilters, setInitialFilters] = useState<DataFilter[]>();
+  const [filters, setFilters] = useState<DataFilter[]>();
+
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();
+
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+
+  useEffect(() => {
+    onChangeRowSelection?.(rowSelection);
+  }, [rowSelection, onChangeRowSelection]);
+
+  const [pagination, setPagination] = useState({
+    pageIndex: currentPage,
+    pageSize: resultsPerPage,
+  });
+
+  const [tableState, setTableState] = useState<TableState>({
+    rowDensity: tableOptions?.initialDensity ?? densityValues[0],
+    columnSorting: [],
+    columnVisibility: {},
+  });
+
+  const hasMultipleAvailableLayouts = useMemo(
+    () => typeof availableLayouts !== "string" && availableLayouts.length > 1,
+    [availableLayouts],
+  );
+
+  const shouldShowFilters = useMemo(
+    () => hasSearch || hasFilters,
+    [hasSearch, hasFilters],
+  );
+
+  const availableFilters = useFilterConversion({
+    filters: filters,
+    columns: tableOptions?.columns,
+  });
+
+  const dataQueryParams = useMemo(
+    () => ({
+      page: pagination.pageIndex,
+      resultsPerPage: pagination.pageSize,
+      search,
+      filters,
+      sort: tableState?.columnSorting,
+    }),
+    [pagination, search, filters, tableState?.columnSorting],
+  );
+
+  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;
+
+  // Set initial filters
+  useEffect(() => {
+    if (!initialFilters && filters) {
+      setInitialFilters(filters);
+    }
+  }, [filters, initialFilters]);
+
+  // Update pagination state if props change
+  useEffect(() => {
+    setPagination({
+      pageIndex: currentPage,
+      pageSize: resultsPerPage,
+    });
+  }, [currentPage, resultsPerPage]);
+
+  // Retrieve the data
+  useEffect(() => {
+    fetchData({
+      getDataFn,
+      setIsLoading,
+      setErrorMessage,
+      errorMessageProp,
+      setData,
+      dataQueryParams,
+    });
+  }, [dataQueryParams, errorMessageProp, getDataFn]);
+
+  // When data is updated
+  useEffect(() => {
+    setIsEmpty(
+      pagination.pageIndex === currentPage &&
+        pagination.pageSize === resultsPerPage &&
+        search === "" &&
+        filters === initialFilters &&
+        data.length === 0,
+    );
+  }, [
+    currentPage,
+    data,
+    filters,
+    initialFilters,
+    pagination,
+    resultsPerPage,
+    search,
+  ]);
+
+  // Change loading, empty and noResults state on prop change
+  useEffect(() => {
+    setIsLoading((prevValue) => isLoadingProp ?? prevValue);
+  }, [isLoadingProp]);
+
+  useEffect(() => {
+    setIsEmpty((prevValue) => isEmptyProp ?? prevValue);
+  }, [isEmptyProp]);
+
+  useEffect(() => {
+    setIsNoResults((prevValue) => isNoResultsProp ?? prevValue);
+  }, [isNoResultsProp]);
+
+  const emptyState = useMemo(() => {
+    const noResultsInnerContent = noResultsPlaceholder || (
+      <EmptyState
+        heading={t("table.noresults.heading")}
+        description={t("table.noresults.text")}
+      />
+    );
+
+    if (isEmpty) {
+      return emptyPlaceholder || noResultsInnerContent;
+    }
+
+    if (isNoResults) {
+      return noResultsInnerContent;
+    }
+
+    return;
+  }, [emptyPlaceholder, noResultsPlaceholder, isEmpty, isNoResults]);
+
+  const additionalActions = useMemo(
+    () => (
+      <>
+        {currentLayout === "table" && tableOptions && (
+          <TableSettings
+            tableOptions={tableOptions}
+            tableState={tableState}
+            setTableState={setTableState}
+          />
+        )}
+
+        {hasMultipleAvailableLayouts && (
+          <LayoutSwitcher
+            currentLayout={currentLayout}
+            availableLayouts={availableLayouts}
+            setCurrentLayout={setCurrentLayout}
+          />
+        )}
+      </>
+    ),
+    [
+      currentLayout,
+      tableOptions,
+      tableState,
+      hasMultipleAvailableLayouts,
+      availableLayouts,
+    ],
+  );
+
+  const { lastRow: lastRowOnPage } = usePagination({
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    totalRows,
+  });
+
+  const rowReorderingUtilities = useRowReordering({
+    totalRows,
+    onReorderRows,
+    data,
+    setData,
+    draggingRow,
+    setDraggingRow,
+    resultsPerPage: pagination.pageSize,
+    page: pagination.pageIndex,
+  });
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+      }}
+    >
+      {errorMessage && (
+        <Box>
+          <Callout severity="error" text={errorMessage} />
+        </Box>
+      )}
+
+      {shouldShowFilters && (
+        <DataFilters
+          onChangeSearch={hasSearch ? setSearch : undefined}
+          onChangeFilters={hasFilters ? setFilters : undefined}
+          hasSearchSubmitButton={hasSearchSubmitButton}
+          searchDelayTime={searchDelayTime}
+          filters={hasFilters ? availableFilters : undefined}
+          isDisabled={isEmpty}
+          additionalActions={additionalActions}
+        />
+      )}
+
+      {(bulkActionMenuItems || hasRowSelection) && (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+          }}
+        >
+          <BulkActionMenu
+            data={data}
+            menuItems={bulkActionMenuItems}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+          />
+          {!shouldShowFilters && additionalActions}
+        </Box>
+      )}
+
+      {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "flex-end",
+          }}
+        >
+          {additionalActions}
+        </Box>
+      )}
+
+      {currentLayout === "table" && tableOptions && (
+        <TableContent
+          data={data}
+          columns={tableOptions.columns}
+          getRowId={getRowId}
+          tableState={tableState}
+          setTableState={setTableState}
+          tableOptions={tableOptions}
+          isLoading={isLoading}
+          isEmpty={isEmpty}
+          isNoResults={isNoResults}
+          hasRowReordering={hasRowReordering}
+          isRowReorderingDisabled={isRowReorderingDisabled}
+          onReorderRows={onReorderRows}
+          rowReorderingUtilities={rowReorderingUtilities}
+          hasRowSelection={hasRowSelection}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          emptyState={emptyState}
+          pagination={pagination}
+          totalRows={totalRows}
+          draggingRow={draggingRow}
+        />
+      )}
+      {(currentLayout === "list" || currentLayout === "grid") &&
+        stackOptions && (
+          <StackContent
+            currentLayout={currentLayout}
+            data={data}
+            getRowId={getRowId}
+            stackOptions={stackOptions}
+            isLoading={isLoading}
+            isEmpty={isEmpty}
+            isNoResults={isNoResults}
+            hasRowReordering={hasRowReordering}
+            isRowReorderingDisabled={isRowReorderingDisabled}
+            onReorderRows={onReorderRows}
+            rowReorderingUtilities={rowReorderingUtilities}
+            hasRowSelection={hasRowSelection}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            emptyState={emptyState}
+            pagination={pagination}
+            totalRows={totalRows}
+            draggingRow={draggingRow}
+          />
+        )}
+
+      {hasPagination && (
+        <Pagination
+          pageIndex={pagination.pageIndex}
+          pageSize={pagination.pageSize}
+          onPaginationChange={setPagination}
+          lastRow={lastRowOnPage}
+          totalRows={totalRows}
+          isDisabled={isEmpty}
+          variant={paginationType}
+          rowsPerPageLabel={t("pagination.rowsperpage")}
+          currentPageLabel={t("pagination.page")}
+          previousLabel={t("pagination.previous")}
+          nextLabel={t("pagination.next")}
+          loadMoreLabel={t("pagination.loadmore")}
+        />
+      )}
+    </Box>
+  );
+};
+
+const MemoizedDataView = memo(DataView);
+MemoizedDataView.displayName = "DataView";
+
+export { MemoizedDataView as DataView };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
new file mode 100644
index 0000000000..83c0594a37
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
@@ -0,0 +1,65 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Dispatch, memo, useCallback, SetStateAction } from "react";
+import { AvailableLayouts, Layout } from "./componentTypes";
+import { MenuButton } from "../../MenuButton";
+import { MenuItem } from "../../MenuItem";
+
+export type LayoutSwitcherProps = {
+  currentLayout: Layout;
+  availableLayouts: AvailableLayouts;
+  setCurrentLayout: Dispatch<SetStateAction<Layout>>;
+};
+
+const LayoutSwitcher = ({
+  currentLayout,
+  availableLayouts,
+  setCurrentLayout,
+}: LayoutSwitcherProps) => {
+  const changeLayout = useCallback(
+    (value: Layout) => (_event: React.MouseEvent<HTMLLIElement>) => {
+      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
+      if (process.env.NODE_ENV === "development") console.debug(_event);
+
+      setCurrentLayout(value);
+    },
+    [],
+  );
+
+  return (
+    <MenuButton
+      buttonLabel={`${currentLayout.charAt(0).toUpperCase()}${currentLayout.slice(1)}`}
+      ariaLabel="Layout"
+      menuAlignment="right"
+      shouldCloseOnSelect={false}
+    >
+      <>
+        {typeof availableLayouts !== "string" &&
+          availableLayouts.map((value: Layout) => (
+            <MenuItem
+              key={value}
+              isSelected={currentLayout === value}
+              onClick={changeLayout(value)}
+            >
+              {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
+            </MenuItem>
+          ))}
+      </>
+    </MenuButton>
+  );
+};
+
+const MemoizedLayoutSwitcher = memo(LayoutSwitcher);
+MemoizedLayoutSwitcher.displayName = "LayoutSwitcher";
+
+export { MemoizedLayoutSwitcher as LayoutSwitcher };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
new file mode 100644
index 0000000000..4ff23209e0
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
@@ -0,0 +1,119 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { MRT_Row, MRT_RowData } from "material-react-table";
+import { Fragment, ReactElement, memo, useCallback } from "react";
+import { Button } from "../../Button";
+import { MenuItem } from "../../MenuItem";
+import { MenuButtonProps } from "../../MenuButton";
+import {
+  ArrowBottomIcon,
+  ArrowDownIcon,
+  ArrowTopIcon,
+  ArrowUpIcon,
+} from "../../icons.generated";
+import { DataTableProps } from "./DataTable";
+import { Trans } from "react-i18next";
+
+export type RowActionsProps = {
+  row: MRT_Row<MRT_RowData> | MRT_RowData;
+  rowIndex: number;
+  rowActionButtons?: (
+    row: MRT_RowData,
+  ) => ReactElement<typeof Button | typeof Fragment>;
+  rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps["children"];
+  isRowReorderingDisabled?: boolean;
+  totalRows?: DataTableProps["totalRows"];
+  updateRowOrder?: ({
+    rowId,
+    newRowIndex,
+  }: {
+    rowId: string;
+    newRowIndex: number;
+  }) => void;
+};
+
+const RowActions = ({
+  row,
+  rowIndex,
+  rowActionMenuItems,
+  isRowReorderingDisabled,
+  totalRows,
+  updateRowOrder,
+}: RowActionsProps) => {
+  const handleToFrontClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({ rowId: row.id, newRowIndex: 0 });
+  }, [row.id, updateRowOrder]);
+
+  const handleForwardClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({ rowId: row.id, newRowIndex: Math.max(0, rowIndex - 1) });
+  }, [row.id, rowIndex, updateRowOrder]);
+
+  const handleBackwardClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({ rowId: row.id, newRowIndex: rowIndex + 1 });
+  }, [row.id, rowIndex, updateRowOrder]);
+
+  const handleToBackClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({
+        rowId: row.id,
+        newRowIndex: totalRows ? totalRows - 1 : rowIndex,
+      });
+  }, [row.id, rowIndex, totalRows, updateRowOrder]);
+
+  return (
+    <>
+      {rowActionMenuItems && <>{rowActionMenuItems(row)}</>}
+      {rowActionMenuItems && updateRowOrder && <hr />}
+      {updateRowOrder && (
+        <>
+          <MenuItem
+            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}
+            onClick={handleToFrontClick}
+          >
+            <ArrowTopIcon /> <Trans i18nKey="table.reorder.tofront" />
+          </MenuItem>
+          <MenuItem
+            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}
+            onClick={handleForwardClick}
+          >
+            <ArrowUpIcon /> <Trans i18nKey="table.reorder.forward" />
+          </MenuItem>
+          <MenuItem
+            isDisabled={
+              (totalRows ? rowIndex >= totalRows - 1 : false) ||
+              isRowReorderingDisabled
+            }
+            onClick={handleBackwardClick}
+          >
+            <ArrowDownIcon /> <Trans i18nKey="table.reorder.backward" />
+          </MenuItem>
+          {totalRows && (
+            <MenuItem
+              isDisabled={rowIndex >= totalRows - 1 || isRowReorderingDisabled}
+              onClick={handleToBackClick}
+            >
+              <ArrowBottomIcon /> <Trans i18nKey="table.reorder.toback" />
+            </MenuItem>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+const MemoizedRowActions = memo(RowActions);
+MemoizedRowActions.displayName = "RowActions";
+
+export { MemoizedRowActions as RowActions };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
new file mode 100644
index 0000000000..919a2f44de
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -0,0 +1,194 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  MouseEventHandler,
+  ReactElement,
+  memo,
+  useMemo,
+  ReactNode,
+} from "react";
+import {
+  Card as MuiCard,
+  CardActions as MuiCardActions,
+  CardActionArea as MuiCardActionArea,
+} from "@mui/material";
+import styled from "@emotion/styled";
+
+import { Button } from "../../Button";
+import { ButtonContext } from "../../ButtonContext";
+import { MoreIcon } from "../../icons.generated";
+import { MenuButton, MenuButtonProps } from "../../MenuButton";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { Heading5, Paragraph, Support } from "../../Typography";
+import { Box } from "../../Box";
+
+export const CARD_IMAGE_HEIGHT = "64px";
+
+export type StackCardProps = {
+  description?: string;
+  image?: ReactElement;
+  overline?: string;
+  title?: string;
+  children?: ReactNode;
+} & (
+  | {
+      onClick: MouseEventHandler;
+      button?: never;
+      menuButtonChildren?: never;
+      Accessory?: never;
+    }
+  | {
+      onClick?: never;
+      button?: ReactElement<typeof Button>;
+      menuButtonChildren?: MenuButtonProps["children"];
+      Accessory?: ReactNode;
+    }
+);
+
+const ImageContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  hasMenuButtonChildren: boolean;
+}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  maxHeight: `${CARD_IMAGE_HEIGHT}`,
+  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,
+}));
+
+const MenuButtonContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: odysseyDesignTokens.Spacing3,
+}));
+
+const buttonProviderValue = { isFullWidth: true };
+
+const StackCard = ({
+  button,
+  description,
+  image,
+  menuButtonChildren,
+  onClick,
+  overline,
+  title,
+  children,
+  Accessory,
+}: StackCardProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const cardContent = useMemo(
+    () => (
+      <Box
+        sx={{
+          display: "flex",
+        }}
+      >
+        {Accessory && (
+          <Box
+            sx={{
+              marginInlineEnd: 3,
+              marginInlineStart: -2,
+            }}
+          >
+            {Accessory}
+          </Box>
+        )}
+        <Box>
+          {image && (
+            <ImageContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              hasMenuButtonChildren={Boolean(menuButtonChildren)}
+            >
+              {image}
+            </ImageContainer>
+          )}
+
+          {overline && <Support component="div">{overline}</Support>}
+          {title && <Heading5 component="div">{title}</Heading5>}
+          {description && (
+            <Paragraph color="textSecondary">{description}</Paragraph>
+          )}
+
+          {button && (
+            <MuiCardActions>
+              <ButtonContext.Provider value={buttonProviderValue}>
+                {button}
+              </ButtonContext.Provider>
+            </MuiCardActions>
+          )}
+
+          {children && (
+            <Box
+              sx={{
+                ["&:not(:first-child)"]: {
+                  marginBlockStart: 3,
+                },
+              }}
+            >
+              {children}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    ),
+    [
+      button,
+      description,
+      image,
+      menuButtonChildren,
+      overline,
+      title,
+      odysseyDesignTokens,
+      children,
+    ],
+  );
+
+  return (
+    <MuiCard className={onClick ? "isClickable" : ""}>
+      {onClick ? (
+        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
+      ) : (
+        cardContent
+      )}
+
+      {menuButtonChildren && (
+        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>
+          <MenuButton
+            endIcon={<MoreIcon />}
+            ariaLabel="Card menu"
+            buttonVariant="floating"
+            menuAlignment="right"
+            size="small"
+            tooltipText="Actions"
+          >
+            {menuButtonChildren}
+          </MenuButton>
+        </MenuButtonContainer>
+      )}
+    </MuiCard>
+  );
+};
+
+const MemoizedStackCard = memo(StackCard);
+MemoizedStackCard.displayName = "StackCard";
+
+export { MemoizedStackCard as StackCard };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
new file mode 100644
index 0000000000..21c2c41160
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -0,0 +1,238 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Dispatch, ReactNode, SetStateAction, memo, useCallback } from "react";
+import { StackLayout, StackProps, UniversalProps } from "./componentTypes";
+import { Box } from "../../Box";
+import styled, { CSSObject } from "@emotion/styled";
+import {
+  MRT_Row,
+  MRT_RowData,
+  MRT_RowSelectionState,
+  MRT_TableInstance,
+} from "material-react-table";
+import { CircularProgress } from "../../CircularProgress";
+import { Checkbox as MuiCheckbox } from "@mui/material";
+import { RowActions } from "./RowActions";
+import { StackCard } from "./StackCard";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+
+export type StackContentProps = {
+  currentLayout: StackLayout;
+  data: MRT_RowData[];
+  getRowId: UniversalProps["getRowId"];
+  stackOptions: StackProps;
+  isLoading: boolean;
+  isEmpty?: boolean;
+  isNoResults?: boolean;
+  hasRowReordering: UniversalProps["hasRowReordering"];
+  isRowReorderingDisabled?: boolean;
+  onReorderRows: UniversalProps["onReorderRows"];
+  totalRows: UniversalProps["totalRows"];
+  rowReorderingUtilities: {
+    dragHandleStyles: CSSObject;
+    dragHandleText: {
+      title: string;
+      "aria-label": string;
+    };
+    draggableTableBodyRowClassName: ({
+      currentRowId,
+      draggingRowId,
+      hoveredRowId,
+    }: {
+      currentRowId: string;
+      draggingRowId?: string;
+      hoveredRowId?: string;
+    }) => string | undefined;
+    handleDragHandleKeyDown: ({
+      table,
+      row,
+      event,
+    }: {
+      table: MRT_TableInstance<MRT_RowData>;
+      row: MRT_Row<MRT_RowData>;
+      event: React.KeyboardEvent<HTMLButtonElement>;
+    }) => void;
+    handleDragHandleOnDragCapture: (
+      table: MRT_TableInstance<MRT_RowData>,
+    ) => void;
+    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;
+    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;
+    updateRowOrder: ({
+      rowId,
+      newRowIndex,
+    }: {
+      rowId: string;
+      newRowIndex: number;
+    }) => void;
+  };
+  hasRowSelection: UniversalProps["hasRowSelection"];
+  rowSelection: MRT_RowSelectionState;
+  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
+  emptyState: ReactNode;
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  draggingRow?: MRT_Row<MRT_RowData> | null;
+};
+
+const StackContent = ({
+  currentLayout,
+  data,
+  stackOptions,
+  isLoading,
+  isEmpty,
+  isNoResults,
+  hasRowReordering,
+  isRowReorderingDisabled,
+  onReorderRows,
+  rowReorderingUtilities,
+  hasRowSelection,
+  rowSelection,
+  setRowSelection,
+  emptyState,
+  pagination,
+  totalRows,
+}: StackContentProps) => {
+  const handleRowSelectionChange = useCallback(
+    (row: MRT_RowData) => {
+      setRowSelection((prev) => {
+        const newSelection = { ...prev };
+        if (newSelection[row.id]) {
+          delete newSelection[row.id];
+        } else {
+          newSelection[row.id] = true;
+        }
+        return newSelection;
+      });
+    },
+    [setRowSelection],
+  );
+
+  const { updateRowOrder } = rowReorderingUtilities;
+
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const StackContainer = styled("div", {
+    shouldForwardProp: (prop) =>
+      prop !== "odysseyDesignTokens" &&
+      prop !== "currentLayout" &&
+      prop !== "maxGridColumns",
+  })<{
+    odysseyDesignTokens: DesignTokens;
+    currentLayout: StackLayout;
+    maxGridColumns: number;
+  }>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({
+    display: currentLayout === "stack" ? "flex" : "grid",
+    flexDirection: currentLayout === "stack" ? "column" : undefined,
+    gap: odysseyDesignTokens.Spacing5,
+    [`@media (max-width: 720px)`]: {
+      gridTemplateColumns:
+        currentLayout === "grid" ? "repeat(1, 1fr)" : undefined,
+    },
+    [`@media (min-width: 720px) and (max-width: 960px)`]: {
+      gridTemplateColumns:
+        currentLayout === "grid" ? "repeat(2, 1fr)" : undefined,
+    },
+    [`@media (min-width: 960px)`]: {
+      gridTemplateColumns:
+        currentLayout === "grid" ? `repeat(${maxGridColumns}, 1fr)` : undefined,
+    },
+  }));
+
+  const LoadingContainer = styled("div", {
+    shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  })<{
+    odysseyDesignTokens: DesignTokens;
+  }>(({ odysseyDesignTokens }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    paddingBlock: odysseyDesignTokens.Spacing5,
+  }));
+
+  return (
+    <StackContainer
+      odysseyDesignTokens={odysseyDesignTokens}
+      currentLayout={currentLayout}
+      maxGridColumns={stackOptions.maxGridColumns ?? 3}
+    >
+      {isLoading ? (
+        <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>
+          <CircularProgress />
+        </LoadingContainer>
+      ) : (
+        <>
+          {!data || data.length === 0 || isEmpty || isNoResults ? (
+            <Box>{emptyState}</Box>
+          ) : (
+            <>
+              {data.map((row: MRT_RowData, index: number) => {
+                const { overline, title, description, image, children } =
+                  stackOptions.cardProps(row);
+                const currentIndex =
+                  index + (pagination.pageIndex - 1) * pagination.pageSize;
+
+                return (
+                  <StackCard
+                    overline={overline}
+                    title={title}
+                    description={description}
+                    image={image}
+                    children={children}
+                    Accessory={
+                      hasRowSelection && (
+                        <Box sx={{ marginBlockStart: -1 }}>
+                          <MuiCheckbox
+                            checked={rowSelection[row.id] ?? false}
+                            onChange={() => handleRowSelectionChange(row)}
+                          />
+                        </Box>
+                      )
+                    }
+                    key={row.id}
+                    menuButtonChildren={
+                      (stackOptions.rowActionMenuItems || hasRowReordering) && (
+                        <RowActions
+                          row={row}
+                          rowIndex={currentIndex}
+                          rowActionMenuItems={stackOptions.rowActionMenuItems}
+                          isRowReorderingDisabled={isRowReorderingDisabled}
+                          totalRows={totalRows}
+                          updateRowOrder={
+                            hasRowReordering && onReorderRows
+                              ? updateRowOrder
+                              : undefined
+                          }
+                        />
+                      )
+                    }
+                  />
+                );
+              })}
+            </>
+          )}
+        </>
+      )}
+    </StackContainer>
+  );
+};
+
+const MemoizedStackContent = memo(StackContent);
+MemoizedStackContent.displayName = "StackContent";
+
+export { MemoizedStackContent as StackContent };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
new file mode 100644
index 0000000000..a52cd77c89
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -0,0 +1,361 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  MRT_Row,
+  MRT_RowData,
+  MRT_RowSelectionState,
+  MRT_TableContainer,
+  MRT_TableInstance,
+  MRT_TableOptions,
+  useMaterialReactTable,
+} from "material-react-table";
+import {
+  SetStateAction,
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  ReactNode,
+  Dispatch,
+} from "react";
+import { TableProps, TableState, UniversalProps } from "./componentTypes";
+import { DataTableCell } from "./dataTypes";
+import {
+  ArrowDownIcon,
+  ArrowUnsortedIcon,
+  ChevronDownIcon,
+  DragIndicatorIcon,
+} from "../../icons.generated";
+import {
+  dataTableImmutableSettings,
+  displayColumnDefOptions,
+  ScrollableTableContainer,
+} from "./tableConstants";
+import { useScrollIndication } from "../../DataTable/useScrollIndication";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+import { Box } from "../../Box";
+import { CSSObject } from "@emotion/styled";
+import { RowActions } from "./RowActions";
+import { MenuButton } from "../../MenuButton";
+import { MoreIcon } from "../../icons.generated";
+import { useTranslation } from "react-i18next";
+
+export type TableContentProps = {
+  data: MRT_RowData[];
+  columns: TableProps["columns"];
+  getRowId: UniversalProps["getRowId"];
+  tableState: TableState;
+  setTableState: Dispatch<SetStateAction<TableState>>;
+  tableOptions: TableProps;
+  isLoading: boolean;
+  isEmpty?: boolean;
+  isNoResults?: boolean;
+  hasRowReordering: UniversalProps["hasRowReordering"];
+  isRowReorderingDisabled?: boolean;
+  onReorderRows: UniversalProps["onReorderRows"];
+  totalRows: UniversalProps["totalRows"];
+  rowReorderingUtilities: {
+    dragHandleStyles: CSSObject;
+    dragHandleText: {
+      title: string;
+      "aria-label": string;
+    };
+    draggableTableBodyRowClassName: ({
+      currentRowId,
+      draggingRowId,
+      hoveredRowId,
+    }: {
+      currentRowId: string;
+      draggingRowId?: string;
+      hoveredRowId?: string;
+    }) => string | undefined;
+    handleDragHandleKeyDown: ({
+      table,
+      row,
+      event,
+    }: {
+      table: MRT_TableInstance<MRT_RowData>;
+      row: MRT_Row<MRT_RowData>;
+      event: React.KeyboardEvent<HTMLButtonElement>;
+    }) => void;
+    handleDragHandleOnDragCapture: (
+      table: MRT_TableInstance<MRT_RowData>,
+    ) => void;
+    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;
+    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;
+    updateRowOrder: ({
+      rowId,
+      newRowIndex,
+    }: {
+      rowId: string;
+      newRowIndex: number;
+    }) => void;
+  };
+  hasRowSelection: UniversalProps["hasRowSelection"];
+  rowSelection: MRT_RowSelectionState;
+  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
+  emptyState: ReactNode;
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  draggingRow?: MRT_Row<MRT_RowData> | null;
+};
+
+const TableContent = ({
+  data,
+  columns,
+  getRowId,
+  tableOptions,
+  tableState,
+  setTableState,
+  isLoading,
+  isEmpty,
+  isNoResults,
+  hasRowReordering,
+  isRowReorderingDisabled,
+  onReorderRows,
+  rowReorderingUtilities,
+  hasRowSelection,
+  rowSelection,
+  setRowSelection,
+  emptyState,
+  pagination,
+  totalRows,
+  draggingRow,
+}: TableContentProps) => {
+  const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =
+    useState(true);
+  const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =
+    useState(true);
+  const [tableInnerContainerWidth, setTableInnerContainerWidth] =
+    useState<string>("100%");
+  const tableOuterContainerRef = useRef<HTMLDivElement>(null);
+  const tableInnerContainerRef = useRef<HTMLDivElement>(null);
+  const tableContentRef = useRef<HTMLTableElement>(null);
+
+  useScrollIndication({
+    tableOuterContainer: tableOuterContainerRef.current,
+    tableInnerContainer: tableInnerContainerRef.current,
+    setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,
+    setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,
+    setTableInnerContainerWidth: setTableInnerContainerWidth,
+  });
+
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  const columnIds = useMemo(() => {
+    return columns.map((column) => column.accessorKey) ?? [];
+  }, [columns]);
+
+  const columnOrder = useMemo(
+    () => [
+      "mrt-row-drag",
+      "mrt-row-select",
+      "mrt-row-expand",
+      ...columnIds,
+      "mrt-row-actions",
+    ],
+    [columnIds],
+  ) as string[];
+
+  const rowDensityClassName = useMemo(() => {
+    return tableState.rowDensity === "spacious"
+      ? "MuiTableBody-spacious"
+      : tableState.rowDensity === "compact"
+        ? "MuiTableBody-compact"
+        : "MuiTableBody-default";
+  }, [tableState]);
+
+  const defaultCell = useCallback(
+    ({ cell }: { cell: DataTableCell<MRT_RowData> }) => {
+      const value = cell.getValue<string>();
+      const hasTextWrapping = cell.column.columnDef.hasTextWrapping;
+
+      return hasTextWrapping ? (
+        value
+      ) : (
+        <Box
+          sx={{
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+          }}
+        >
+          {value}
+        </Box>
+      );
+    },
+    [],
+  );
+
+  const {
+    dragHandleStyles,
+    dragHandleText,
+    draggableTableBodyRowClassName,
+    handleDragHandleKeyDown,
+    handleDragHandleOnDragCapture,
+    handleDragHandleOnDragEnd,
+    resetDraggingAndHoveredRow,
+    updateRowOrder,
+  } = rowReorderingUtilities;
+
+  const renderRowActions = useCallback(
+    ({ row }: { row: MRT_Row<MRT_RowData> }) => {
+      const currentIndex =
+        row.index + (pagination.pageIndex - 1) * pagination.pageSize;
+      return (
+        <Box sx={{ display: "flex" }}>
+          {tableOptions.rowActionButtons?.(row)}
+          {(tableOptions.rowActionMenuItems || hasRowReordering) && (
+            <MenuButton
+              endIcon={<MoreIcon />}
+              size="small"
+              buttonVariant="floating"
+              ariaLabel={t("table.moreactions.arialabel")}
+              menuAlignment="right"
+            >
+              <RowActions
+                row={row}
+                rowIndex={currentIndex}
+                rowActionMenuItems={tableOptions.rowActionMenuItems}
+                isRowReorderingDisabled={isRowReorderingDisabled}
+                totalRows={totalRows}
+                updateRowOrder={
+                  hasRowReordering && onReorderRows ? updateRowOrder : undefined
+                }
+              />
+            </MenuButton>
+          )}
+        </Box>
+      );
+    },
+    [
+      pagination.pageIndex,
+      pagination.pageSize,
+      tableOptions,
+      hasRowReordering,
+      t,
+      isRowReorderingDisabled,
+      totalRows,
+      onReorderRows,
+      updateRowOrder,
+    ],
+  );
+
+  const emptyStateContainer = useCallback(
+    () => <Box sx={{ width: tableInnerContainerWidth }}>{emptyState}</Box>,
+    [tableInnerContainerWidth, emptyState],
+  );
+
+  const dataTable = useMaterialReactTable({
+    data: !isEmpty && !isNoResults ? data : [],
+    columns,
+    getRowId,
+    state: {
+      sorting: tableState.columnSorting,
+      columnVisibility: tableState.columnVisibility,
+      isLoading: isLoading,
+      rowSelection: rowSelection,
+      columnOrder: columnOrder,
+    },
+    icons: {
+      ArrowDownwardIcon: ArrowDownIcon,
+      DragHandleIcon: DragIndicatorIcon,
+      SyncAltIcon: ArrowUnsortedIcon,
+      ExpandMoreIcon: ChevronDownIcon,
+    },
+    ...dataTableImmutableSettings,
+    displayColumnDefOptions:
+      displayColumnDefOptions as MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"],
+    muiTableProps: {
+      ref: tableContentRef,
+    },
+    muiTableContainerProps: {
+      ref: tableInnerContainerRef,
+    },
+    muiTableBodyProps: () => ({
+      className: rowDensityClassName,
+    }),
+    enableColumnResizing: tableOptions.hasColumnResizing,
+    defaultColumn: {
+      Cell: defaultCell,
+    },
+    enableRowActions:
+      (hasRowReordering === true && onReorderRows) ||
+      tableOptions.rowActionButtons ||
+      tableOptions.rowActionMenuItems
+        ? true
+        : false,
+    renderRowActions: ({ row }) => renderRowActions({ row }),
+    enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
+    enableRowDragging: hasRowReordering && Boolean(onReorderRows),
+    muiTableBodyRowProps: ({ table, row }) => ({
+      className: draggableTableBodyRowClassName({
+        currentRowId: row.id,
+        draggingRowId: draggingRow?.id,
+        hoveredRowId: table.getState().hoveredRow?.id,
+      }),
+    }),
+    muiRowDragHandleProps: ({ table, row }) => ({
+      onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),
+      onBlur: () => resetDraggingAndHoveredRow(table),
+      onDragEnd: () => handleDragHandleOnDragEnd(table),
+      onDragCapture: () => handleDragHandleOnDragCapture(table),
+      disabled: isRowReorderingDisabled,
+      sx: dragHandleStyles,
+      ...dragHandleText,
+    }),
+    renderDetailPanel: tableOptions.renderDetailPanel,
+    enableRowVirtualization: data.length >= 50,
+    muiTableHeadCellProps: ({ column: currentColumn }) => ({
+      className: tableState.columnSorting.find(
+        (sortedColumn) => sortedColumn.id === currentColumn.id,
+      )
+        ? "isSorted"
+        : "isUnsorted",
+    }),
+    enableSorting: tableOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
+    onSortingChange: (sortingUpdater) => {
+      const newSortVal =
+        typeof sortingUpdater === "function"
+          ? sortingUpdater(tableState.columnSorting)
+          : tableState.columnSorting;
+      setTableState((prevState) => ({
+        ...prevState,
+        columnSorting: newSortVal,
+      }));
+    },
+    enableRowSelection: hasRowSelection,
+    onRowSelectionChange: setRowSelection,
+    renderEmptyRowsFallback: emptyStateContainer,
+  });
+
+  return (
+    <ScrollableTableContainer
+      odysseyDesignTokens={odysseyDesignTokens}
+      isScrollableStart={!isTableContainerScrolledToStart}
+      isScrollableEnd={!isTableContainerScrolledToEnd}
+      ref={tableOuterContainerRef}
+    >
+      <MRT_TableContainer table={dataTable} />
+    </ScrollableTableContainer>
+  );
+};
+
+const MemoizedTableContent = memo(TableContent);
+MemoizedTableContent.displayName = "TableContent";
+
+export { MemoizedTableContent as TableContent };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
new file mode 100644
index 0000000000..83dc58ce37
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
@@ -0,0 +1,137 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
+import { Checkbox as MuiCheckbox } from "@mui/material";
+import { MenuButton } from "../../MenuButton";
+import { MenuItem } from "../../MenuItem";
+import { ListIcon, ShowIcon } from "../../icons.generated";
+import { densityValues } from "./constants";
+import { useTranslation } from "react-i18next";
+import { TableProps, TableState } from "./componentTypes";
+
+export type TableSettingsProps = {
+  tableOptions: TableProps;
+  tableState: TableState;
+  setTableState: Dispatch<SetStateAction<TableState>>;
+};
+
+const TableSettings = ({
+  tableOptions,
+  tableState,
+  setTableState,
+}: TableSettingsProps) => {
+  const { t } = useTranslation();
+
+  const { hasChangeableDensity, hasColumnVisibility, columns } = tableOptions;
+  const { rowDensity, columnVisibility } = tableState;
+
+  const changeRowDensity = useCallback(
+    (value: (typeof densityValues)[number]) =>
+      (_event: React.MouseEvent<HTMLLIElement>) => {
+        // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
+        if (process.env.NODE_ENV === "development") console.debug(_event);
+
+        setTableState((prevState) => ({
+          ...prevState,
+          rowDensity: value,
+        }));
+      },
+    [],
+  );
+
+  const changeColumnVisibility = useCallback(
+    (columnId: string) => (_event: React.MouseEvent<HTMLLIElement>) => {
+      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
+      if (process.env.NODE_ENV === "development") console.debug(_event);
+
+      setTableState((prevState) => ({
+        ...prevState,
+        columnVisibility: {
+          ...prevState.columnVisibility,
+          [columnId]: prevState.columnVisibility
+            ? prevState.columnVisibility[columnId] === false
+            : false,
+        },
+      }));
+    },
+    [],
+  );
+
+  const isColumnVisibilityChecked = useMemo(() => {
+    return columns.reduce(
+      (acc, column) => {
+        const isChecked = columnVisibility
+          ? columnVisibility[column.accessorKey!] !== false
+          : true;
+        acc[column.accessorKey!] = isChecked;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    );
+  }, [columns, columnVisibility]);
+
+  return (
+    <>
+      {hasChangeableDensity && (
+        <MenuButton
+          endIcon={<ListIcon />}
+          ariaLabel={t("table.density.arialabel")}
+          menuAlignment="right"
+          shouldCloseOnSelect={false}
+        >
+          <>
+            {densityValues.map((value: (typeof densityValues)[number]) => (
+              <MenuItem
+                key={value}
+                isSelected={rowDensity === value}
+                onClick={changeRowDensity(value)}
+              >
+                {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
+              </MenuItem>
+            ))}
+          </>
+        </MenuButton>
+      )}
+
+      {hasColumnVisibility && (
+        <MenuButton
+          endIcon={<ShowIcon />}
+          ariaLabel={t("table.columnvisibility.arialabel")}
+          menuAlignment="right"
+          shouldCloseOnSelect={false}
+        >
+          <>
+            {columns
+              .filter((column) => column.enableHiding !== false)
+              .map((column) => (
+                <MenuItem
+                  key={column.accessorKey}
+                  onClick={changeColumnVisibility(column.id as string)}
+                >
+                  <MuiCheckbox
+                    checked={isColumnVisibilityChecked[column.accessorKey!]}
+                  />
+                  {column.header}
+                </MenuItem>
+              ))}
+          </>
+        </MenuButton>
+      )}
+    </>
+  );
+};
+
+const MemoizedTableSettings = memo(TableSettings);
+MemoizedTableSettings.displayName = "TableSettings";
+
+export { MemoizedTableSettings as TableSettings };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
new file mode 100644
index 0000000000..4c7c2fb832
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
@@ -0,0 +1,118 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  MRT_DensityState,
+  MRT_RowData,
+  MRT_RowSelectionState,
+  MRT_SortingState,
+  MRT_TableOptions,
+  MRT_VisibilityState,
+} from "material-react-table";
+import { DataFilter } from "../DataFilters";
+import { paginationTypeValues } from "../DataTablePagination";
+import {
+  availableLayouts,
+  availableStackLayouts,
+  densityValues,
+} from "./constants";
+import { MenuButtonProps } from "../..";
+import { ReactNode } from "react";
+import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
+import {
+  DataGetDataType,
+  DataOnReorderRowsType,
+  DataRowSelectionState,
+  DataTableColumn,
+} from "./dataTypes";
+import { StackCardProps } from "./StackCard";
+
+export type Layout = (typeof availableLayouts)[number];
+export type StackLayout = (typeof availableStackLayouts)[number];
+
+export type AvailableLayouts = Layout[];
+export type AvailableStackLayouts = StackLayout[];
+
+export type UniversalProps = {
+  // Data handling
+  getData: ({
+    page,
+    resultsPerPage,
+    search,
+    filters,
+    sort,
+  }: DataGetDataType) => MRT_RowData[] | Promise<MRT_RowData[]>;
+  getRowId?: MRT_TableOptions<MRT_RowData>["getRowId"];
+  hasRowReordering?: boolean;
+  isRowReorderingDisabled?: boolean;
+  onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
+
+  // Row selection
+  hasRowSelection?: boolean;
+  onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;
+  bulkActionMenuItems?: (
+    selectedRows: MRT_RowSelectionState,
+  ) => MenuButtonProps["children"];
+
+  // Pagination
+  hasPagination?: boolean;
+  currentPage?: number;
+  paginationType?: (typeof paginationTypeValues)[number];
+  resultsPerPage?: number;
+  totalRows?: number;
+
+  // Search & filtering
+  hasFilters?: boolean;
+  hasSearch?: boolean;
+  hasSearchSubmitButton?: boolean;
+  filters?: Array<DataFilter | DataTableColumn<MRT_RowData> | string>;
+  searchDelayTime?: number;
+
+  // States
+  errorMessage?: string;
+  emptyPlaceholder?: ReactNode;
+  noResultsPlaceholder?: ReactNode;
+  isLoading?: boolean;
+  isEmpty?: boolean;
+  isNoResults?: boolean;
+};
+
+export type TableProps = {
+  columns: DataTableColumn<MRT_RowData>[];
+  initialDensity?: (typeof densityValues)[number];
+  hasChangeableDensity?: boolean;
+  hasColumnResizing?: boolean;
+  hasColumnVisibility?: boolean;
+  renderDetailPanel?: MRT_TableOptions<MRT_RowData>["renderDetailPanel"];
+  rowActionButtons?: DataTableRowActionsProps["rowActionButtons"];
+  rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
+  hasSorting?: boolean;
+};
+
+export type StackProps = {
+  cardProps: (row: MRT_RowData) => StackCardProps;
+  maxGridColumns?: number;
+  rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
+};
+
+export type ViewProps<L extends Layout> = {
+  initialLayout?: L;
+  availableLayouts?: L[];
+  tableOptions?: TableProps;
+  stackOptions?: StackProps;
+};
+
+export type TableState = {
+  columnSorting: MRT_SortingState;
+  columnVisibility: MRT_VisibilityState;
+  rowDensity?: MRT_DensityState;
+};
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx
new file mode 100644
index 0000000000..8838fe1b58
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx
@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+export const availableStackLayouts = ["stack", "grid"];
+export const availableTableLayouts = ["table"];
+export const availableLayouts = [
+  ...availableTableLayouts,
+  ...availableStackLayouts,
+];
+
+export const densityValues = ["comfortable", "spacious", "compact"] as const;
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
new file mode 100644
index 0000000000..a04149e5af
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
@@ -0,0 +1,72 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  MRT_Cell,
+  MRT_Column,
+  MRT_ColumnDef,
+  MRT_RowData,
+  MRT_RowSelectionState,
+  MRT_SortingState,
+} from "material-react-table";
+import { DataFilter } from "../DataFilters";
+
+export type DataQueryParamsType = {
+  page?: number;
+  resultsPerPage?: number;
+  search?: string;
+  filters?: DataFilter[];
+  sort?: MRT_SortingState;
+};
+
+export type DataTableColumn<T extends MRT_RowData> = MRT_ColumnDef<T> & {
+  hasTextWrapping?: boolean;
+};
+
+export type DataTableColumnInstance<T extends MRT_RowData> = Omit<
+  MRT_Column<T, unknown>,
+  "columnDef"
+> & {
+  columnDef: DataTableColumn<T>;
+};
+
+export type DataTableCell<T extends MRT_RowData> = Omit<
+  MRT_Cell<T>,
+  "column"
+> & {
+  column: DataTableColumnInstance<T>;
+};
+
+export type DataColumns = DataTableColumn<MRT_RowData>[];
+
+export type DataRow = MRT_RowData;
+
+export type DataGetDataType = {
+  page?: number;
+  resultsPerPage?: number;
+  search?: string;
+  filters?: DataFilter[];
+  sort?: MRT_SortingState;
+};
+
+export type DataOnReorderRowsType = {
+  rowId: string;
+  newRowIndex: number;
+};
+
+export type DataRowSelectionState = MRT_RowSelectionState;
+
+// Provided for backwards compatibilty with old DataTable types
+export type DataTableGetDataType = DataGetDataType;
+export type DataTableOnReorderRowsType = DataOnReorderRowsType;
+export type DataTableRowSelectionState = DataRowSelectionState;
+export type DataTableRow = DataRow;
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
new file mode 100644
index 0000000000..3f6e5463c9
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Dispatch, SetStateAction } from "react";
+import { UniversalProps } from "./componentTypes";
+import { DataQueryParamsType } from "./dataTypes";
+import { t } from "i18next";
+import { MRT_RowData } from "material-react-table";
+
+type DataRequestType = {
+  getDataFn: UniversalProps["getData"];
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
+  setErrorMessage: Dispatch<SetStateAction<UniversalProps["errorMessage"]>>;
+  errorMessageProp: UniversalProps["errorMessage"];
+  setData: Dispatch<SetStateAction<MRT_RowData[]>>;
+  dataQueryParams: DataQueryParamsType;
+};
+
+export const fetchData = async ({
+  getDataFn,
+  setIsLoading,
+  setErrorMessage,
+  errorMessageProp,
+  setData,
+  dataQueryParams,
+}: DataRequestType) => {
+  setIsLoading(true);
+  setErrorMessage(errorMessageProp);
+  try {
+    const incomingData = await getDataFn?.(dataQueryParams);
+    // incomingData.forEach((item: MRT_RowData, index: number) => {
+    //   item._ods_index = index;
+    // });
+    setData(incomingData);
+  } catch (error) {
+    setErrorMessage(typeof error === "string" ? error : t("table.error"));
+  } finally {
+    setIsLoading(false);
+  }
+};
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/index.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/index.tsx
new file mode 100644
index 0000000000..4742bfae82
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/index.tsx
@@ -0,0 +1,19 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+export { DataView, type DataViewProps } from "./DataView";
+export { DataTable, type DataTableProps } from "./DataTable";
+export { DataStack, type DataStackProps } from "./DataStack";
+
+export * from "./constants";
+export * from "./componentTypes";
+export * from "./dataTypes";
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
new file mode 100644
index 0000000000..caf704862c
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
@@ -0,0 +1,156 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { MRT_RowData, MRT_TableOptions } from "material-react-table";
+import { DragIndicatorIcon } from "../../icons.generated";
+import { Box } from "../../Box";
+import { DesignTokens } from "../../OdysseyDesignTokensContext";
+import styled from "@emotion/styled";
+
+export const dataTableImmutableSettings = {
+  enableColumnActions: false,
+  enableDensityToggle: false,
+  enableFilters: false,
+  enableFullScreenToggle: false,
+  enableGlobalFilter: false,
+  enableHiding: false,
+  enablePagination: false,
+  layoutMode: "grid-no-grow" as MRT_TableOptions<MRT_RowData>["layoutMode"],
+  manualFiltering: true,
+  manualSorting: true,
+  muiTablePaperProps: {
+    elevation: 0,
+    sx: {
+      overflow: "visible",
+    },
+  },
+  selectAllMode: "all" as MRT_TableOptions<MRT_RowData>["selectAllMode"],
+  positionActionsColumn:
+    "last" as MRT_TableOptions<MRT_RowData>["positionActionsColumn"],
+  rowVirtualizerOptions: {
+    overscan: 4,
+  },
+  enableExpandAll: false,
+};
+
+export const displayColumnDefOptions = {
+  "mrt-row-actions": {
+    header: "",
+    grow: true,
+    muiTableBodyCellProps: {
+      align: "right",
+      sx: {
+        overflow: "visible",
+        width: "unset",
+      },
+      className: "ods-actions-cell",
+    },
+    muiTableHeadCellProps: {
+      align: "right",
+      sx: {
+        width: "unset",
+      },
+      className: "ods-actions-cell",
+    },
+  },
+  "mrt-row-drag": {
+    header: "",
+    muiTableBodyCellProps: {
+      sx: {
+        minWidth: 0,
+        width: "auto",
+      },
+      className: "ods-drag-handle",
+    },
+    muiTableHeadCellProps: {
+      sx: {
+        minWidth: 0,
+        width: "auto",
+      },
+      children: (
+        // Add a spacer to simulate the width of the drag handle in the column.
+        // Without this, the head cells are offset from their body cell counterparts
+        <Box sx={{ marginInline: "-0.1rem" }}>
+          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />
+        </Box>
+      ),
+    },
+  },
+  "mrt-row-select": {
+    muiTableHeadCellProps: {
+      padding: "checkbox",
+    },
+    muiTableBodyCellProps: {
+      padding: "checkbox",
+    },
+  },
+  "mrt-row-expand": {
+    header: "",
+  },
+};
+
+export const ScrollableTableContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isScrollableStart" &&
+    prop !== "isScrollableEnd",
+})(
+  ({
+    odysseyDesignTokens,
+    isScrollableStart,
+    isScrollableEnd,
+  }: {
+    odysseyDesignTokens: DesignTokens;
+    isScrollableStart: boolean;
+    isScrollableEnd: boolean;
+  }) => ({
+    marginBlockEnd: odysseyDesignTokens.Spacing4,
+    position: "relative",
+    borderInlineStartColor: isScrollableStart
+      ? odysseyDesignTokens.HueNeutral200
+      : "transparent",
+    borderInlineStartStyle: "solid",
+    borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,
+    "::before": {
+      background:
+        "linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+      content: '""',
+      opacity: isScrollableStart ? "0.075" : "0",
+      pointerEvents: "none",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: odysseyDesignTokens.Spacing6,
+      zIndex: 100,
+      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+    },
+    borderInlineEndColor: isScrollableEnd
+      ? odysseyDesignTokens.HueNeutral200
+      : "transparent",
+    borderInlineEndStyle: "solid",
+    borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,
+    "::after": {
+      background:
+        "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+      content: '""',
+      opacity: isScrollableEnd ? "0.075" : "0",
+      pointerEvents: "none",
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: odysseyDesignTokens.Spacing6,
+      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+    },
+  }),
+);
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts b/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
new file mode 100644
index 0000000000..0ef9cc40f4
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
@@ -0,0 +1,91 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useCallback, useMemo } from "react";
+import { DataFilter } from "../DataFilters";
+import { UniversalProps, TableProps } from "./componentTypes";
+import { DataTableColumn } from "../../DataTable";
+import { MRT_RowData } from "material-react-table";
+
+type FilterConversionType = {
+  filters?: UniversalProps["filters"];
+  columns?: TableProps["columns"];
+};
+
+export const useFilterConversion = ({
+  filters,
+  columns,
+}: FilterConversionType) => {
+  const convertFilterSelectOptions = useCallback(
+    (options: DataTableColumn<MRT_RowData>["filterSelectOptions"]) =>
+      options?.map((option) =>
+        typeof option === "string"
+          ? {
+              label: option,
+              value: option,
+            }
+          : {
+              // If the option isn't a string, it must have value and/or option defined
+              // If either is undefined, use the other
+              label: option.label ?? option.value,
+              value: option.value ?? option.label,
+            },
+      ),
+    [],
+  );
+
+  const convertColumnToFilter = useCallback(
+    (column: DataTableColumn<MRT_RowData>) =>
+      column.enableColumnFilter !== false && column.accessorKey
+        ? ({
+            id: column.accessorKey,
+            label: column.header,
+            variant: column.filterVariant,
+            options: convertFilterSelectOptions(column.filterSelectOptions),
+          } satisfies DataFilter as DataFilter)
+        : null,
+    [convertFilterSelectOptions],
+  );
+
+  const dataTableFilters = useMemo(() => {
+    const providedFilters = filters || columns;
+    if (!providedFilters) {
+      return [];
+    }
+    return providedFilters.reduce<DataFilter[]>((accumulator, item) => {
+      if (typeof item === "string") {
+        const foundColumn = columns?.find(
+          (column) => column.accessorKey === item,
+        );
+        if (foundColumn) {
+          const filter = convertColumnToFilter(foundColumn);
+          if (filter) {
+            return accumulator.concat(filter);
+          }
+        }
+      } else if ("accessorKey" in item) {
+        // Checks if it's a column
+        const filter = convertColumnToFilter(item);
+        if (filter) {
+          return accumulator.concat(filter);
+        }
+      } else if ("label" in item) {
+        // Checks if it's a DataFilter
+        return accumulator.concat(item);
+      }
+      // If none of the conditions match, item is ignored (not mapping to undefined)
+      return accumulator;
+    }, []);
+  }, [columns, filters]);
+
+  return dataTableFilters;
+};
diff --git a/packages/odyssey-react-mui/src/labs/index.ts b/packages/odyssey-react-mui/src/labs/index.ts
index e6710d69b8..0e10af7f0f 100644
--- a/packages/odyssey-react-mui/src/labs/index.ts
+++ b/packages/odyssey-react-mui/src/labs/index.ts
@@ -17,6 +17,8 @@ export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
+export * from "./DataComponents";
+
 /** @deprecated Will be removed in a future Odyssey version in lieu of the one shipping with DataTable */
 export * from "./DataTablePagination";
 export * from "./DataFilters";
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 94cd03edd9..c9e1b7edfb 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -2630,14 +2630,15 @@ export const components = ({
 
           [`.${tableHeadClasses.root} &`]: {
             color: odysseyTokens.TypographyColorHeading,
-            fontSize: `0.71428571rem`,
-            lineHeight: odysseyTokens.TypographyLineHeightBody,
             fontWeight: odysseyTokens.TypographyWeightBodyBold,
             textTransform: "uppercase",
             backgroundColor: odysseyTokens.HueNeutral50,
             borderBottom: 0,
             height: `${odysseyTokens.Spacing7} !important`,
             paddingBlock: `${odysseyTokens.Spacing3} !important`,
+            fontSize: odysseyTokens.TypographySizeOverline,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            letterSpacing: 1.3,
           },
 
           [`.${tableHeadClasses.root} &:first-of-type`]: {
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Card/Card.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Card/Card.stories.tsx
index 7822585c91..2f64709ce5 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Card/Card.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Card/Card.stories.tsx
@@ -148,7 +148,9 @@ export const Clickable: StoryObj<CardProps> = {
     return (
       <Box sx={{ maxWidth: 262 }}>
         <Card
-          {...props}
+          overline={props.overline}
+          title={props.title}
+          description={props.description}
           image={<img src="https://placehold.co/128" alt="Example logo" />}
           onClick={onClick}
         />
@@ -165,7 +167,13 @@ export const ClickableWithoutImage: StoryObj<CardProps> = {
 
     return (
       <Box sx={{ maxWidth: 262 }}>
-        <Card {...props} onClick={onClick} />
+        <Card
+          overline={props.overline}
+          title={props.title}
+          description={props.description}
+          image={props.image}
+          onClick={onClick}
+        />
       </Box>
     );
   },
@@ -174,7 +182,20 @@ export const ClickableWithoutImage: StoryObj<CardProps> = {
 export const ButtonWithoutImage: StoryObj<typeof Card> = {
   render: ({ ...props }) => (
     <Box sx={{ maxWidth: 262 }}>
-      <Card {...props} />
+      <Card
+        overline={props.overline}
+        title={props.title}
+        description={props.description}
+        image={props.image}
+        menuButtonChildren={
+          <>
+            <MenuItem>Menu option</MenuItem>
+            <MenuItem>Menu option</MenuItem>
+            <MenuItem>Menu option</MenuItem>
+          </>
+        }
+        button={<Button variant="primary" label="Button" />}
+      />
     </Box>
   ),
 };
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx
index 0a4063fd72..bfcf9b6ac5 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx
@@ -18,7 +18,7 @@ import {
 import {
   Box,
   Button,
-  DataTable,
+  // DataTable,
   EmptyState,
   DataTableGetDataType,
   DataTableOnReorderRowsType,
@@ -26,8 +26,9 @@ import {
   DataTableRenderDetailPanelType,
   DataTableRowSelectionState,
   MenuItem,
-  densityValues,
+  // densityValues,
 } from "@okta/odyssey-react-mui";
+import { DataTable, densityValues } from "@okta/odyssey-react-mui/labs";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import {
   Planet,
@@ -314,15 +315,6 @@ const storybookMeta: Meta<DataTableProps> = {
         },
       },
     },
-    initialSearchValue: {
-      control: "text",
-      description: "The initial search value",
-      table: {
-        type: {
-          summary: `string`,
-        },
-      },
-    },
   },
   decorators: [MuiThemeDecorator],
 };

From 44ce0a983f2d58971a240a71eb037eab191edcbe Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Mon, 17 Jun 2024 21:06:52 -0400
Subject: [PATCH 02/15] feat: add DataComponent stories

---
 .../DataComponents/DataComponents.stories.tsx |  565 +++++
 .../DataComponents/dataFunctions.ts           |  121 ++
 .../DataComponents/personData.tsx             | 1885 +++++++++++++++++
 3 files changed, 2571 insertions(+)
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/personData.tsx

diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
new file mode 100644
index 0000000000..83ca7a8257
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
@@ -0,0 +1,565 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DataRow,
+  DataView,
+  DataViewProps,
+  DataGetDataType,
+  DataOnReorderRowsType,
+  DataRowSelectionState,
+  densityValues,
+  availableLayouts,
+  TableProps,
+  StackProps,
+  DataTable,
+  DataStack,
+} from "@okta/odyssey-react-mui/labs";
+import { PauseIcon, RefreshIcon } from "@okta/odyssey-react-mui/icons";
+import { MuiThemeDecorator } from "../../../../.storybook/components";
+import {
+  Person,
+  columns as personColumns,
+  data as personData,
+} from "./personData";
+import { filterData, reorderData } from "./dataFunctions";
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import {
+  Box,
+  MenuItem,
+  Status,
+  Button,
+  EmptyState,
+  paginationTypeValues,
+} from "@okta/odyssey-react-mui";
+
+type DataViewMetaProps = DataViewProps &
+  TableProps &
+  StackProps & {
+    tableRowActionMenuItems: TableProps["rowActionMenuItems"];
+    stackRowActionMenuItems: StackProps["rowActionMenuItems"];
+    hasCustomEmptyPlaceholder: boolean;
+    hasCustomNoResultsPlaceholder: boolean;
+    hasActionMenuItems: boolean;
+    hasActionButtons: boolean;
+  };
+
+const storybookMeta: Meta<DataViewMetaProps> = {
+  title: "Labs Components/Data components",
+  component: DataView,
+  argTypes: {
+    getData: {
+      control: null,
+      table: {
+        type: {
+          summary: "",
+        },
+      },
+    },
+    getRowId: {
+      control: null,
+      table: {
+        type: {
+          summary: "",
+        },
+      },
+    },
+    hasRowReordering: {
+      control: "boolean",
+      table: {
+        type: {
+          summary: "",
+        },
+      },
+    },
+    isRowReorderingDisabled: {
+      control: "boolean",
+    },
+    onReorderRows: {
+      control: null,
+      table: {
+        type: {
+          summary: "",
+        },
+      },
+    },
+    hasRowSelection: {
+      control: "boolean",
+    },
+    onChangeRowSelection: {
+      control: null,
+    },
+    bulkActionMenuItems: {
+      control: null,
+    },
+    hasPagination: {
+      control: "boolean",
+    },
+    currentPage: {
+      control: "number",
+    },
+    paginationType: {
+      control: "select",
+      options: paginationTypeValues,
+    },
+    resultsPerPage: {
+      control: "number",
+    },
+    totalRows: {
+      control: "number",
+    },
+    hasFilters: {
+      control: "boolean",
+    },
+    hasSearch: {
+      control: "boolean",
+    },
+    hasSearchSubmitButton: {
+      control: "boolean",
+    },
+    filters: {
+      control: null,
+    },
+    searchDelayTime: {
+      control: "number",
+    },
+    errorMessage: {
+      control: "text",
+    },
+    emptyPlaceholder: {
+      control: null,
+    },
+    noResultsPlaceholder: {
+      control: null,
+    },
+    initialLayout: {
+      control: "select",
+      options: availableLayouts,
+    },
+    availableLayouts: {
+      control: "check",
+      options: availableLayouts,
+    },
+    columns: {
+      control: null,
+      name: "tableOptions.columns",
+    },
+    initialDensity: {
+      control: "select",
+      options: densityValues,
+      name: "tableOptions.columns",
+    },
+    hasChangeableDensity: {
+      control: "boolean",
+      name: "tableOptions.hasChangeableDensity",
+    },
+    hasColumnResizing: {
+      control: "boolean",
+      name: "tableOptions.hasColumnResizing",
+    },
+    hasColumnVisibility: {
+      control: "boolean",
+      name: "tableOptions.hasColumnVisibility",
+    },
+    renderDetailPanel: {
+      control: null,
+      name: "tableOptions.renderDetailPanel",
+    },
+    rowActionButtons: {
+      control: null,
+      name: "tableOptions.rowActionButtons",
+    },
+    tableRowActionMenuItems: {
+      control: null,
+      name: "tableOptions.rowActionMenuItems",
+    },
+    hasSorting: {
+      control: "boolean",
+      name: "tableOptions.hasSorting",
+    },
+    cardProps: {
+      control: null,
+      name: "stackOptions.cardProps",
+    },
+    maxGridColumns: {
+      control: "number",
+      name: "stackOptions.maxGridColumns",
+    },
+    stackRowActionMenuItems: {
+      control: null,
+      name: "stackOptions.rowActionMenuItems",
+    },
+    isLoading: {
+      control: "boolean",
+    },
+    isEmpty: {
+      control: "boolean",
+    },
+    isNoResults: {
+      control: "boolean",
+    },
+    hasCustomEmptyPlaceholder: {
+      control: "boolean",
+      name: "[STORY ONLY] Has custom empty placeholder?",
+    },
+    hasCustomNoResultsPlaceholder: {
+      control: "boolean",
+      name: "[STORY ONLY] Has custom 'no results' placeholder?",
+    },
+    hasActionMenuItems: {
+      control: "boolean",
+      name: "[STORY ONLY] Has action menu items?",
+    },
+    hasActionButtons: {
+      control: "boolean",
+      name: "[STORY ONLY] Has action buttons in table view?",
+    },
+  },
+  args: {
+    currentPage: 1,
+    resultsPerPage: 20,
+    paginationType: "paged",
+    maxGridColumns: 3,
+    hasActionButtons: false,
+    hasActionMenuItems: false,
+    hasCustomEmptyPlaceholder: false,
+    hasCustomNoResultsPlaceholder: false,
+    availableLayouts: ["table", "stack", "grid"],
+    initialLayout: "table",
+  },
+  decorators: [MuiThemeDecorator],
+};
+
+export default storybookMeta;
+
+const useDataCallbacks = (
+  data: Person[],
+  setData: Dispatch<SetStateAction<Person[]>>,
+) => {
+  const getData = useCallback(
+    ({ ...props }: DataGetDataType) => {
+      return filterData({ data, ...props });
+    },
+    [data],
+  );
+
+  const onReorderRows = useCallback(
+    ({ ...props }: DataOnReorderRowsType) => {
+      const reorderedData = reorderData({ data, ...props });
+      setData(reorderedData);
+    },
+    [data, setData],
+  );
+
+  const onChangeRowSelection = useCallback(
+    (rowSelection: DataRowSelectionState) => {
+      if (Object.keys(rowSelection).length > 0) {
+        console.log(`${Object.keys(rowSelection).length} selected`);
+      }
+    },
+    [],
+  );
+
+  return { getData, onReorderRows, onChangeRowSelection };
+};
+
+// Common action menu items
+const actionMenuItems = (selectedRows: DataRowSelectionState) => (
+  <>
+    <MenuItem onClick={() => console.log(selectedRows)}>Action 1</MenuItem>
+    <MenuItem onClick={() => console.log(selectedRows)}>Action 2</MenuItem>
+  </>
+);
+
+const actionButtons = () => (
+  <Box
+    sx={{
+      display: "flex",
+      alignItems: "center",
+      marginInlineEnd: 2,
+    }}
+  >
+    <Button
+      endIcon={<PauseIcon />}
+      ariaLabel="Pause"
+      size="small"
+      variant="floating"
+    />
+    <Button
+      endIcon={<RefreshIcon />}
+      ariaLabel="Refresh"
+      size="small"
+      variant="floating"
+    />
+  </Box>
+);
+
+const customEmptyPlaceholder = (
+  <EmptyState
+    heading="Start by adding data assets"
+    description="All relevant data will be displayed and can be searched and filtered"
+    PrimaryCallToActionComponent={<Button variant="primary" label="Primary" />}
+    SecondaryCallToActionComponent={
+      <Button variant="secondary" label="Secondary" />
+    }
+  />
+);
+
+const customNoResultsPlaceholder = (
+  <EmptyState
+    heading="Whoops, there's nothing here!"
+    description="You should try searching or filtering for something else."
+  />
+);
+
+const cardProps = (row: DataRow) => ({
+  overline: `${row.city}, ${row.state}`,
+  title: row.name,
+  description: `${row.name} is ${row.age} years old.`,
+  children: (
+    <Status
+      label={row.risk.charAt(0).toUpperCase() + row.risk.slice(1)}
+      severity={
+        row.risk === "low"
+          ? "success"
+          : row.risk === "medium"
+            ? "warning"
+            : "error"
+      }
+    />
+  ),
+});
+
+// Base story configuration
+const BaseStory: StoryObj<DataViewMetaProps> = {
+  render: function Base(args) {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData, onReorderRows, onChangeRowSelection } = useDataCallbacks(
+      data,
+      setData,
+    );
+
+    return (
+      <DataView
+        getData={getData}
+        onReorderRows={onReorderRows}
+        onChangeRowSelection={onChangeRowSelection}
+        bulkActionMenuItems={
+          args.hasActionMenuItems ? actionMenuItems : undefined
+        }
+        hasRowReordering={args.hasRowReordering}
+        isRowReorderingDisabled={args.isRowReorderingDisabled}
+        hasRowSelection={args.hasRowSelection}
+        hasPagination={args.hasPagination}
+        currentPage={args.currentPage}
+        paginationType={args.paginationType}
+        resultsPerPage={args.resultsPerPage}
+        totalRows={args.totalRows}
+        hasFilters={args.hasFilters}
+        hasSearch={args.hasSearch}
+        hasSearchSubmitButton={args.hasSearchSubmitButton}
+        searchDelayTime={args.searchDelayTime}
+        errorMessage={args.errorMessage}
+        initialLayout={args.initialLayout}
+        availableLayouts={args.availableLayouts}
+        isLoading={args.isLoading}
+        isEmpty={args.isEmpty}
+        isNoResults={args.isNoResults}
+        emptyPlaceholder={
+          args.hasCustomEmptyPlaceholder ? customEmptyPlaceholder : undefined
+        }
+        noResultsPlaceholder={
+          args.hasCustomNoResultsPlaceholder
+            ? customNoResultsPlaceholder
+            : undefined
+        }
+        tableOptions={{
+          columns: personColumns,
+          hasSorting: args.hasSorting,
+          rowActionMenuItems: args.hasActionMenuItems
+            ? actionMenuItems
+            : undefined,
+          rowActionButtons: args.hasActionButtons ? actionButtons : undefined,
+          renderDetailPanel: undefined,
+          hasColumnVisibility: args.hasColumnVisibility,
+          hasColumnResizing: args.hasColumnResizing,
+          hasChangeableDensity: args.hasChangeableDensity,
+          initialDensity: args.initialDensity,
+        }}
+        stackOptions={{
+          cardProps: cardProps,
+          rowActionMenuItems: args.hasActionMenuItems
+            ? actionMenuItems
+            : undefined,
+          maxGridColumns: args.maxGridColumns,
+        }}
+      />
+    );
+  },
+};
+
+export const Default: StoryObj<DataViewMetaProps> = {
+  ...BaseStory,
+  args: {},
+};
+
+export const TableOnly: StoryObj<DataViewMetaProps> = {
+  ...BaseStory,
+  args: {
+    availableLayouts: ["table"],
+  },
+};
+
+export const StackWithMultipleLayouts: StoryObj<DataViewMetaProps> = {
+  ...BaseStory,
+  args: {
+    availableLayouts: ["list", "grid"],
+  },
+};
+
+export const StackListOnly: StoryObj<DataViewMetaProps> = {
+  ...BaseStory,
+  args: {
+    availableLayouts: ["list"],
+  },
+};
+
+export const StackGridOnly: StoryObj<DataViewMetaProps> = {
+  ...BaseStory,
+  args: {
+    availableLayouts: ["grid"],
+  },
+};
+
+export const Everything: StoryObj<DataViewMetaProps> = {
+  ...BaseStory,
+  args: {
+    hasRowReordering: true,
+    hasPagination: true,
+    hasFilters: true,
+    hasSearch: true,
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: true,
+    hasSorting: true,
+    hasActionButtons: true,
+    hasActionMenuItems: true,
+    hasRowSelection: true,
+  },
+};
+
+export const DataTableComponent: StoryObj<DataViewMetaProps> = {
+  render: function Base(args) {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData, onReorderRows, onChangeRowSelection } = useDataCallbacks(
+      data,
+      setData,
+    );
+
+    return (
+      <DataTable
+        getData={getData}
+        onReorderRows={onReorderRows}
+        onChangeRowSelection={onChangeRowSelection}
+        bulkActionMenuItems={
+          args.hasActionMenuItems ? actionMenuItems : undefined
+        }
+        hasRowReordering={args.hasRowReordering}
+        isRowReorderingDisabled={args.isRowReorderingDisabled}
+        hasRowSelection={args.hasRowSelection}
+        hasPagination={args.hasPagination}
+        currentPage={args.currentPage}
+        paginationType={args.paginationType}
+        resultsPerPage={args.resultsPerPage}
+        totalRows={args.totalRows}
+        hasFilters={args.hasFilters}
+        hasSearch={args.hasSearch}
+        hasSearchSubmitButton={args.hasSearchSubmitButton}
+        searchDelayTime={args.searchDelayTime}
+        errorMessage={args.errorMessage}
+        isLoading={args.isLoading}
+        isEmpty={args.isEmpty}
+        isNoResults={args.isNoResults}
+        emptyPlaceholder={
+          args.hasCustomEmptyPlaceholder ? customEmptyPlaceholder : undefined
+        }
+        noResultsPlaceholder={
+          args.hasCustomNoResultsPlaceholder
+            ? customNoResultsPlaceholder
+            : undefined
+        }
+        columns={personColumns}
+        hasSorting={args.hasSorting}
+        rowActionMenuItems={
+          args.hasActionMenuItems ? actionMenuItems : undefined
+        }
+        rowActionButtons={args.hasActionButtons ? actionButtons : undefined}
+        hasColumnVisibility={args.hasColumnVisibility}
+        hasColumnResizing={args.hasColumnResizing}
+        hasChangeableDensity={args.hasChangeableDensity}
+        initialDensity={args.initialDensity}
+      />
+    );
+  },
+};
+
+export const DataStackComponent: StoryObj<DataViewMetaProps> = {
+  render: function Base(args) {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData, onReorderRows, onChangeRowSelection } = useDataCallbacks(
+      data,
+      setData,
+    );
+
+    return (
+      <DataStack
+        availableLayouts={["list", "grid"]}
+        getData={getData}
+        onReorderRows={onReorderRows}
+        onChangeRowSelection={onChangeRowSelection}
+        bulkActionMenuItems={
+          args.hasActionMenuItems ? actionMenuItems : undefined
+        }
+        hasRowReordering={args.hasRowReordering}
+        isRowReorderingDisabled={args.isRowReorderingDisabled}
+        hasRowSelection={args.hasRowSelection}
+        hasPagination={args.hasPagination}
+        currentPage={args.currentPage}
+        paginationType={args.paginationType}
+        resultsPerPage={args.resultsPerPage}
+        totalRows={args.totalRows}
+        hasFilters={args.hasFilters}
+        hasSearch={args.hasSearch}
+        hasSearchSubmitButton={args.hasSearchSubmitButton}
+        searchDelayTime={args.searchDelayTime}
+        errorMessage={args.errorMessage}
+        isLoading={args.isLoading}
+        isEmpty={args.isEmpty}
+        isNoResults={args.isNoResults}
+        emptyPlaceholder={
+          args.hasCustomEmptyPlaceholder ? customEmptyPlaceholder : undefined
+        }
+        noResultsPlaceholder={
+          args.hasCustomNoResultsPlaceholder
+            ? customNoResultsPlaceholder
+            : undefined
+        }
+        cardProps={cardProps}
+        rowActionMenuItems={
+          args.hasActionMenuItems ? actionMenuItems : undefined
+        }
+        maxGridColumns={args.maxGridColumns}
+      />
+    );
+  },
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts
new file mode 100644
index 0000000000..557dffb308
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts
@@ -0,0 +1,121 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// import {
+//   DataTableGetDataType,
+//   DataTableOnReorderRowsType,
+// } from "@okta/odyssey-react-mui";
+import {
+  DataGetDataType,
+  DataOnReorderRowsType,
+} from "@okta/odyssey-react-mui/labs";
+import { Person } from "./personData";
+
+export const filterData = ({
+  data,
+  ...args
+}: {
+  data: Person[];
+} & DataGetDataType) => {
+  let filteredData = data;
+  const { search, filters, sort, page = 1, resultsPerPage = 20 } = args;
+
+  // Implement text-based query filtering
+  if (search) {
+    filteredData = filteredData.filter((row) =>
+      Object.values(row).some((value) =>
+        value.toString().toLowerCase().includes(search.toLowerCase()),
+      ),
+    );
+  }
+
+  // Implement column-specific filtering
+  if (filters) {
+    filteredData = filteredData.filter((row) => {
+      return filters.every(({ id, value }) => {
+        // If filter value is null or undefined, skip this filter
+        if (value === null || value === undefined) {
+          return true;
+        }
+
+        // If filter value is array, search for each array value
+        if (Array.isArray(value)) {
+          return value.some((arrayValue) => {
+            return row[id as keyof Person]
+              ?.toString()
+              .toLowerCase()
+              .includes(arrayValue.toString().toLowerCase());
+          });
+        }
+
+        // In the custom filter examples, we provide a "starting letter"
+        // control that allows the user to filter by whether the
+        // first letter is a vowel or consonant
+        if (id === "startLetter" && typeof row.name === "string") {
+          const firstLetter = row.name[0]?.toLowerCase();
+          if (value === "vowel") return "aeiou".includes(firstLetter);
+          if (value === "consonant") return !"aeiou".includes(firstLetter);
+          return true;
+        }
+
+        // General filtering for other columns
+        return row[id as keyof Person]
+          ?.toString()
+          .toLowerCase()
+          .includes(value.toString().toLowerCase());
+      });
+    });
+  }
+
+  // Implement sorting
+  if (sort && sort.length > 0) {
+    filteredData.sort((a, b) => {
+      for (const { id, desc } of sort) {
+        const aValue = a[id as keyof Person];
+        const bValue = b[id as keyof Person];
+
+        if (aValue < bValue) return desc ? 1 : -1;
+        if (aValue > bValue) return desc ? -1 : 1;
+      }
+
+      return 0;
+    });
+  }
+
+  // Implement pagination
+  const startRow = (page - 1) * resultsPerPage;
+  const endRow = startRow + resultsPerPage;
+  filteredData = filteredData.slice(startRow, endRow);
+
+  return filteredData;
+};
+
+export const reorderData = <T extends { id: string | number }>({
+  data,
+  ...args
+}: {
+  data: T[];
+} & DataOnReorderRowsType) => {
+  const updatedData = data;
+  const { rowId, newRowIndex } = args;
+  const rowIndex = updatedData.findIndex((row) => row.id === rowId);
+
+  if (rowIndex !== -1) {
+    // Remove the row from its current position
+    const [removedRow] = updatedData.splice(rowIndex, 1);
+
+    // Insert the row at the new index
+    updatedData.splice(newRowIndex, 0, removedRow);
+  }
+
+  return updatedData;
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/personData.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/personData.tsx
new file mode 100644
index 0000000000..e8d8fe78de
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/personData.tsx
@@ -0,0 +1,1885 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Status } from "@okta/odyssey-react-mui";
+import { DataColumns } from "@okta/odyssey-react-mui/labs";
+
+export type Person = {
+  order: number;
+  id: string;
+  name: string;
+  city: string;
+  state: string;
+  age: number;
+  risk: "high" | "medium" | "low";
+};
+
+export const columns: DataColumns = [
+  {
+    accessorKey: "order",
+    header: "ID",
+    enableColumnFilter: false,
+    size: 120,
+  },
+  {
+    accessorKey: "name",
+    header: "Name",
+    enableHiding: false,
+  },
+  {
+    accessorKey: "city",
+    header: "City",
+  },
+  {
+    accessorKey: "state",
+    header: "State",
+  },
+  {
+    accessorKey: "age",
+    header: "Age",
+    size: 80,
+    filterVariant: "range",
+  },
+  {
+    accessorKey: "risk",
+    header: "Risk level",
+    Cell: ({ cell }) => {
+      const value = cell.getValue<string>();
+      const severity =
+        value === "low" ? "success" : value === "medium" ? "warning" : "error";
+      return (
+        <Status
+          label={value.charAt(0).toUpperCase() + value.slice(1)}
+          severity={severity}
+        />
+      );
+    },
+    filterVariant: "multi-select",
+    filterSelectOptions: [
+      {
+        label: "Low",
+        value: "low",
+      },
+      {
+        label: "Medium",
+        value: "medium",
+      },
+      {
+        label: "High",
+        value: "high",
+      },
+    ],
+  },
+];
+
+export const data: Person[] = [
+  {
+    order: 0,
+    id: "9d3cd264-0212-4827-b421-3d77bc22c0a9",
+    name: "John Doe",
+    city: "New Paltz",
+    state: "New York",
+    age: 34,
+    risk: "high",
+  },
+  {
+    order: 1,
+    id: "bf663960-2df9-42c4-8cab-ac95f8c9b04e",
+    name: "Cecil Steuber",
+    city: "New Arlo",
+    state: "Florida",
+    age: 95,
+    risk: "low",
+  },
+  {
+    order: 2,
+    id: "f8046c00-fe48-421e-bd7b-5a5afc63aa61",
+    name: "Lionel Lynch",
+    city: "Kirlinboro",
+    state: "Kansas",
+    age: 97,
+    risk: "high",
+  },
+  {
+    order: 3,
+    id: "8051ea50-285e-45b3-8172-6ea1e2dd0da4",
+    name: "Lamar Bayer",
+    city: "West Kayleetown",
+    state: "New Jersey",
+    age: 90,
+    risk: "medium",
+  },
+  {
+    order: 4,
+    id: "d93f395b-8958-4ef7-af34-0f4ccbdfa042",
+    name: "Mr. Dwayne Howe II",
+    city: "Fort Alvisstead",
+    state: "Pennsylvania",
+    age: 23,
+    risk: "low",
+  },
+  {
+    order: 5,
+    id: "b86cd0e4-dca1-4957-b844-ff976a6394f8",
+    name: "Valerie Klein",
+    city: "West Orenview",
+    state: "Idaho",
+    age: 91,
+    risk: "medium",
+  },
+  {
+    order: 6,
+    id: "086fa172-6d44-49ef-8406-6b34cccad694",
+    name: "Randal Howe",
+    city: "New Loganton",
+    state: "Arizona",
+    age: 26,
+    risk: "medium",
+  },
+  {
+    order: 7,
+    id: "ad806feb-44c9-4e21-bd41-5c3c76090657",
+    name: "Herbert Stanton",
+    city: "Katrinefurt",
+    state: "Indiana",
+    age: 20,
+    risk: "high",
+  },
+  {
+    order: 8,
+    id: "9cc74183-214d-4cca-b948-82e5fe27bb74",
+    name: "Kyle Hoeger",
+    city: "North Kodyborough",
+    state: "Virginia",
+    age: 86,
+    risk: "high",
+  },
+  {
+    order: 9,
+    id: "273e72d4-25d8-4c53-9a51-36e43fc75524",
+    name: "Nina Carroll",
+    city: "West Caleigh",
+    state: "Missouri",
+    age: 88,
+    risk: "high",
+  },
+  {
+    order: 10,
+    id: "62b86ff6-003e-4dd0-aedf-c012b1de1eb0",
+    name: "Moses Glover",
+    city: "Berkeley",
+    state: "South Dakota",
+    age: 79,
+    risk: "low",
+  },
+  {
+    order: 11,
+    id: "08fac7bf-ac9c-4b8b-8ede-f64c946a1fb6",
+    name: "Mr. Cesar Cole",
+    city: "Lake Kailey",
+    state: "Montana",
+    age: 32,
+    risk: "low",
+  },
+  {
+    order: 12,
+    id: "bc082c2c-2953-40b6-aeb1-110daeef81bf",
+    name: "Dixie Kuphal IV",
+    city: "East Esmeralda",
+    state: "Missouri",
+    age: 92,
+    risk: "low",
+  },
+  {
+    order: 13,
+    id: "ec955b41-a9c1-4092-bdae-c8daecc67392",
+    name: "Sylvester Gislason V",
+    city: "East Johnnybury",
+    state: "Missouri",
+    age: 35,
+    risk: "high",
+  },
+  {
+    order: 14,
+    id: "0cd8c723-078b-45c3-8a49-824a74ddba46",
+    name: "Margaret Toy DDS",
+    city: "Rubenstead",
+    state: "Minnesota",
+    age: 36,
+    risk: "medium",
+  },
+  {
+    order: 15,
+    id: "a4e4b630-76cb-4797-a97d-8c7c93b30f03",
+    name: "Elena Haag",
+    city: "East Ernie",
+    state: "Texas",
+    age: 75,
+    risk: "high",
+  },
+  {
+    order: 16,
+    id: "4c3884f5-a447-46a3-89a9-2b0ab2373aa2",
+    name: "Pamela Effertz",
+    city: "West Jamarcusboro",
+    state: "Arkansas",
+    age: 43,
+    risk: "low",
+  },
+  {
+    order: 17,
+    id: "309fb05e-583d-4201-b334-e6d9f4ae74e6",
+    name: "Mrs. Gloria Douglas",
+    city: "Cummingshaven",
+    state: "Ohio",
+    age: 32,
+    risk: "medium",
+  },
+  {
+    order: 18,
+    id: "b952cf04-8182-4da0-8671-9fe8a0c42e16",
+    name: "Tommie Schneider",
+    city: "Lake Lolitaview",
+    state: "Michigan",
+    age: 47,
+    risk: "medium",
+  },
+  {
+    order: 19,
+    id: "6de5bb9c-7abb-4995-ace5-0ac9eeed13a7",
+    name: "Edna Kling",
+    city: "Port Jimmyborough",
+    state: "Georgia",
+    age: 23,
+    risk: "medium",
+  },
+  {
+    order: 20,
+    id: "2c129486-6dda-4391-976b-b41021473308",
+    name: "Gordon Jast",
+    city: "Prosaccoborough",
+    state: "New Mexico",
+    age: 99,
+    risk: "low",
+  },
+  {
+    order: 21,
+    id: "ffd2953d-a49a-48d0-89ef-903fd05774ad",
+    name: "Salvador Armstrong",
+    city: "Alysaton",
+    state: "Nevada",
+    age: 65,
+    risk: "medium",
+  },
+  {
+    order: 22,
+    id: "e5ab25bc-60c3-4888-9f3e-ec66fbe9f2aa",
+    name: "Sheila Harris",
+    city: "South Allenton",
+    state: "Tennessee",
+    age: 46,
+    risk: "low",
+  },
+  {
+    order: 23,
+    id: "48069214-aaf6-4bb1-8a74-314ba899c245",
+    name: "Rochelle Rohan",
+    city: "New Coryside",
+    state: "Oklahoma",
+    age: 98,
+    risk: "medium",
+  },
+  {
+    order: 24,
+    id: "95adb05b-dd7b-4f38-8434-1fc65fadc096",
+    name: "Rodney White",
+    city: "North Jonathonshire",
+    state: "Texas",
+    age: 47,
+    risk: "high",
+  },
+  {
+    order: 25,
+    id: "bd58c1d4-dc60-4d03-8fd1-96cd42f56272",
+    name: "Faith Kub",
+    city: "Morissetteboro",
+    state: "New Hampshire",
+    age: 87,
+    risk: "low",
+  },
+  {
+    order: 26,
+    id: "1feebd5f-16de-456b-8196-d1b2bd54b633",
+    name: "Mrs. Vera Brown",
+    city: "East Watson",
+    state: "Utah",
+    age: 27,
+    risk: "high",
+  },
+  {
+    order: 27,
+    id: "25a8afd9-e34a-4ef4-8a14-714c6d72e449",
+    name: "Gregory Dare",
+    city: "East Ramona",
+    state: "Indiana",
+    age: 65,
+    risk: "medium",
+  },
+  {
+    order: 28,
+    id: "e43c16e7-9830-4e68-b492-27abe3e30966",
+    name: "Charlie Steuber-Weber",
+    city: "Toniview",
+    state: "Idaho",
+    age: 77,
+    risk: "medium",
+  },
+  {
+    order: 29,
+    id: "0cd47890-0cd5-4db2-b74d-1e450c49a985",
+    name: "Jimmie Dicki-Stiedemann",
+    city: "Purdyfort",
+    state: "Wyoming",
+    age: 29,
+    risk: "low",
+  },
+  {
+    order: 30,
+    id: "82bb23af-5378-4d20-b266-a1f2ed557d7b",
+    name: "Ralph Hane DDS",
+    city: "Antonettehaven",
+    state: "Pennsylvania",
+    age: 93,
+    risk: "low",
+  },
+  {
+    order: 31,
+    id: "da195eac-8e19-4b22-8185-afffe9e8d308",
+    name: "Doreen Breitenberg",
+    city: "North Margretton",
+    state: "Michigan",
+    age: 83,
+    risk: "medium",
+  },
+  {
+    order: 32,
+    id: "f0b17830-686d-4d32-98ca-f37c4de0eb39",
+    name: "Mr. Guy Jacobson",
+    city: "East Kaelyn",
+    state: "Hawaii",
+    age: 28,
+    risk: "low",
+  },
+  {
+    order: 33,
+    id: "7db48194-3a13-4453-971d-9eecb5c29909",
+    name: "Nathaniel Conroy",
+    city: "Beckerton",
+    state: "California",
+    age: 94,
+    risk: "low",
+  },
+  {
+    order: 34,
+    id: "7f38910b-e4c6-4d16-96d6-ce2c3f7875fa",
+    name: "Hope Klocko III",
+    city: "Lincolnstead",
+    state: "Colorado",
+    age: 52,
+    risk: "low",
+  },
+  {
+    order: 35,
+    id: "08dc854c-def6-4a02-a6ec-e2afdd455f8c",
+    name: "Mrs. Valerie Raynor",
+    city: "Kevenview",
+    state: "Indiana",
+    age: 81,
+    risk: "high",
+  },
+  {
+    order: 36,
+    id: "e1ba2b2d-1468-4e65-877c-ae59bc7aea44",
+    name: "Tracey Hammes",
+    city: "New Harveyburgh",
+    state: "North Carolina",
+    age: 22,
+    risk: "low",
+  },
+  {
+    order: 37,
+    id: "f5b7d6f4-9dcd-4f28-b163-7cbaa99b7723",
+    name: "Nina Paucek",
+    city: "Port Reta",
+    state: "New Hampshire",
+    age: 53,
+    risk: "low",
+  },
+  {
+    order: 38,
+    id: "ed9ebc5a-f104-42ca-b9a6-dbcbd6bbf27d",
+    name: "Derrick Hodkiewicz",
+    city: "Port Bettiebury",
+    state: "Maine",
+    age: 82,
+    risk: "low",
+  },
+  {
+    order: 39,
+    id: "2562adc7-a956-452c-8a51-6997442d0dca",
+    name: "Maggie Orn",
+    city: "Stromanbury",
+    state: "Vermont",
+    age: 36,
+    risk: "low",
+  },
+  {
+    order: 40,
+    id: "19606ba5-2a05-4a84-98fd-bdfeac306110",
+    name: "Jeanne Borer",
+    city: "Fort Coltenfurt",
+    state: "Pennsylvania",
+    age: 26,
+    risk: "medium",
+  },
+  {
+    order: 41,
+    id: "d8ba8b5f-7a4d-4f77-8ce8-c00255038226",
+    name: "Suzanne Daniel",
+    city: "Morissetteworth",
+    state: "Michigan",
+    age: 58,
+    risk: "medium",
+  },
+  {
+    order: 42,
+    id: "49345933-6a7e-47b2-a280-0517fdb0ca17",
+    name: "Lola Kautzer",
+    city: "New Destinystad",
+    state: "Colorado",
+    age: 22,
+    risk: "medium",
+  },
+  {
+    order: 43,
+    id: "1f397994-d931-4cf4-a9e1-d2378c67c4cd",
+    name: "Mabel Bernhard DVM",
+    city: "Howestad",
+    state: "Washington",
+    age: 46,
+    risk: "high",
+  },
+  {
+    order: 44,
+    id: "1406f3b1-b93f-491e-a41c-c4b17b7ead97",
+    name: "Tyler Dare",
+    city: "Boulder",
+    state: "Minnesota",
+    age: 81,
+    risk: "medium",
+  },
+  {
+    order: 45,
+    id: "a4ffca1f-cc28-441c-b25a-da24df4f3651",
+    name: "Noah Jacobi",
+    city: "New Marianefield",
+    state: "Delaware",
+    age: 67,
+    risk: "low",
+  },
+  {
+    order: 46,
+    id: "ac9a2226-13c7-429b-b941-0297b3730a7a",
+    name: "Danny Cormier",
+    city: "Florissant",
+    state: "Massachusetts",
+    age: 88,
+    risk: "high",
+  },
+  {
+    order: 47,
+    id: "ef9e1979-657c-46ad-81d2-b94f4dff3d4f",
+    name: "Alex Kautzer",
+    city: "West Bettyfield",
+    state: "Illinois",
+    age: 47,
+    risk: "high",
+  },
+  {
+    order: 48,
+    id: "d7feab4a-6055-48aa-a0f1-cedc3c002067",
+    name: "Jared Hermann",
+    city: "Fort Audraborough",
+    state: "Washington",
+    age: 63,
+    risk: "high",
+  },
+  {
+    order: 49,
+    id: "e0580323-fb6e-4350-84ff-6d6bec51b4e2",
+    name: "Irene Luettgen Jr.",
+    city: "Louisville/Jefferson County",
+    state: "Arkansas",
+    age: 26,
+    risk: "low",
+  },
+  {
+    order: 50,
+    id: "e51fef7f-b8c1-41b4-875d-a65e30b85ea7",
+    name: "Gerald VonRueden",
+    city: "New Jaimeton",
+    state: "Vermont",
+    age: 50,
+    risk: "low",
+  },
+  {
+    order: 51,
+    id: "38babdf7-20c3-45fe-8b84-45a8a382c722",
+    name: "Raquel D'Amore",
+    city: "South Astridmouth",
+    state: "New York",
+    age: 49,
+    risk: "high",
+  },
+  {
+    order: 52,
+    id: "3f3c4e94-7155-4b1e-a351-8d6e1d18a187",
+    name: "Ms. Amy Collins",
+    city: "West Sanford",
+    state: "Maine",
+    age: 54,
+    risk: "low",
+  },
+  {
+    order: 53,
+    id: "a969f0d4-9847-4ccc-a03c-d1b316405b41",
+    name: "Marilyn Vandervort IV",
+    city: "Samsonborough",
+    state: "Montana",
+    age: 58,
+    risk: "medium",
+  },
+  {
+    order: 54,
+    id: "db056e8b-ca7c-4cef-8ae0-c05a0930a9e2",
+    name: "Ms. Kristin Okuneva",
+    city: "New Wilma",
+    state: "South Carolina",
+    age: 95,
+    risk: "medium",
+  },
+  {
+    order: 55,
+    id: "37cca6e0-d853-4ce5-a6d5-0591dceb0f31",
+    name: "Nicole Hane",
+    city: "Boehmfort",
+    state: "Iowa",
+    age: 23,
+    risk: "medium",
+  },
+  {
+    order: 56,
+    id: "1222feac-64df-4335-a462-817721366a16",
+    name: "Marian Kutch",
+    city: "Kimfort",
+    state: "Vermont",
+    age: 69,
+    risk: "high",
+  },
+  {
+    order: 57,
+    id: "de7d9cf8-3b4c-4268-9922-f644e4fcbbac",
+    name: "Mr. Cary Larson",
+    city: "Noahbury",
+    state: "Washington",
+    age: 46,
+    risk: "high",
+  },
+  {
+    order: 58,
+    id: "084b433d-84e4-4929-8fd6-ac1c47a235d3",
+    name: "Felicia Jones-Fritsch",
+    city: "Mandyport",
+    state: "Washington",
+    age: 89,
+    risk: "high",
+  },
+  {
+    order: 59,
+    id: "8d4acef0-67b5-4862-8d41-65dea98f8bd5",
+    name: "Ruth Koepp",
+    city: "Cedar Hill",
+    state: "North Carolina",
+    age: 97,
+    risk: "high",
+  },
+  {
+    order: 60,
+    id: "5dee93b7-b9b6-4f30-befa-b3c124ac884c",
+    name: "Lori Windler",
+    city: "North Denafield",
+    state: "Maryland",
+    age: 72,
+    risk: "high",
+  },
+  {
+    order: 61,
+    id: "62655293-0b67-4574-b63d-bcff4d8ca919",
+    name: "Marion Terry",
+    city: "Isadorestad",
+    state: "Kentucky",
+    age: 32,
+    risk: "medium",
+  },
+  {
+    order: 62,
+    id: "23b04edb-ea32-4586-acec-03d345ee0b06",
+    name: "Roosevelt Walsh",
+    city: "North Fausto",
+    state: "Illinois",
+    age: 95,
+    risk: "low",
+  },
+  {
+    order: 63,
+    id: "c450a75d-8ef2-4770-89ac-f36b686b7894",
+    name: "Mrs. Vivian Bernhard",
+    city: "New Emily",
+    state: "Oregon",
+    age: 27,
+    risk: "high",
+  },
+  {
+    order: 64,
+    id: "a0f79b46-58ce-4faa-af4d-d5052170f1ab",
+    name: "Benjamin Ryan",
+    city: "Bartellville",
+    state: "Mississippi",
+    age: 30,
+    risk: "medium",
+  },
+  {
+    order: 65,
+    id: "418fe2a4-3574-4749-967c-58b9d073111d",
+    name: "Alison Mohr",
+    city: "San Angelo",
+    state: "Idaho",
+    age: 40,
+    risk: "high",
+  },
+  {
+    order: 66,
+    id: "3d702da1-0c09-4dae-b70a-3ce92a2069e9",
+    name: "Gustavo Champlin",
+    city: "Quitzonboro",
+    state: "Utah",
+    age: 40,
+    risk: "low",
+  },
+  {
+    order: 67,
+    id: "70097612-2c8a-4ea0-9768-456dd6b0aa26",
+    name: "Roxanne Bechtelar",
+    city: "Yeseniaville",
+    state: "Washington",
+    age: 32,
+    risk: "low",
+  },
+  {
+    order: 68,
+    id: "e1ae0aa8-e4b4-434b-9bf9-ca935590021a",
+    name: "Ora Kutch",
+    city: "South Rethafort",
+    state: "Colorado",
+    age: 61,
+    risk: "high",
+  },
+  {
+    order: 69,
+    id: "43f9156d-0124-4d98-bed9-ff9d635e5154",
+    name: "Toni Fritsch",
+    city: "Fort Lawson",
+    state: "West Virginia",
+    age: 22,
+    risk: "low",
+  },
+  {
+    order: 70,
+    id: "107a4c47-1b0c-4203-bf9c-7e610d62e9f3",
+    name: "Kerry Hansen",
+    city: "Kuphalmouth",
+    state: "Massachusetts",
+    age: 64,
+    risk: "high",
+  },
+  {
+    order: 71,
+    id: "1c55f297-aeea-490a-ab47-f4b9d5956ae2",
+    name: "Brandi Ledner",
+    city: "West Jedediahville",
+    state: "Maryland",
+    age: 54,
+    risk: "low",
+  },
+  {
+    order: 72,
+    id: "da759266-6398-48fc-a89c-e43584f39dce",
+    name: "Natalie Wisozk",
+    city: "Maxinestead",
+    state: "Virginia",
+    age: 35,
+    risk: "low",
+  },
+  {
+    order: 73,
+    id: "1c7e2ce5-3de6-4e49-8fe4-5c0b5bcbd9cc",
+    name: "Dorothy Botsford",
+    city: "Frederikcester",
+    state: "Maine",
+    age: 97,
+    risk: "medium",
+  },
+  {
+    order: 74,
+    id: "6f29d2b9-3a68-4879-83fd-e29c643f0f9d",
+    name: "Angela Conn",
+    city: "South Norafort",
+    state: "Hawaii",
+    age: 52,
+    risk: "high",
+  },
+  {
+    order: 75,
+    id: "250652ad-e8c4-45f6-944e-e52e367bdc38",
+    name: "Roy Walker Jr.",
+    city: "Wilkinsoncester",
+    state: "Louisiana",
+    age: 26,
+    risk: "low",
+  },
+  {
+    order: 76,
+    id: "e78c8b9e-5167-43ab-97fc-8f6d817acb7a",
+    name: "Kristy Nicolas",
+    city: "Stoltenbergshire",
+    state: "North Dakota",
+    age: 57,
+    risk: "high",
+  },
+  {
+    order: 77,
+    id: "feb37af6-c57f-4d20-9521-e0265798f238",
+    name: "Gordon Cremin",
+    city: "Cummerataville",
+    state: "Kentucky",
+    age: 70,
+    risk: "high",
+  },
+  {
+    order: 78,
+    id: "36c3e293-ebb2-4826-ab8c-f244ed7283b3",
+    name: "Wilma Orn",
+    city: "Pacochabury",
+    state: "South Carolina",
+    age: 46,
+    risk: "medium",
+  },
+  {
+    order: 79,
+    id: "03e2b3f2-56ca-463e-ae7b-cd0f7a535957",
+    name: "Nicolas Trantow",
+    city: "North Onie",
+    state: "Oklahoma",
+    age: 47,
+    risk: "medium",
+  },
+  {
+    order: 80,
+    id: "f6864b9c-fadc-40db-9144-be5a6ed5f50b",
+    name: "Jesse Rippin",
+    city: "Killeen",
+    state: "Kansas",
+    age: 82,
+    risk: "medium",
+  },
+  {
+    order: 81,
+    id: "d5555bee-247a-4b15-a747-33c4f4ffe157",
+    name: "Nina Cruickshank V",
+    city: "East Tristian",
+    state: "Connecticut",
+    age: 83,
+    risk: "low",
+  },
+  {
+    order: 82,
+    id: "05d30dbd-267d-439a-a831-d247fbf6fde1",
+    name: "Sherman Schmidt",
+    city: "Port Lucas",
+    state: "Maryland",
+    age: 88,
+    risk: "low",
+  },
+  {
+    order: 83,
+    id: "c2f6d838-8c65-4670-abb8-9594ad03faa6",
+    name: "Dr. Gregory Walsh",
+    city: "South Devonte",
+    state: "Idaho",
+    age: 77,
+    risk: "low",
+  },
+  {
+    order: 84,
+    id: "c2041318-610d-47bc-86f9-09610f786612",
+    name: "Doreen Schimmel",
+    city: "Fort Collins",
+    state: "Iowa",
+    age: 48,
+    risk: "medium",
+  },
+  {
+    order: 85,
+    id: "09e4079c-5b8b-4522-a159-35768563f35e",
+    name: "Wayne Morar",
+    city: "Fort Rosemarie",
+    state: "Montana",
+    age: 19,
+    risk: "low",
+  },
+  {
+    order: 86,
+    id: "b1b9f5e9-ec96-43be-92e3-17bfb4bb4d56",
+    name: "Mr. Jordan Schroeder",
+    city: "North Jessicaboro",
+    state: "New Mexico",
+    age: 25,
+    risk: "medium",
+  },
+  {
+    order: 87,
+    id: "b34de79f-d906-4da2-ba32-8b4a38596301",
+    name: "Dr. Benny Schuppe",
+    city: "Gordonburgh",
+    state: "Florida",
+    age: 91,
+    risk: "high",
+  },
+  {
+    order: 88,
+    id: "ffe99215-3a55-4b65-ab4d-9e1bc893dc7d",
+    name: "Madeline Hahn",
+    city: "West Elise",
+    state: "West Virginia",
+    age: 73,
+    risk: "high",
+  },
+  {
+    order: 89,
+    id: "d6ca49a9-fd28-4edb-97ad-06b3a39f9196",
+    name: "Hugo Cole",
+    city: "Fairfield",
+    state: "Kentucky",
+    age: 38,
+    risk: "high",
+  },
+  {
+    order: 90,
+    id: "21a31b30-e125-4d68-81b9-deb83f147866",
+    name: "Jackie Prosacco",
+    city: "North Madie",
+    state: "New York",
+    age: 26,
+    risk: "medium",
+  },
+  {
+    order: 91,
+    id: "d5d75640-68d5-48c3-8fa5-48c326dab373",
+    name: "Dr. Ada Moen",
+    city: "Rowlett",
+    state: "Maine",
+    age: 18,
+    risk: "high",
+  },
+  {
+    order: 92,
+    id: "12228239-8d2f-4284-a84a-57fab4712f34",
+    name: "Shelley Schowalter DVM",
+    city: "South Mauricio",
+    state: "Maryland",
+    age: 55,
+    risk: "high",
+  },
+  {
+    order: 93,
+    id: "4fff095f-12a5-4831-8d31-67a92d29bb26",
+    name: "David Little",
+    city: "Strackechester",
+    state: "Mississippi",
+    age: 46,
+    risk: "high",
+  },
+  {
+    order: 94,
+    id: "d789882d-1879-422b-951f-5fc8179de402",
+    name: "Tanya Koepp IV",
+    city: "East Rae",
+    state: "Kentucky",
+    age: 97,
+    risk: "low",
+  },
+  {
+    order: 95,
+    id: "fc6e179f-6d74-4517-9816-76d8b42b1ea9",
+    name: "Ethel Hauck",
+    city: "Kertzmannboro",
+    state: "Wisconsin",
+    age: 25,
+    risk: "high",
+  },
+  {
+    order: 96,
+    id: "b75376c7-f69c-4b47-a822-0746ee3f3cb9",
+    name: "Donnie Frami",
+    city: "Alameda",
+    state: "Louisiana",
+    age: 55,
+    risk: "medium",
+  },
+  {
+    order: 97,
+    id: "2b99b54b-8f74-4c4a-abe3-8c94043d95d7",
+    name: "Alberto Hyatt",
+    city: "Port Junior",
+    state: "Wisconsin",
+    age: 90,
+    risk: "low",
+  },
+  {
+    order: 98,
+    id: "d9c0ab78-e7aa-41b1-ab40-d5b2f8a046b0",
+    name: "James Grimes",
+    city: "Freddyshire",
+    state: "Wyoming",
+    age: 49,
+    risk: "high",
+  },
+  {
+    order: 99,
+    id: "2d9a8a19-5416-4913-bcc2-409868a50024",
+    name: "Carlos Bode",
+    city: "Trompfort",
+    state: "Connecticut",
+    age: 42,
+    risk: "medium",
+  },
+  {
+    order: 100,
+    id: "021b7bab-6093-456a-bdb9-e4d1cf8214ce",
+    name: "Krista Hoeger",
+    city: "Emelyland",
+    state: "Nebraska",
+    age: 98,
+    risk: "medium",
+  },
+  {
+    order: 101,
+    id: "120b3eaf-0ec7-44d7-a8fc-8a061c46dbc1",
+    name: "Dr. Leona Grant Sr.",
+    city: "Jamalborough",
+    state: "Nevada",
+    age: 27,
+    risk: "medium",
+  },
+  {
+    order: 102,
+    id: "bfad1a5a-d3be-4c36-8369-336b948e7bbd",
+    name: "Mandy Boehm",
+    city: "Orenboro",
+    state: "Virginia",
+    age: 92,
+    risk: "high",
+  },
+  {
+    order: 103,
+    id: "38aace7d-8996-45b4-8ee6-6b504ffb6c55",
+    name: "Samantha Strosin",
+    city: "MacGyverton",
+    state: "South Carolina",
+    age: 23,
+    risk: "low",
+  },
+  {
+    order: 104,
+    id: "7544c3ad-cb0f-4fee-ab76-d6563f6e5ce9",
+    name: "Veronica Daniel PhD",
+    city: "La Crosse",
+    state: "Kansas",
+    age: 44,
+    risk: "high",
+  },
+  {
+    order: 105,
+    id: "b790953f-3a82-4497-8952-9f98acd16b8f",
+    name: "Frederick Goyette",
+    city: "Port Emiechester",
+    state: "Rhode Island",
+    age: 98,
+    risk: "high",
+  },
+  {
+    order: 106,
+    id: "f16fc323-9d9c-4fec-b64e-98c527f85d59",
+    name: "Simon Bode",
+    city: "The Woodlands",
+    state: "Colorado",
+    age: 63,
+    risk: "low",
+  },
+  {
+    order: 107,
+    id: "7c3ad30f-19d1-4cac-8d59-eee121520030",
+    name: "Lula Nitzsche",
+    city: "Wellington",
+    state: "South Carolina",
+    age: 57,
+    risk: "medium",
+  },
+  {
+    order: 108,
+    id: "2f69ca95-2062-4d0f-9069-01858beca5ba",
+    name: "Ora Kirlin",
+    city: "Virgiefort",
+    state: "Tennessee",
+    age: 72,
+    risk: "low",
+  },
+  {
+    order: 109,
+    id: "508200c4-020d-4060-9a78-2b1886cca75f",
+    name: "Cornelius Schaefer",
+    city: "Dominicchester",
+    state: "Tennessee",
+    age: 38,
+    risk: "low",
+  },
+  {
+    order: 110,
+    id: "5b24a664-8a08-4bad-b52a-0e0f68f66ffe",
+    name: "Dr. Marcus Kling-Yost",
+    city: "Crooksside",
+    state: "North Dakota",
+    age: 18,
+    risk: "high",
+  },
+  {
+    order: 111,
+    id: "134f237b-bf40-4bfe-9e60-0d65b1fc1ec1",
+    name: "Sabrina Krajcik Sr.",
+    city: "Glovercester",
+    state: "New York",
+    age: 72,
+    risk: "high",
+  },
+  {
+    order: 112,
+    id: "a63fc694-108f-4fe3-a2aa-da09300e4e81",
+    name: "Harvey Raynor",
+    city: "Bettyland",
+    state: "Missouri",
+    age: 87,
+    risk: "medium",
+  },
+  {
+    order: 113,
+    id: "0376536e-5df7-4271-b9b7-fdad30359752",
+    name: "Doug Greenholt",
+    city: "North Celestinofort",
+    state: "Oklahoma",
+    age: 60,
+    risk: "medium",
+  },
+  {
+    order: 114,
+    id: "d4dce7c2-657d-486a-82e8-f6fc23f972c6",
+    name: "Tasha VonRueden",
+    city: "West Alfordberg",
+    state: "New Hampshire",
+    age: 20,
+    risk: "medium",
+  },
+  {
+    order: 115,
+    id: "e61960cd-bc35-41c7-b4d1-5e1485935f00",
+    name: "Mabel Wiza",
+    city: "Torphyburgh",
+    state: "Indiana",
+    age: 30,
+    risk: "low",
+  },
+  {
+    order: 116,
+    id: "d3f94cb1-3425-48fd-a714-fbf4c8bfa112",
+    name: "Glenn Murazik",
+    city: "Fort Jaimeside",
+    state: "Rhode Island",
+    age: 36,
+    risk: "medium",
+  },
+  {
+    order: 117,
+    id: "63556c18-c65a-4aaa-ba75-357702fc90a5",
+    name: "Nicole Schultz",
+    city: "Peabody",
+    state: "Missouri",
+    age: 25,
+    risk: "medium",
+  },
+  {
+    order: 118,
+    id: "a3a30238-64f7-4bf5-aa11-73956e2c4ccf",
+    name: "Tyler Moen V",
+    city: "South Cora",
+    state: "West Virginia",
+    age: 81,
+    risk: "low",
+  },
+  {
+    order: 119,
+    id: "f9641224-0dcf-45d3-b614-88ef5a33779d",
+    name: "Julius Haag",
+    city: "South Casimirboro",
+    state: "Alaska",
+    age: 28,
+    risk: "high",
+  },
+  {
+    order: 120,
+    id: "895a6558-dfd3-4b82-8ddf-63c55ca00500",
+    name: "Eunice Dach",
+    city: "Swaniawskiburgh",
+    state: "Montana",
+    age: 60,
+    risk: "high",
+  },
+  {
+    order: 121,
+    id: "1b9fd626-73ba-466a-b358-22a5237b7be5",
+    name: "Kristi Bernier",
+    city: "West Kenyattastead",
+    state: "Missouri",
+    age: 27,
+    risk: "high",
+  },
+  {
+    order: 122,
+    id: "3bf93192-0092-4969-8025-fe85e74a878b",
+    name: "Mrs. Meredith Schaefer",
+    city: "Port Norris",
+    state: "Pennsylvania",
+    age: 71,
+    risk: "high",
+  },
+  {
+    order: 123,
+    id: "ecf8e122-71e0-4d17-9cb7-26b15029c287",
+    name: "Sean Satterfield",
+    city: "Abernathyborough",
+    state: "Massachusetts",
+    age: 48,
+    risk: "low",
+  },
+  {
+    order: 124,
+    id: "79392c54-a933-4073-ad83-e9a20eb80cc3",
+    name: "Leona Effertz MD",
+    city: "Fort Crawfordchester",
+    state: "Hawaii",
+    age: 87,
+    risk: "medium",
+  },
+  {
+    order: 125,
+    id: "21af25ea-4fa9-46dd-8d0d-dd4c0ef82b9e",
+    name: "Andrew Schinner V",
+    city: "East Glennafort",
+    state: "California",
+    age: 84,
+    risk: "low",
+  },
+  {
+    order: 126,
+    id: "4b68f2eb-2952-4392-b96a-cc84b7cd798d",
+    name: "Silvia McCullough",
+    city: "West Seneca",
+    state: "Vermont",
+    age: 66,
+    risk: "high",
+  },
+  {
+    order: 127,
+    id: "b5acfe2f-fb43-4c35-9b6b-b7118eee61bf",
+    name: "Mrs. June Robel",
+    city: "Trantowbury",
+    state: "Iowa",
+    age: 75,
+    risk: "medium",
+  },
+  {
+    order: 128,
+    id: "4c6872ce-ae6b-40c7-bd81-396b26ddd35e",
+    name: "Katherine Kuphal",
+    city: "New Arnaldoside",
+    state: "Indiana",
+    age: 33,
+    risk: "medium",
+  },
+  {
+    order: 129,
+    id: "42244329-c344-4333-8ca7-980784df1099",
+    name: "Guadalupe Hayes",
+    city: "Collierside",
+    state: "Arizona",
+    age: 28,
+    risk: "low",
+  },
+  {
+    order: 130,
+    id: "37997d64-b87c-494e-9197-51c3851a961b",
+    name: "Brandi Beier",
+    city: "Rosenbaumshire",
+    state: "Montana",
+    age: 35,
+    risk: "high",
+  },
+  {
+    order: 131,
+    id: "20617263-4256-4053-bd33-80a9d108bde5",
+    name: "Ira Schiller",
+    city: "East Geraldine",
+    state: "Arkansas",
+    age: 87,
+    risk: "low",
+  },
+  {
+    order: 132,
+    id: "f4344a84-8a0e-48d4-8a4c-0fe24dd54249",
+    name: "Rene Torp",
+    city: "North Shaniacester",
+    state: "South Carolina",
+    age: 53,
+    risk: "medium",
+  },
+  {
+    order: 133,
+    id: "329c823b-dc98-4ad5-b866-8249b223c739",
+    name: "Beulah Prohaska",
+    city: "North Henri",
+    state: "Idaho",
+    age: 33,
+    risk: "medium",
+  },
+  {
+    order: 134,
+    id: "5a633cb6-77e0-495a-b9cb-2bd9e3c921fc",
+    name: "Raquel Glover",
+    city: "Rutherfordcester",
+    state: "Delaware",
+    age: 81,
+    risk: "low",
+  },
+  {
+    order: 135,
+    id: "f33377a1-ec5c-4b17-acd5-ff01f9ef549a",
+    name: "Lillie Bergnaum",
+    city: "Camden",
+    state: "Florida",
+    age: 23,
+    risk: "medium",
+  },
+  {
+    order: 136,
+    id: "2a0abf60-8c95-4334-8e65-41b9f9aea934",
+    name: "Blanche Rath",
+    city: "Cuyahoga Falls",
+    state: "Alaska",
+    age: 62,
+    risk: "low",
+  },
+  {
+    order: 137,
+    id: "ff8a2b6b-c0ac-4854-9d8e-468aa0c9c7df",
+    name: "Andres Sanford DVM",
+    city: "Hermanshire",
+    state: "Alabama",
+    age: 85,
+    risk: "high",
+  },
+  {
+    order: 138,
+    id: "78507d20-f4d2-4dc6-aeb8-688c5375c1eb",
+    name: "Jenny Cassin I",
+    city: "St. Louis",
+    state: "Florida",
+    age: 82,
+    risk: "low",
+  },
+  {
+    order: 139,
+    id: "8e5cc328-e048-4d24-9562-50834002c99a",
+    name: "Darla Corkery III",
+    city: "North Sigmund",
+    state: "Alaska",
+    age: 52,
+    risk: "low",
+  },
+  {
+    order: 140,
+    id: "6e74d62a-08a7-4060-ac78-723fef554369",
+    name: "Mr. Andres Fritsch",
+    city: "Mullershire",
+    state: "New Hampshire",
+    age: 74,
+    risk: "low",
+  },
+  {
+    order: 141,
+    id: "8d06d9ed-ee13-4c2d-9952-7d919ddba8f9",
+    name: "Cesar Effertz",
+    city: "South Kirstin",
+    state: "Oklahoma",
+    age: 63,
+    risk: "low",
+  },
+  {
+    order: 142,
+    id: "e8ed5718-2b8a-428f-92f5-98bd2aecefa2",
+    name: "Norman Von",
+    city: "Fort Dovieview",
+    state: "Oklahoma",
+    age: 93,
+    risk: "high",
+  },
+  {
+    order: 143,
+    id: "28323a88-867e-4989-a975-b2c15ae117d6",
+    name: "Gilbert Cremin",
+    city: "Dayanaborough",
+    state: "California",
+    age: 42,
+    risk: "medium",
+  },
+  {
+    order: 144,
+    id: "6def70a2-6d40-43cd-bb31-b936bdcb51e4",
+    name: "Nicolas Christiansen",
+    city: "Westborough",
+    state: "Indiana",
+    age: 29,
+    risk: "high",
+  },
+  {
+    order: 145,
+    id: "d84c1d33-c416-4cd9-a8e9-81e8a5f54c43",
+    name: "Cecelia Durgan-Stamm I",
+    city: "Visalia",
+    state: "New York",
+    age: 22,
+    risk: "medium",
+  },
+  {
+    order: 146,
+    id: "cc536114-3323-45bf-b980-aa952e441355",
+    name: "Chad Huels",
+    city: "Fountainebleau",
+    state: "Maryland",
+    age: 80,
+    risk: "high",
+  },
+  {
+    order: 147,
+    id: "a183e00e-e983-4ec4-a0d7-28fa3d839d98",
+    name: "Noel Bayer-Raynor",
+    city: "Naperville",
+    state: "Michigan",
+    age: 71,
+    risk: "low",
+  },
+  {
+    order: 148,
+    id: "2d02375d-ac1f-4d78-a90f-e9a99be143d9",
+    name: "Mr. Leo Feil",
+    city: "Lake Marshallboro",
+    state: "New Jersey",
+    age: 46,
+    risk: "low",
+  },
+  {
+    order: 149,
+    id: "46e39993-14d9-45f9-a58a-51ed44d1f2cf",
+    name: "Marco Rath",
+    city: "Lake Damarisview",
+    state: "Alabama",
+    age: 25,
+    risk: "medium",
+  },
+  {
+    order: 150,
+    id: "eaac5ba1-50b6-46d7-86bd-78a5e4e93891",
+    name: "Terence Vandervort",
+    city: "Philadelphia",
+    state: "Idaho",
+    age: 30,
+    risk: "low",
+  },
+  {
+    order: 151,
+    id: "82c596f1-6f8d-464b-8746-37cab5b3a955",
+    name: "Steven Gibson III",
+    city: "Port Lessieburgh",
+    state: "Michigan",
+    age: 61,
+    risk: "medium",
+  },
+  {
+    order: 152,
+    id: "6ee0e5d9-d82c-4e29-8e49-c879c422b572",
+    name: "Jenny Kutch",
+    city: "Irwinboro",
+    state: "Louisiana",
+    age: 78,
+    risk: "high",
+  },
+  {
+    order: 153,
+    id: "e799e19f-e704-4e08-929f-4d35a1e3c347",
+    name: "Albert Kihn",
+    city: "South Marquis",
+    state: "New Hampshire",
+    age: 33,
+    risk: "medium",
+  },
+  {
+    order: 154,
+    id: "608d06fc-6952-44bd-809b-db8b9398cedc",
+    name: "Christine Satterfield",
+    city: "Angelicatown",
+    state: "Oregon",
+    age: 25,
+    risk: "high",
+  },
+  {
+    order: 155,
+    id: "ad1f7bb5-894e-4fa5-b1ff-d66c14960ef1",
+    name: "Colleen Bartoletti",
+    city: "North Alverta",
+    state: "Indiana",
+    age: 55,
+    risk: "low",
+  },
+  {
+    order: 156,
+    id: "2999d3dc-22a9-4830-9c3f-5ace33b3a299",
+    name: "Dr. Jody Fisher",
+    city: "Harveyside",
+    state: "Arkansas",
+    age: 32,
+    risk: "high",
+  },
+  {
+    order: 157,
+    id: "58cf6f57-e4c6-4d1f-a172-abddbfeacef1",
+    name: "Miss Marta D'Amore",
+    city: "Catharineview",
+    state: "Alaska",
+    age: 21,
+    risk: "high",
+  },
+  {
+    order: 158,
+    id: "1f81b31a-bba7-400a-ba92-71f489c93fd5",
+    name: "Darrell West",
+    city: "Marianoshire",
+    state: "New Hampshire",
+    age: 30,
+    risk: "low",
+  },
+  {
+    order: 159,
+    id: "850f112e-aa45-486b-bb74-c5d7fb4fe258",
+    name: "Myron Schmitt",
+    city: "Kalebbury",
+    state: "Connecticut",
+    age: 46,
+    risk: "low",
+  },
+  {
+    order: 160,
+    id: "0ed4118c-223e-4330-b0b2-950884c52962",
+    name: "Kay Ferry III",
+    city: "Shayleeport",
+    state: "Kentucky",
+    age: 53,
+    risk: "medium",
+  },
+  {
+    order: 161,
+    id: "62ab7162-c488-47e8-a8e9-549f343e70c5",
+    name: "Geoffrey Mayert",
+    city: "Noblesville",
+    state: "South Carolina",
+    age: 46,
+    risk: "high",
+  },
+  {
+    order: 162,
+    id: "d35452b3-43ca-48e6-bcdd-61e8066ea2ac",
+    name: "Daisy Blanda",
+    city: "Paulton",
+    state: "Kentucky",
+    age: 87,
+    risk: "high",
+  },
+  {
+    order: 163,
+    id: "f66a3afe-92c3-43c7-84db-9430ae703822",
+    name: "Lindsay Stracke",
+    city: "Schulistside",
+    state: "New York",
+    age: 42,
+    risk: "medium",
+  },
+  {
+    order: 164,
+    id: "14d84b7e-c61d-4fe9-a88a-758d19b065b4",
+    name: "Derrick Schulist",
+    city: "Rosinatown",
+    state: "Nevada",
+    age: 47,
+    risk: "low",
+  },
+  {
+    order: 165,
+    id: "19970a29-2075-42c0-a3ad-ed018cac00d5",
+    name: "Latoya Kub",
+    city: "South Rollinport",
+    state: "South Dakota",
+    age: 47,
+    risk: "low",
+  },
+  {
+    order: 166,
+    id: "17a195ad-cfc5-4801-97dc-8d0deceba057",
+    name: "Mr. Mike Bechtelar",
+    city: "East Jeremiemouth",
+    state: "New Mexico",
+    age: 59,
+    risk: "low",
+  },
+  {
+    order: 167,
+    id: "2390b432-c739-4fcd-98a7-de3d18581c17",
+    name: "Orville Rowe",
+    city: "Hendersonville",
+    state: "Connecticut",
+    age: 57,
+    risk: "high",
+  },
+  {
+    order: 168,
+    id: "eaa0b563-6bb6-436a-94a6-352c292fd24a",
+    name: "Camille Kerluke",
+    city: "Port Lyda",
+    state: "Florida",
+    age: 38,
+    risk: "high",
+  },
+  {
+    order: 169,
+    id: "f6e1cbfa-5b39-4506-b03a-ce5275dff60d",
+    name: "Miss Antonia Rodriguez",
+    city: "Amarillo",
+    state: "Wyoming",
+    age: 72,
+    risk: "high",
+  },
+  {
+    order: 170,
+    id: "9f76ac34-5d6d-402c-b572-fec675d23c74",
+    name: "Willard Turner",
+    city: "New Thelma",
+    state: "New Jersey",
+    age: 53,
+    risk: "low",
+  },
+  {
+    order: 171,
+    id: "1e6b930a-a69e-40eb-90c6-37578bdb66a8",
+    name: "Annette Berge",
+    city: "Carson",
+    state: "Wisconsin",
+    age: 57,
+    risk: "low",
+  },
+  {
+    order: 172,
+    id: "3fa71029-8ae2-4db4-b0c2-ebb51c22d368",
+    name: "Katrina Roberts I",
+    city: "Fort Odie",
+    state: "Arkansas",
+    age: 76,
+    risk: "high",
+  },
+  {
+    order: 173,
+    id: "12d7fa49-bae2-4cc8-b126-9d653be473ef",
+    name: "Sylvia Rau",
+    city: "Oxnard",
+    state: "Hawaii",
+    age: 25,
+    risk: "high",
+  },
+  {
+    order: 174,
+    id: "2dbb95ed-c460-4594-a1a9-1c06932e2e6f",
+    name: "Gene Schulist",
+    city: "Fort Libbieboro",
+    state: "Oklahoma",
+    age: 51,
+    risk: "low",
+  },
+  {
+    order: 175,
+    id: "800e2b2b-cd4f-4007-99ce-a14c325b6bd0",
+    name: "Richard Kassulke",
+    city: "Riverton",
+    state: "Oklahoma",
+    age: 84,
+    risk: "high",
+  },
+  {
+    order: 176,
+    id: "26e61243-d236-4a14-a1ba-a03d7ce5a530",
+    name: "Yvette Orn",
+    city: "Royal Oak",
+    state: "Iowa",
+    age: 20,
+    risk: "high",
+  },
+  {
+    order: 177,
+    id: "7897807e-04ff-469a-a7ff-a5ff40ccdf7c",
+    name: "Sherri Hand",
+    city: "New Zoila",
+    state: "Nevada",
+    age: 34,
+    risk: "medium",
+  },
+  {
+    order: 178,
+    id: "785eb865-78bf-4676-b087-9d2c5622d8f4",
+    name: "Tonya Simonis",
+    city: "Jeremiefort",
+    state: "Texas",
+    age: 58,
+    risk: "low",
+  },
+  {
+    order: 179,
+    id: "c0f0ce78-d187-43cf-9406-782843972ef7",
+    name: "Sandy Schulist-Rowe",
+    city: "Heaneyville",
+    state: "Florida",
+    age: 78,
+    risk: "high",
+  },
+  {
+    order: 180,
+    id: "b8111699-6d4d-402b-867b-e4ed9ee4a0d1",
+    name: "Michele Crona",
+    city: "South Nelle",
+    state: "South Carolina",
+    age: 46,
+    risk: "low",
+  },
+  {
+    order: 181,
+    id: "422977f9-3c22-4ef8-8a6a-a4f09245bc31",
+    name: "Lucy Welch",
+    city: "West Shannon",
+    state: "Tennessee",
+    age: 47,
+    risk: "medium",
+  },
+  {
+    order: 182,
+    id: "5de4ada2-f04f-4487-9443-b1c015db5508",
+    name: "Thelma Toy",
+    city: "Boca Raton",
+    state: "Connecticut",
+    age: 31,
+    risk: "high",
+  },
+  {
+    order: 183,
+    id: "afc75679-ae2d-4ef3-a7a1-9f2fc6228c78",
+    name: "Amelia Vandervort-Howe",
+    city: "Miami Beach",
+    state: "Massachusetts",
+    age: 58,
+    risk: "high",
+  },
+  {
+    order: 184,
+    id: "23e37a07-0a7b-476a-a476-829a1eaff962",
+    name: "Loretta Ernser V",
+    city: "Euless",
+    state: "New York",
+    age: 35,
+    risk: "low",
+  },
+  {
+    order: 185,
+    id: "7086ae68-6d7d-45c0-aa4f-7d10d946283a",
+    name: "Phyllis Grimes",
+    city: "New Bretcester",
+    state: "California",
+    age: 43,
+    risk: "low",
+  },
+  {
+    order: 186,
+    id: "582429f2-dfdf-40b3-a164-ee5f665391e8",
+    name: "Eloise Von",
+    city: "Violacester",
+    state: "Alabama",
+    age: 31,
+    risk: "medium",
+  },
+  {
+    order: 187,
+    id: "969de9bc-47ef-47cb-b716-a74c0abbf05c",
+    name: "Lula Schuster",
+    city: "Hazleside",
+    state: "Arkansas",
+    age: 73,
+    risk: "high",
+  },
+  {
+    order: 188,
+    id: "55b28840-d93c-43b4-b552-f4256dfdf389",
+    name: "Dr. Bertha Volkman",
+    city: "New Bethelhaven",
+    state: "Alabama",
+    age: 38,
+    risk: "medium",
+  },
+  {
+    order: 189,
+    id: "cb1d5f44-0d3e-4bdd-8ad4-ce43e459870b",
+    name: "Marco Collier",
+    city: "New Marlon",
+    state: "Iowa",
+    age: 24,
+    risk: "high",
+  },
+  {
+    order: 190,
+    id: "a0a3596e-a259-4c9e-bce0-b163a1156363",
+    name: "Alex Cormier III",
+    city: "Kirstenfort",
+    state: "Pennsylvania",
+    age: 98,
+    risk: "low",
+  },
+  {
+    order: 191,
+    id: "9f0c5912-be82-48e0-9361-434b4d2afdfd",
+    name: "Kay Thompson",
+    city: "Visalia",
+    state: "Kentucky",
+    age: 91,
+    risk: "medium",
+  },
+  {
+    order: 192,
+    id: "370c711c-ff45-41d3-a911-a176c5e6ec57",
+    name: "Mae Daugherty",
+    city: "Fort Wanda",
+    state: "Kansas",
+    age: 68,
+    risk: "high",
+  },
+  {
+    order: 193,
+    id: "6e274204-ee56-4c42-b058-d90c2ca4d2f9",
+    name: "Nancy Adams",
+    city: "Edgarport",
+    state: "Louisiana",
+    age: 90,
+    risk: "medium",
+  },
+  {
+    order: 194,
+    id: "94c130c1-2926-42ff-bae0-65f5daf0e04e",
+    name: "Tara Douglas",
+    city: "South Reina",
+    state: "Mississippi",
+    age: 78,
+    risk: "low",
+  },
+  {
+    order: 195,
+    id: "7d817f75-dea8-4fe4-b255-b09dc7adeea0",
+    name: "Miss Patricia Bradtke MD",
+    city: "Port Eusebiofort",
+    state: "Montana",
+    age: 20,
+    risk: "low",
+  },
+  {
+    order: 196,
+    id: "61e3358f-55bc-4aa6-80f9-fd418a428539",
+    name: "Robert Schowalter",
+    city: "Lake Filiberto",
+    state: "North Dakota",
+    age: 44,
+    risk: "high",
+  },
+  {
+    order: 197,
+    id: "4115db11-7c19-43cd-870b-143fc26cd3d8",
+    name: "Tyler Cole",
+    city: "West Dana",
+    state: "Connecticut",
+    age: 86,
+    risk: "low",
+  },
+  {
+    order: 198,
+    id: "946dfdaa-6fc9-4cf9-b1fe-b9d4ef32dd4f",
+    name: "Dora Muller",
+    city: "Irvine",
+    state: "Kansas",
+    age: 25,
+    risk: "high",
+  },
+  {
+    order: 199,
+    id: "34fc92c9-ac5a-4a8d-965d-412d47f640b8",
+    name: "Paulette Reichert",
+    city: "Dublin",
+    state: "Hawaii",
+    age: 45,
+    risk: "medium",
+  },
+];

From d85b158532cf99e7ed4b171fec2d482b51abb118 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Mon, 17 Jun 2024 21:21:25 -0400
Subject: [PATCH 03/15] feat: add enableWrapping for backwards compat with
 hasTextWrapping

---
 package.json                                                  | 2 +-
 .../src/labs/DataComponents/TableContent.tsx                  | 4 +++-
 .../odyssey-react-mui/src/labs/DataComponents/dataTypes.ts    | 4 ++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index cf77ef5398..817b1bc372 100644
--- a/package.json
+++ b/package.json
@@ -85,4 +85,4 @@
   },
   "version": "0.6.0",
   "packageManager": "yarn@4.1.0"
-}
\ No newline at end of file
+}
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index a52cd77c89..5057c479e6 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -182,7 +182,9 @@ const TableContent = ({
   const defaultCell = useCallback(
     ({ cell }: { cell: DataTableCell<MRT_RowData> }) => {
       const value = cell.getValue<string>();
-      const hasTextWrapping = cell.column.columnDef.hasTextWrapping;
+      const hasTextWrapping =
+        cell.column.columnDef.hasTextWrapping ||
+        cell.column.columnDef.enableWrapping;
 
       return hasTextWrapping ? (
         value
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
index a04149e5af..4f5ea6a60d 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
@@ -29,6 +29,10 @@ export type DataQueryParamsType = {
 };
 
 export type DataTableColumn<T extends MRT_RowData> = MRT_ColumnDef<T> & {
+  /**
+   * @deprecated use hasTextWrapping instead of enableWrapping
+   */
+  enableWrapping?: boolean;
   hasTextWrapping?: boolean;
 };
 

From cbb0549e7ef03a635c009c0ee46f5fd12853ab9f Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Thu, 20 Jun 2024 16:11:09 -0400
Subject: [PATCH 04/15] refactor: alphabetize all the props

---
 .../labs/DataComponents/BulkActionsMenu.tsx   |  12 +-
 .../src/labs/DataComponents/DataStack.tsx     |  62 +++++------
 .../src/labs/DataComponents/DataTable.tsx     |  74 ++++++-------
 .../src/labs/DataComponents/DataView.tsx      | 104 +++++++++---------
 .../labs/DataComponents/LayoutSwitcher.tsx    |   6 +-
 .../src/labs/DataComponents/RowActions.tsx    |  12 +-
 .../src/labs/DataComponents/StackCard.tsx     |  21 ++--
 .../src/labs/DataComponents/StackContent.tsx  |  41 ++++---
 .../src/labs/DataComponents/TableContent.tsx  |  78 ++++++-------
 .../src/labs/DataComponents/TableSettings.tsx |   8 +-
 .../src/labs/DataComponents/componentTypes.ts |  53 ++++-----
 .../src/labs/DataComponents/dataTypes.ts      |   6 +-
 .../src/labs/DataComponents/fetchData.ts      |  19 ++--
 .../labs/DataComponents/tableConstants.tsx    |   4 +-
 .../DataComponents/useFilterConversion.ts     |   4 +-
 15 files changed, 245 insertions(+), 259 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
index cbe327bf4b..a737e89ebb 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
@@ -53,26 +53,26 @@ const BulkActionMenu = ({
     >
       {selectedRowCount > 0 && (
         <MenuButton
+          ariaLabel="More actions"
+          buttonLabel={`${selectedRowCount} selected`}
           buttonVariant="primary"
           endIcon={<ChevronDownIcon />}
-          buttonLabel={`${selectedRowCount} selected`}
-          ariaLabel="More actions"
         >
           {menuItems?.(rowSelection)}
         </MenuButton>
       )}
       <Box>
         <Button
-          variant="secondary"
-          label="Select all"
           isDisabled={selectedRowCount === 20}
+          label="Select all"
           onClick={handleSelectAll}
+          variant="secondary"
         />
         <Button
-          variant="secondary"
-          label="Select none"
           isDisabled={selectedRowCount === 0}
+          label="Select none"
           onClick={handleSelectNone}
+          variant="secondary"
         />
       </Box>
     </Box>
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
index 395e4efc28..4a317bd775 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
@@ -27,62 +27,62 @@ export type DataStackProps = UniversalProps &
 
 const DataStack = ({
   availableLayouts,
-  getData,
-  hasRowSelection,
-  onChangeRowSelection,
   bulkActionMenuItems,
-  hasPagination,
+  cardProps,
   currentPage,
-  paginationType,
-  resultsPerPage,
-  totalRows,
+  emptyPlaceholder,
+  errorMessage,
+  filters,
+  getData,
   hasFilters,
+  hasPagination,
+  hasRowReordering,
+  hasRowSelection,
   hasSearch,
   hasSearchSubmitButton,
-  hasRowReordering,
-  isRowReorderingDisabled,
-  filters,
-  searchDelayTime,
-  errorMessage,
-  emptyPlaceholder,
-  noResultsPlaceholder,
-  isLoading,
   isEmpty,
+  isLoading,
   isNoResults,
-  cardProps,
+  isRowReorderingDisabled,
   maxGridColumns,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  paginationType,
+  resultsPerPage,
   rowActionMenuItems,
+  searchDelayTime,
+  totalRows,
 }: DataStackProps) => {
   return (
     <DataView
       availableLayouts={availableLayouts}
-      getData={getData}
-      hasRowSelection={hasRowSelection}
-      onChangeRowSelection={onChangeRowSelection}
       bulkActionMenuItems={bulkActionMenuItems}
-      hasPagination={hasPagination}
       currentPage={currentPage}
-      paginationType={paginationType}
-      resultsPerPage={resultsPerPage}
-      totalRows={totalRows}
+      emptyPlaceholder={emptyPlaceholder}
+      errorMessage={errorMessage}
+      filters={filters}
+      getData={getData}
       hasFilters={hasFilters}
+      hasPagination={hasPagination}
+      hasRowReordering={hasRowReordering}
       hasSearch={hasSearch}
       hasSearchSubmitButton={hasSearchSubmitButton}
-      hasRowReordering={hasRowReordering}
-      isRowReorderingDisabled={isRowReorderingDisabled}
-      filters={filters}
-      searchDelayTime={searchDelayTime}
-      errorMessage={errorMessage}
-      emptyPlaceholder={emptyPlaceholder}
-      noResultsPlaceholder={noResultsPlaceholder}
-      isLoading={isLoading}
+      hasRowSelection={hasRowSelection}
       isEmpty={isEmpty}
+      isLoading={isLoading}
       isNoResults={isNoResults}
+      isRowReorderingDisabled={isRowReorderingDisabled}
+      noResultsPlaceholder={noResultsPlaceholder}
+      onChangeRowSelection={onChangeRowSelection}
+      paginationType={paginationType}
+      resultsPerPage={resultsPerPage}
+      searchDelayTime={searchDelayTime}
       stackOptions={{
         cardProps,
         maxGridColumns,
         rowActionMenuItems,
       }}
+      totalRows={totalRows}
     />
   );
 };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
index 05c2b65015..2e4f245bd9 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
@@ -17,74 +17,74 @@ import { TableProps, UniversalProps } from "./componentTypes";
 export type DataTableProps = UniversalProps & TableProps;
 
 const DataTable = ({
-  getData,
-  hasRowSelection,
-  onChangeRowSelection,
   bulkActionMenuItems,
-  hasPagination,
+  columns,
   currentPage,
-  paginationType,
-  resultsPerPage,
-  totalRows,
+  emptyPlaceholder,
+  errorMessage,
+  filters,
+  getData,
+  hasChangeableDensity,
+  hasColumnResizing,
+  hasColumnVisibility,
+  initialDensity,
   hasFilters,
+  hasPagination,
+  hasRowReordering,
+  hasRowSelection,
   hasSearch,
   hasSearchSubmitButton,
-  hasRowReordering,
-  isRowReorderingDisabled,
-  filters,
-  searchDelayTime,
-  errorMessage,
-  emptyPlaceholder,
-  noResultsPlaceholder,
+  hasSorting,
   isLoading,
   isEmpty,
   isNoResults,
-  columns,
-  initialDensity,
-  hasChangeableDensity,
-  hasColumnResizing,
-  hasColumnVisibility,
+  isRowReorderingDisabled,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  paginationType,
   renderDetailPanel,
+  resultsPerPage,
   rowActionButtons,
   rowActionMenuItems,
-  hasSorting,
+  searchDelayTime,
+  totalRows,
 }: DataTableProps) => {
   return (
     <DataView
       availableLayouts={["table"]}
-      getData={getData}
-      hasRowSelection={hasRowSelection}
-      onChangeRowSelection={onChangeRowSelection}
       bulkActionMenuItems={bulkActionMenuItems}
-      hasPagination={hasPagination}
       currentPage={currentPage}
-      paginationType={paginationType}
-      resultsPerPage={resultsPerPage}
-      totalRows={totalRows}
+      emptyPlaceholder={emptyPlaceholder}
+      errorMessage={errorMessage}
+      filters={filters}
+      getData={getData}
       hasFilters={hasFilters}
+      hasPagination={hasPagination}
+      hasRowReordering={hasRowReordering}
+      hasRowSelection={hasRowSelection}
       hasSearch={hasSearch}
       hasSearchSubmitButton={hasSearchSubmitButton}
-      hasRowReordering={hasRowReordering}
-      isRowReorderingDisabled={isRowReorderingDisabled}
-      filters={filters}
-      searchDelayTime={searchDelayTime}
-      errorMessage={errorMessage}
-      emptyPlaceholder={emptyPlaceholder}
-      noResultsPlaceholder={noResultsPlaceholder}
-      isLoading={isLoading}
       isEmpty={isEmpty}
+      isLoading={isLoading}
       isNoResults={isNoResults}
+      isRowReorderingDisabled={isRowReorderingDisabled}
+      noResultsPlaceholder={noResultsPlaceholder}
+      onChangeRowSelection={onChangeRowSelection}
+      paginationType={paginationType}
+      resultsPerPage={resultsPerPage}
+      searchDelayTime={searchDelayTime}
       tableOptions={{
         columns,
-        initialDensity,
         hasChangeableDensity,
         hasColumnResizing,
         hasColumnVisibility,
+        hasSorting,
+        initialDensity,
         renderDetailPanel,
         rowActionButtons,
         rowActionMenuItems,
-        hasSorting,
       }}
+      totalRows={totalRows}
     />
   );
 };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
index 2d365ae245..638278fbaf 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
@@ -44,33 +44,33 @@ import {
 export type DataViewProps = UniversalProps & ViewProps<Layout>;
 
 const DataView = ({
-  getData: getDataFn,
-  getRowId: getRowIdProp,
   availableLayouts = allAvailableLayouts,
-  initialLayout,
-  hasSearch,
-  hasFilters,
-  hasSearchSubmitButton,
-  searchDelayTime,
   bulkActionMenuItems,
-  hasPagination,
-  paginationType = "paged",
-  resultsPerPage = 20,
   currentPage = 1,
-  totalRows,
+  emptyPlaceholder,
   errorMessage: errorMessageProp,
+  getData: getDataFn,
+  getRowId: getRowIdProp,
+  hasFilters,
+  hasPagination,
+  hasSearch,
+  hasSearchSubmitButton,
   hasRowReordering,
-  isRowReorderingDisabled,
-  onReorderRows,
-  emptyPlaceholder,
-  noResultsPlaceholder,
-  tableOptions,
-  stackOptions,
   hasRowSelection,
-  onChangeRowSelection,
+  initialLayout,
   isEmpty: isEmptyProp,
   isLoading: isLoadingProp,
   isNoResults: isNoResultsProp,
+  isRowReorderingDisabled,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  onReorderRows,
+  paginationType = "paged",
+  resultsPerPage = 20,
+  searchDelayTime,
+  stackOptions,
+  tableOptions,
+  totalRows,
 }: DataViewProps) => {
   const [currentLayout, setCurrentLayout] = useState<Layout>(
     initialLayout ?? availableLayouts[0],
@@ -103,9 +103,9 @@ const DataView = ({
   });
 
   const [tableState, setTableState] = useState<TableState>({
-    rowDensity: tableOptions?.initialDensity ?? densityValues[0],
     columnSorting: [],
     columnVisibility: {},
+    rowDensity: tableOptions?.initialDensity ?? densityValues[0],
   });
 
   const hasMultipleAvailableLayouts = useMemo(
@@ -198,8 +198,8 @@ const DataView = ({
   const emptyState = useMemo(() => {
     const noResultsInnerContent = noResultsPlaceholder || (
       <EmptyState
-        heading={t("table.noresults.heading")}
         description={t("table.noresults.text")}
+        heading={t("table.noresults.heading")}
       />
     );
 
@@ -219,16 +219,16 @@ const DataView = ({
       <>
         {currentLayout === "table" && tableOptions && (
           <TableSettings
+            setTableState={setTableState}
             tableOptions={tableOptions}
             tableState={tableState}
-            setTableState={setTableState}
           />
         )}
 
         {hasMultipleAvailableLayouts && (
           <LayoutSwitcher
-            currentLayout={currentLayout}
             availableLayouts={availableLayouts}
+            currentLayout={currentLayout}
             setCurrentLayout={setCurrentLayout}
           />
         )}
@@ -276,13 +276,13 @@ const DataView = ({
 
       {shouldShowFilters && (
         <DataFilters
-          onChangeSearch={hasSearch ? setSearch : undefined}
-          onChangeFilters={hasFilters ? setFilters : undefined}
-          hasSearchSubmitButton={hasSearchSubmitButton}
-          searchDelayTime={searchDelayTime}
+          additionalActions={additionalActions}
           filters={hasFilters ? availableFilters : undefined}
+          hasSearchSubmitButton={hasSearchSubmitButton}
           isDisabled={isEmpty}
-          additionalActions={additionalActions}
+          onChangeFilters={hasFilters ? setFilters : undefined}
+          onChangeSearch={hasSearch ? setSearch : undefined}
+          searchDelayTime={searchDelayTime}
         />
       )}
 
@@ -316,26 +316,26 @@ const DataView = ({
 
       {currentLayout === "table" && tableOptions && (
         <TableContent
-          data={data}
           columns={tableOptions.columns}
+          data={data}
+          draggingRow={draggingRow}
+          emptyState={emptyState}
           getRowId={getRowId}
-          tableState={tableState}
-          setTableState={setTableState}
-          tableOptions={tableOptions}
-          isLoading={isLoading}
+          hasRowReordering={hasRowReordering}
+          hasRowSelection={hasRowSelection}
           isEmpty={isEmpty}
+          isLoading={isLoading}
           isNoResults={isNoResults}
-          hasRowReordering={hasRowReordering}
           isRowReorderingDisabled={isRowReorderingDisabled}
           onReorderRows={onReorderRows}
+          pagination={pagination}
           rowReorderingUtilities={rowReorderingUtilities}
-          hasRowSelection={hasRowSelection}
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
-          emptyState={emptyState}
-          pagination={pagination}
+          setTableState={setTableState}
+          tableOptions={tableOptions}
+          tableState={tableState}
           totalRows={totalRows}
-          draggingRow={draggingRow}
         />
       )}
       {(currentLayout === "list" || currentLayout === "grid") &&
@@ -343,39 +343,39 @@ const DataView = ({
           <StackContent
             currentLayout={currentLayout}
             data={data}
+            draggingRow={draggingRow}
+            emptyState={emptyState}
             getRowId={getRowId}
-            stackOptions={stackOptions}
-            isLoading={isLoading}
+            hasRowReordering={hasRowReordering}
+            hasRowSelection={hasRowSelection}
             isEmpty={isEmpty}
+            isLoading={isLoading}
             isNoResults={isNoResults}
-            hasRowReordering={hasRowReordering}
             isRowReorderingDisabled={isRowReorderingDisabled}
             onReorderRows={onReorderRows}
+            pagination={pagination}
             rowReorderingUtilities={rowReorderingUtilities}
-            hasRowSelection={hasRowSelection}
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
-            emptyState={emptyState}
-            pagination={pagination}
+            stackOptions={stackOptions}
             totalRows={totalRows}
-            draggingRow={draggingRow}
           />
         )}
 
       {hasPagination && (
         <Pagination
+          currentPageLabel={t("pagination.page")}
+          isDisabled={isEmpty}
+          lastRow={lastRowOnPage}
+          loadMoreLabel={t("pagination.loadmore")}
+          nextLabel={t("pagination.next")}
+          onPaginationChange={setPagination}
           pageIndex={pagination.pageIndex}
           pageSize={pagination.pageSize}
-          onPaginationChange={setPagination}
-          lastRow={lastRowOnPage}
+          previousLabel={t("pagination.previous")}
+          rowsPerPageLabel={t("pagination.rowsperpage")}
           totalRows={totalRows}
-          isDisabled={isEmpty}
           variant={paginationType}
-          rowsPerPageLabel={t("pagination.rowsperpage")}
-          currentPageLabel={t("pagination.page")}
-          previousLabel={t("pagination.previous")}
-          nextLabel={t("pagination.next")}
-          loadMoreLabel={t("pagination.loadmore")}
         />
       )}
     </Box>
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
index 83c0594a37..6a10ebc0b1 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
@@ -16,14 +16,14 @@ import { MenuButton } from "../../MenuButton";
 import { MenuItem } from "../../MenuItem";
 
 export type LayoutSwitcherProps = {
-  currentLayout: Layout;
   availableLayouts: AvailableLayouts;
+  currentLayout: Layout;
   setCurrentLayout: Dispatch<SetStateAction<Layout>>;
 };
 
 const LayoutSwitcher = ({
-  currentLayout,
   availableLayouts,
+  currentLayout,
   setCurrentLayout,
 }: LayoutSwitcherProps) => {
   const changeLayout = useCallback(
@@ -38,8 +38,8 @@ const LayoutSwitcher = ({
 
   return (
     <MenuButton
-      buttonLabel={`${currentLayout.charAt(0).toUpperCase()}${currentLayout.slice(1)}`}
       ariaLabel="Layout"
+      buttonLabel={`${currentLayout.charAt(0).toUpperCase()}${currentLayout.slice(1)}`}
       menuAlignment="right"
       shouldCloseOnSelect={false}
     >
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
index 4ff23209e0..fa8b245da4 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
@@ -25,28 +25,28 @@ import { DataTableProps } from "./DataTable";
 import { Trans } from "react-i18next";
 
 export type RowActionsProps = {
+  isRowReorderingDisabled?: boolean;
   row: MRT_Row<MRT_RowData> | MRT_RowData;
-  rowIndex: number;
   rowActionButtons?: (
     row: MRT_RowData,
   ) => ReactElement<typeof Button | typeof Fragment>;
   rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps["children"];
-  isRowReorderingDisabled?: boolean;
+  rowIndex: number;
   totalRows?: DataTableProps["totalRows"];
   updateRowOrder?: ({
-    rowId,
     newRowIndex,
+    rowId,
   }: {
-    rowId: string;
     newRowIndex: number;
+    rowId: string;
   }) => void;
 };
 
 const RowActions = ({
+  isRowReorderingDisabled,
   row,
-  rowIndex,
   rowActionMenuItems,
-  isRowReorderingDisabled,
+  rowIndex,
   totalRows,
   updateRowOrder,
 }: RowActionsProps) => {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index 919a2f44de..b2d50685d5 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -38,23 +38,23 @@ import { Box } from "../../Box";
 export const CARD_IMAGE_HEIGHT = "64px";
 
 export type StackCardProps = {
+  children?: ReactNode;
   description?: string;
   image?: ReactElement;
   overline?: string;
   title?: string;
-  children?: ReactNode;
 } & (
   | {
-      onClick: MouseEventHandler;
+      Accessory?: never;
       button?: never;
       menuButtonChildren?: never;
-      Accessory?: never;
+      onClick: MouseEventHandler;
     }
   | {
-      onClick?: never;
+      Accessory?: ReactNode;
       button?: ReactElement<typeof Button>;
       menuButtonChildren?: MenuButtonProps["children"];
-      Accessory?: ReactNode;
+      onClick?: never;
     }
 );
 
@@ -83,15 +83,15 @@ const MenuButtonContainer = styled("div", {
 const buttonProviderValue = { isFullWidth: true };
 
 const StackCard = ({
+  Accessory,
   button,
+  children,
   description,
   image,
   menuButtonChildren,
   onClick,
   overline,
   title,
-  children,
-  Accessory,
 }: StackCardProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
@@ -151,13 +151,14 @@ const StackCard = ({
       </Box>
     ),
     [
-      button,
-      description,
+      Accessory,
       image,
+      odysseyDesignTokens,
       menuButtonChildren,
       overline,
       title,
-      odysseyDesignTokens,
+      description,
+      button,
       children,
     ],
   );
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
index 21c2c41160..ede0dd546b 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -32,15 +32,17 @@ import {
 export type StackContentProps = {
   currentLayout: StackLayout;
   data: MRT_RowData[];
+  draggingRow?: MRT_Row<MRT_RowData> | null;
+  emptyState: ReactNode;
   getRowId: UniversalProps["getRowId"];
-  stackOptions: StackProps;
-  isLoading: boolean;
+  hasRowReordering: UniversalProps["hasRowReordering"];
+  hasRowSelection: UniversalProps["hasRowSelection"];
   isEmpty?: boolean;
+  isLoading: boolean;
   isNoResults?: boolean;
-  hasRowReordering: UniversalProps["hasRowReordering"];
   isRowReorderingDisabled?: boolean;
   onReorderRows: UniversalProps["onReorderRows"];
-  totalRows: UniversalProps["totalRows"];
+  pagination: { pageIndex: number; pageSize: number };
   rowReorderingUtilities: {
     dragHandleStyles: CSSObject;
     dragHandleText: {
@@ -78,33 +80,28 @@ export type StackContentProps = {
       newRowIndex: number;
     }) => void;
   };
-  hasRowSelection: UniversalProps["hasRowSelection"];
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
-  emptyState: ReactNode;
-  pagination: {
-    pageIndex: number;
-    pageSize: number;
-  };
-  draggingRow?: MRT_Row<MRT_RowData> | null;
+  stackOptions: StackProps;
+  totalRows: UniversalProps["totalRows"];
 };
 
 const StackContent = ({
   currentLayout,
   data,
-  stackOptions,
-  isLoading,
+  emptyState,
+  hasRowReordering,
+  hasRowSelection,
   isEmpty,
+  isLoading,
   isNoResults,
-  hasRowReordering,
   isRowReorderingDisabled,
   onReorderRows,
+  pagination,
   rowReorderingUtilities,
-  hasRowSelection,
   rowSelection,
   setRowSelection,
-  emptyState,
-  pagination,
+  stackOptions,
   totalRows,
 }: StackContentProps) => {
   const handleRowSelectionChange = useCallback(
@@ -189,11 +186,6 @@ const StackContent = ({
 
                 return (
                   <StackCard
-                    overline={overline}
-                    title={title}
-                    description={description}
-                    image={image}
-                    children={children}
                     Accessory={
                       hasRowSelection && (
                         <Box sx={{ marginBlockStart: -1 }}>
@@ -204,6 +196,9 @@ const StackContent = ({
                         </Box>
                       )
                     }
+                    children={children}
+                    description={description}
+                    image={image}
                     key={row.id}
                     menuButtonChildren={
                       (stackOptions.rowActionMenuItems || hasRowReordering) && (
@@ -221,6 +216,8 @@ const StackContent = ({
                         />
                       )
                     }
+                    overline={overline}
+                    title={title}
                   />
                 );
               })}
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index 5057c479e6..81aea3ac48 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -52,19 +52,22 @@ import { MoreIcon } from "../../icons.generated";
 import { useTranslation } from "react-i18next";
 
 export type TableContentProps = {
-  data: MRT_RowData[];
   columns: TableProps["columns"];
+  data: MRT_RowData[];
+  draggingRow?: MRT_Row<MRT_RowData> | null;
+  emptyState: ReactNode;
   getRowId: UniversalProps["getRowId"];
-  tableState: TableState;
-  setTableState: Dispatch<SetStateAction<TableState>>;
-  tableOptions: TableProps;
-  isLoading: boolean;
+  hasRowReordering: UniversalProps["hasRowReordering"];
+  hasRowSelection: UniversalProps["hasRowSelection"];
   isEmpty?: boolean;
+  isLoading: boolean;
   isNoResults?: boolean;
-  hasRowReordering: UniversalProps["hasRowReordering"];
   isRowReorderingDisabled?: boolean;
   onReorderRows: UniversalProps["onReorderRows"];
-  totalRows: UniversalProps["totalRows"];
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+  };
   rowReorderingUtilities: {
     dragHandleStyles: CSSObject;
     dragHandleText: {
@@ -102,38 +105,35 @@ export type TableContentProps = {
       newRowIndex: number;
     }) => void;
   };
-  hasRowSelection: UniversalProps["hasRowSelection"];
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
-  emptyState: ReactNode;
-  pagination: {
-    pageIndex: number;
-    pageSize: number;
-  };
-  draggingRow?: MRT_Row<MRT_RowData> | null;
+  setTableState: Dispatch<SetStateAction<TableState>>;
+  tableOptions: TableProps;
+  tableState: TableState;
+  totalRows: UniversalProps["totalRows"];
 };
 
 const TableContent = ({
-  data,
   columns,
+  data,
+  draggingRow,
+  emptyState,
   getRowId,
-  tableOptions,
-  tableState,
-  setTableState,
-  isLoading,
+  hasRowReordering,
+  hasRowSelection,
   isEmpty,
+  isLoading,
   isNoResults,
-  hasRowReordering,
   isRowReorderingDisabled,
   onReorderRows,
+  pagination,
   rowReorderingUtilities,
-  hasRowSelection,
   rowSelection,
   setRowSelection,
-  emptyState,
-  pagination,
+  setTableState,
+  tableOptions,
+  tableState,
   totalRows,
-  draggingRow,
 }: TableContentProps) => {
   const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =
     useState(true);
@@ -146,11 +146,11 @@ const TableContent = ({
   const tableContentRef = useRef<HTMLTableElement>(null);
 
   useScrollIndication({
-    tableOuterContainer: tableOuterContainerRef.current,
-    tableInnerContainer: tableInnerContainerRef.current,
-    setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,
     setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,
+    setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,
     setTableInnerContainerWidth: setTableInnerContainerWidth,
+    tableInnerContainer: tableInnerContainerRef.current,
+    tableOuterContainer: tableOuterContainerRef.current,
   });
 
   const odysseyDesignTokens = useOdysseyDesignTokens();
@@ -204,9 +204,9 @@ const TableContent = ({
   );
 
   const {
+    draggableTableBodyRowClassName,
     dragHandleStyles,
     dragHandleText,
-    draggableTableBodyRowClassName,
     handleDragHandleKeyDown,
     handleDragHandleOnDragCapture,
     handleDragHandleOnDragEnd,
@@ -223,17 +223,17 @@ const TableContent = ({
           {tableOptions.rowActionButtons?.(row)}
           {(tableOptions.rowActionMenuItems || hasRowReordering) && (
             <MenuButton
-              endIcon={<MoreIcon />}
-              size="small"
-              buttonVariant="floating"
               ariaLabel={t("table.moreactions.arialabel")}
+              buttonVariant="floating"
+              endIcon={<MoreIcon />}
               menuAlignment="right"
+              size="small"
             >
               <RowActions
+                isRowReorderingDisabled={isRowReorderingDisabled}
                 row={row}
-                rowIndex={currentIndex}
                 rowActionMenuItems={tableOptions.rowActionMenuItems}
-                isRowReorderingDisabled={isRowReorderingDisabled}
+                rowIndex={currentIndex}
                 totalRows={totalRows}
                 updateRowOrder={
                   hasRowReordering && onReorderRows ? updateRowOrder : undefined
@@ -245,14 +245,14 @@ const TableContent = ({
       );
     },
     [
+      hasRowReordering,
+      isRowReorderingDisabled,
+      onReorderRows,
       pagination.pageIndex,
       pagination.pageSize,
-      tableOptions,
-      hasRowReordering,
       t,
-      isRowReorderingDisabled,
+      tableOptions,
       totalRows,
-      onReorderRows,
       updateRowOrder,
     ],
   );
@@ -347,9 +347,9 @@ const TableContent = ({
 
   return (
     <ScrollableTableContainer
-      odysseyDesignTokens={odysseyDesignTokens}
-      isScrollableStart={!isTableContainerScrolledToStart}
       isScrollableEnd={!isTableContainerScrolledToEnd}
+      isScrollableStart={!isTableContainerScrolledToStart}
+      odysseyDesignTokens={odysseyDesignTokens}
       ref={tableOuterContainerRef}
     >
       <MRT_TableContainer table={dataTable} />
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
index 83dc58ce37..6c57aa0c17 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
@@ -20,15 +20,15 @@ import { useTranslation } from "react-i18next";
 import { TableProps, TableState } from "./componentTypes";
 
 export type TableSettingsProps = {
+  setTableState: Dispatch<SetStateAction<TableState>>;
   tableOptions: TableProps;
   tableState: TableState;
-  setTableState: Dispatch<SetStateAction<TableState>>;
 };
 
 const TableSettings = ({
+  setTableState,
   tableOptions,
   tableState,
-  setTableState,
 }: TableSettingsProps) => {
   const { t } = useTranslation();
 
@@ -84,8 +84,8 @@ const TableSettings = ({
     <>
       {hasChangeableDensity && (
         <MenuButton
-          endIcon={<ListIcon />}
           ariaLabel={t("table.density.arialabel")}
+          endIcon={<ListIcon />}
           menuAlignment="right"
           shouldCloseOnSelect={false}
         >
@@ -105,8 +105,8 @@ const TableSettings = ({
 
       {hasColumnVisibility && (
         <MenuButton
-          endIcon={<ShowIcon />}
           ariaLabel={t("table.columnvisibility.arialabel")}
+          endIcon={<ShowIcon />}
           menuAlignment="right"
           shouldCloseOnSelect={false}
         >
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
index 4c7c2fb832..f37079297c 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
@@ -43,7 +43,13 @@ export type AvailableLayouts = Layout[];
 export type AvailableStackLayouts = StackLayout[];
 
 export type UniversalProps = {
-  // Data handling
+  bulkActionMenuItems?: (
+    selectedRows: MRT_RowSelectionState,
+  ) => MenuButtonProps["children"];
+  currentPage?: number;
+  emptyPlaceholder?: ReactNode;
+  errorMessage?: string;
+  filters?: Array<DataFilter | DataTableColumn<MRT_RowData> | string>;
   getData: ({
     page,
     resultsPerPage,
@@ -52,50 +58,35 @@ export type UniversalProps = {
     sort,
   }: DataGetDataType) => MRT_RowData[] | Promise<MRT_RowData[]>;
   getRowId?: MRT_TableOptions<MRT_RowData>["getRowId"];
+  hasFilters?: boolean;
+  hasPagination?: boolean;
   hasRowReordering?: boolean;
-  isRowReorderingDisabled?: boolean;
-  onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
-
-  // Row selection
   hasRowSelection?: boolean;
-  onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;
-  bulkActionMenuItems?: (
-    selectedRows: MRT_RowSelectionState,
-  ) => MenuButtonProps["children"];
-
-  // Pagination
-  hasPagination?: boolean;
-  currentPage?: number;
-  paginationType?: (typeof paginationTypeValues)[number];
-  resultsPerPage?: number;
-  totalRows?: number;
-
-  // Search & filtering
-  hasFilters?: boolean;
   hasSearch?: boolean;
   hasSearchSubmitButton?: boolean;
-  filters?: Array<DataFilter | DataTableColumn<MRT_RowData> | string>;
-  searchDelayTime?: number;
-
-  // States
-  errorMessage?: string;
-  emptyPlaceholder?: ReactNode;
-  noResultsPlaceholder?: ReactNode;
-  isLoading?: boolean;
   isEmpty?: boolean;
+  isLoading?: boolean;
   isNoResults?: boolean;
+  isRowReorderingDisabled?: boolean;
+  noResultsPlaceholder?: ReactNode;
+  onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;
+  onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
+  paginationType?: (typeof paginationTypeValues)[number];
+  resultsPerPage?: number;
+  searchDelayTime?: number;
+  totalRows?: number;
 };
 
 export type TableProps = {
   columns: DataTableColumn<MRT_RowData>[];
-  initialDensity?: (typeof densityValues)[number];
   hasChangeableDensity?: boolean;
   hasColumnResizing?: boolean;
   hasColumnVisibility?: boolean;
+  hasSorting?: boolean;
+  initialDensity?: (typeof densityValues)[number];
   renderDetailPanel?: MRT_TableOptions<MRT_RowData>["renderDetailPanel"];
   rowActionButtons?: DataTableRowActionsProps["rowActionButtons"];
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
-  hasSorting?: boolean;
 };
 
 export type StackProps = {
@@ -105,10 +96,10 @@ export type StackProps = {
 };
 
 export type ViewProps<L extends Layout> = {
-  initialLayout?: L;
   availableLayouts?: L[];
-  tableOptions?: TableProps;
+  initialLayout?: L;
   stackOptions?: StackProps;
+  tableOptions?: TableProps;
 };
 
 export type TableState = {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
index 4f5ea6a60d..483bbcb703 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
@@ -21,10 +21,10 @@ import {
 import { DataFilter } from "../DataFilters";
 
 export type DataQueryParamsType = {
+  filters?: DataFilter[];
   page?: number;
   resultsPerPage?: number;
   search?: string;
-  filters?: DataFilter[];
   sort?: MRT_SortingState;
 };
 
@@ -55,16 +55,16 @@ export type DataColumns = DataTableColumn<MRT_RowData>[];
 export type DataRow = MRT_RowData;
 
 export type DataGetDataType = {
+  filters?: DataFilter[];
   page?: number;
   resultsPerPage?: number;
   search?: string;
-  filters?: DataFilter[];
   sort?: MRT_SortingState;
 };
 
 export type DataOnReorderRowsType = {
-  rowId: string;
   newRowIndex: number;
+  rowId: string;
 };
 
 export type DataRowSelectionState = MRT_RowSelectionState;
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
index 3f6e5463c9..ef918bd14e 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
@@ -17,29 +17,26 @@ import { t } from "i18next";
 import { MRT_RowData } from "material-react-table";
 
 type DataRequestType = {
-  getDataFn: UniversalProps["getData"];
-  setIsLoading: Dispatch<SetStateAction<boolean>>;
-  setErrorMessage: Dispatch<SetStateAction<UniversalProps["errorMessage"]>>;
+  dataQueryParams: DataQueryParamsType;
   errorMessageProp: UniversalProps["errorMessage"];
+  getDataFn: UniversalProps["getData"];
   setData: Dispatch<SetStateAction<MRT_RowData[]>>;
-  dataQueryParams: DataQueryParamsType;
+  setErrorMessage: Dispatch<SetStateAction<UniversalProps["errorMessage"]>>;
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
 };
 
 export const fetchData = async ({
-  getDataFn,
-  setIsLoading,
-  setErrorMessage,
+  dataQueryParams,
   errorMessageProp,
+  getDataFn,
   setData,
-  dataQueryParams,
+  setErrorMessage,
+  setIsLoading,
 }: DataRequestType) => {
   setIsLoading(true);
   setErrorMessage(errorMessageProp);
   try {
     const incomingData = await getDataFn?.(dataQueryParams);
-    // incomingData.forEach((item: MRT_RowData, index: number) => {
-    //   item._ods_index = index;
-    // });
     setData(incomingData);
   } catch (error) {
     setErrorMessage(typeof error === "string" ? error : t("table.error"));
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
index caf704862c..24320d2ed2 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
@@ -19,6 +19,7 @@ import styled from "@emotion/styled";
 export const dataTableImmutableSettings = {
   enableColumnActions: false,
   enableDensityToggle: false,
+  enableExpandAll: false,
   enableFilters: false,
   enableFullScreenToggle: false,
   enableGlobalFilter: false,
@@ -33,13 +34,12 @@ export const dataTableImmutableSettings = {
       overflow: "visible",
     },
   },
-  selectAllMode: "all" as MRT_TableOptions<MRT_RowData>["selectAllMode"],
   positionActionsColumn:
     "last" as MRT_TableOptions<MRT_RowData>["positionActionsColumn"],
   rowVirtualizerOptions: {
     overscan: 4,
   },
-  enableExpandAll: false,
+  selectAllMode: "all" as MRT_TableOptions<MRT_RowData>["selectAllMode"],
 };
 
 export const displayColumnDefOptions = {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts b/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
index 0ef9cc40f4..e4d91c14a7 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
@@ -17,13 +17,13 @@ import { DataTableColumn } from "../../DataTable";
 import { MRT_RowData } from "material-react-table";
 
 type FilterConversionType = {
-  filters?: UniversalProps["filters"];
   columns?: TableProps["columns"];
+  filters?: UniversalProps["filters"];
 };
 
 export const useFilterConversion = ({
-  filters,
   columns,
+  filters,
 }: FilterConversionType) => {
   const convertFilterSelectOptions = useCallback(
     (options: DataTableColumn<MRT_RowData>["filterSelectOptions"]) =>

From f66c32df2f6337706e1f4fd91ba534a91e465cc0 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Thu, 20 Jun 2024 16:23:04 -0400
Subject: [PATCH 05/15] refactor: reorganize the imports

---
 .../labs/DataComponents/BulkActionsMenu.tsx   |  9 ++---
 .../src/labs/DataComponents/DataStack.tsx     |  5 +--
 .../src/labs/DataComponents/DataTable.tsx     |  1 +
 .../src/labs/DataComponents/DataView.tsx      | 31 ++++++++---------
 .../labs/DataComponents/LayoutSwitcher.tsx    |  1 +
 .../src/labs/DataComponents/RowActions.tsx    | 11 ++++---
 .../src/labs/DataComponents/StackCard.tsx     |  6 ++--
 .../src/labs/DataComponents/StackContent.tsx  | 11 ++++---
 .../src/labs/DataComponents/TableContent.tsx  | 33 ++++++++++---------
 .../src/labs/DataComponents/TableSettings.tsx |  7 ++--
 .../src/labs/DataComponents/componentTypes.ts | 11 ++++---
 .../src/labs/DataComponents/dataTypes.ts      |  1 +
 .../src/labs/DataComponents/fetchData.ts      |  7 ++--
 .../src/labs/DataComponents/index.tsx         |  6 ++--
 .../labs/DataComponents/tableConstants.tsx    |  5 +--
 .../DataComponents/useFilterConversion.ts     |  5 +--
 16 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
index a737e89ebb..c3b571dff5 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
@@ -11,12 +11,13 @@
  */
 
 import { memo, useCallback, Dispatch, SetStateAction } from "react";
-import { UniversalProps } from "./componentTypes";
-import { MenuButton } from "../../MenuButton";
-import { Button } from "../../Button";
+import { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
+
 import { Box } from "../../Box";
+import { Button } from "../../Button";
 import { ChevronDownIcon } from "../../icons.generated";
-import { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
+import { MenuButton } from "../../MenuButton";
+import { UniversalProps } from "./componentTypes";
 
 export type BulkActionMenuProps = {
   data: MRT_RowData[];
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
index 4a317bd775..c9e36ba3bd 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
@@ -11,13 +11,14 @@
  */
 
 import { memo } from "react";
-import { DataView } from "./DataView";
+
+import { availableStackLayouts } from "./constants";
 import {
   AvailableStackLayouts,
   StackProps,
   UniversalProps,
 } from "./componentTypes";
-import { availableStackLayouts } from "./constants";
+import { DataView } from "./DataView";
 
 export type DataStackProps = UniversalProps &
   StackProps & {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
index 2e4f245bd9..55a107a955 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
@@ -11,6 +11,7 @@
  */
 
 import { memo } from "react";
+
 import { DataView } from "./DataView";
 import { TableProps, UniversalProps } from "./componentTypes";
 
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
index 638278fbaf..084609d3c9 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
@@ -11,35 +11,36 @@
  */
 
 import { memo, useEffect, useMemo, useState } from "react";
+import {
+  MRT_Row,
+  MRT_RowData,
+  MRT_RowSelectionState,
+} from "material-react-table";
+import { t } from "i18next";
+
+import {
+  availableLayouts as allAvailableLayouts,
+  densityValues,
+} from "./constants";
 import {
   Layout,
   UniversalProps,
   ViewProps,
   TableState,
 } from "./componentTypes";
-import {
-  availableLayouts as allAvailableLayouts,
-  densityValues,
-} from "./constants";
 import { Box } from "../../Box";
-import { DataFilter, DataFilters } from "../DataFilters";
-import { useFilterConversion } from "./useFilterConversion";
 import { BulkActionMenu } from "./BulkActionsMenu";
+import { Callout } from "../../Callout";
+import { DataFilter, DataFilters } from "../DataFilters";
+import { EmptyState } from "../../EmptyState";
+import { fetchData } from "./fetchData";
 import { LayoutSwitcher } from "./LayoutSwitcher";
 import { TableSettings } from "./TableSettings";
-import { Callout } from "../../Callout";
 import { Pagination, usePagination } from "../../Pagination";
-import { t } from "i18next";
-import { fetchData } from "./fetchData";
 import { TableContent } from "./TableContent";
 import { StackContent } from "./StackContent";
+import { useFilterConversion } from "./useFilterConversion";
 import { useRowReordering } from "../../DataTable/useRowReordering";
-import { EmptyState } from "../../EmptyState";
-import {
-  MRT_Row,
-  MRT_RowData,
-  MRT_RowSelectionState,
-} from "material-react-table";
 
 export type DataViewProps = UniversalProps & ViewProps<Layout>;
 
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
index 6a10ebc0b1..963ef027cf 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
@@ -11,6 +11,7 @@
  */
 
 import { Dispatch, memo, useCallback, SetStateAction } from "react";
+
 import { AvailableLayouts, Layout } from "./componentTypes";
 import { MenuButton } from "../../MenuButton";
 import { MenuItem } from "../../MenuItem";
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
index fa8b245da4..b98d78f683 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
@@ -10,19 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { MRT_Row, MRT_RowData } from "material-react-table";
 import { Fragment, ReactElement, memo, useCallback } from "react";
-import { Button } from "../../Button";
-import { MenuItem } from "../../MenuItem";
-import { MenuButtonProps } from "../../MenuButton";
+import { MRT_Row, MRT_RowData } from "material-react-table";
+import { Trans } from "react-i18next";
+
 import {
   ArrowBottomIcon,
   ArrowDownIcon,
   ArrowTopIcon,
   ArrowUpIcon,
 } from "../../icons.generated";
+import { Button } from "../../Button";
+import { MenuItem } from "../../MenuItem";
 import { DataTableProps } from "./DataTable";
-import { Trans } from "react-i18next";
+import { MenuButtonProps } from "../../MenuButton";
 
 export type RowActionsProps = {
   isRowReorderingDisabled?: boolean;
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index b2d50685d5..3b23cc0614 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -24,16 +24,16 @@ import {
 } from "@mui/material";
 import styled from "@emotion/styled";
 
+import { Box } from "../../Box";
 import { Button } from "../../Button";
 import { ButtonContext } from "../../ButtonContext";
-import { MoreIcon } from "../../icons.generated";
-import { MenuButton, MenuButtonProps } from "../../MenuButton";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "../../Typography";
-import { Box } from "../../Box";
+import { MenuButton, MenuButtonProps } from "../../MenuButton";
+import { MoreIcon } from "../../icons.generated";
 
 export const CARD_IMAGE_HEIGHT = "64px";
 
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
index ede0dd546b..1dd552250f 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -11,8 +11,6 @@
  */
 
 import { Dispatch, ReactNode, SetStateAction, memo, useCallback } from "react";
-import { StackLayout, StackProps, UniversalProps } from "./componentTypes";
-import { Box } from "../../Box";
 import styled, { CSSObject } from "@emotion/styled";
 import {
   MRT_Row,
@@ -20,14 +18,17 @@ import {
   MRT_RowSelectionState,
   MRT_TableInstance,
 } from "material-react-table";
-import { CircularProgress } from "../../CircularProgress";
+
+import { Box } from "../../Box";
 import { Checkbox as MuiCheckbox } from "@mui/material";
-import { RowActions } from "./RowActions";
-import { StackCard } from "./StackCard";
+import { CircularProgress } from "../../CircularProgress";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
+import { RowActions } from "./RowActions";
+import { StackCard } from "./StackCard";
+import { StackLayout, StackProps, UniversalProps } from "./componentTypes";
 
 export type StackContentProps = {
   currentLayout: StackLayout;
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index 81aea3ac48..092525c1c0 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -10,15 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  MRT_Row,
-  MRT_RowData,
-  MRT_RowSelectionState,
-  MRT_TableContainer,
-  MRT_TableInstance,
-  MRT_TableOptions,
-  useMaterialReactTable,
-} from "material-react-table";
 import {
   SetStateAction,
   memo,
@@ -29,26 +20,36 @@ import {
   ReactNode,
   Dispatch,
 } from "react";
-import { TableProps, TableState, UniversalProps } from "./componentTypes";
-import { DataTableCell } from "./dataTypes";
+import { CSSObject } from "@emotion/styled";
+import {
+  MRT_Row,
+  MRT_RowData,
+  MRT_RowSelectionState,
+  MRT_TableContainer,
+  MRT_TableInstance,
+  MRT_TableOptions,
+  useMaterialReactTable,
+} from "material-react-table";
+
 import {
   ArrowDownIcon,
   ArrowUnsortedIcon,
   ChevronDownIcon,
   DragIndicatorIcon,
 } from "../../icons.generated";
+import { Box } from "../../Box";
+import { TableProps, TableState, UniversalProps } from "./componentTypes";
+import { DataTableCell } from "./dataTypes";
 import {
   dataTableImmutableSettings,
   displayColumnDefOptions,
   ScrollableTableContainer,
 } from "./tableConstants";
-import { useScrollIndication } from "../../DataTable/useScrollIndication";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
-import { Box } from "../../Box";
-import { CSSObject } from "@emotion/styled";
-import { RowActions } from "./RowActions";
 import { MenuButton } from "../../MenuButton";
 import { MoreIcon } from "../../icons.generated";
+import { RowActions } from "./RowActions";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+import { useScrollIndication } from "../../DataTable/useScrollIndication";
 import { useTranslation } from "react-i18next";
 
 export type TableContentProps = {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
index 6c57aa0c17..60728397f0 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
@@ -12,11 +12,12 @@
 
 import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
 import { Checkbox as MuiCheckbox } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import { densityValues } from "./constants";
+import { ListIcon, ShowIcon } from "../../icons.generated";
 import { MenuButton } from "../../MenuButton";
 import { MenuItem } from "../../MenuItem";
-import { ListIcon, ShowIcon } from "../../icons.generated";
-import { densityValues } from "./constants";
-import { useTranslation } from "react-i18next";
 import { TableProps, TableState } from "./componentTypes";
 
 export type TableSettingsProps = {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
index f37079297c..b8d12bf5d1 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
@@ -18,22 +18,23 @@ import {
   MRT_TableOptions,
   MRT_VisibilityState,
 } from "material-react-table";
-import { DataFilter } from "../DataFilters";
-import { paginationTypeValues } from "../DataTablePagination";
+
 import {
   availableLayouts,
   availableStackLayouts,
   densityValues,
 } from "./constants";
-import { MenuButtonProps } from "../..";
-import { ReactNode } from "react";
-import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
+import { DataFilter } from "../DataFilters";
 import {
   DataGetDataType,
   DataOnReorderRowsType,
   DataRowSelectionState,
   DataTableColumn,
 } from "./dataTypes";
+import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
+import { MenuButtonProps } from "../..";
+import { paginationTypeValues } from "../DataTablePagination";
+import { ReactNode } from "react";
 import { StackCardProps } from "./StackCard";
 
 export type Layout = (typeof availableLayouts)[number];
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
index 483bbcb703..640b15e009 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/dataTypes.ts
@@ -18,6 +18,7 @@ import {
   MRT_RowSelectionState,
   MRT_SortingState,
 } from "material-react-table";
+
 import { DataFilter } from "../DataFilters";
 
 export type DataQueryParamsType = {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
index ef918bd14e..d425270113 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
@@ -11,10 +11,11 @@
  */
 
 import { Dispatch, SetStateAction } from "react";
-import { UniversalProps } from "./componentTypes";
-import { DataQueryParamsType } from "./dataTypes";
-import { t } from "i18next";
 import { MRT_RowData } from "material-react-table";
+import { t } from "i18next";
+
+import { DataQueryParamsType } from "./dataTypes";
+import { UniversalProps } from "./componentTypes";
 
 type DataRequestType = {
   dataQueryParams: DataQueryParamsType;
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/index.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/index.tsx
index 4742bfae82..d317460b6a 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/index.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/index.tsx
@@ -10,10 +10,10 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { DataView, type DataViewProps } from "./DataView";
-export { DataTable, type DataTableProps } from "./DataTable";
 export { DataStack, type DataStackProps } from "./DataStack";
+export { DataTable, type DataTableProps } from "./DataTable";
+export { DataView, type DataViewProps } from "./DataView";
 
-export * from "./constants";
 export * from "./componentTypes";
+export * from "./constants";
 export * from "./dataTypes";
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
index 24320d2ed2..adbc9b1f5f 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
@@ -10,11 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
 import { MRT_RowData, MRT_TableOptions } from "material-react-table";
-import { DragIndicatorIcon } from "../../icons.generated";
+
 import { Box } from "../../Box";
 import { DesignTokens } from "../../OdysseyDesignTokensContext";
-import styled from "@emotion/styled";
+import { DragIndicatorIcon } from "../../icons.generated";
 
 export const dataTableImmutableSettings = {
   enableColumnActions: false,
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts b/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
index e4d91c14a7..091d61710b 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts
@@ -11,10 +11,11 @@
  */
 
 import { useCallback, useMemo } from "react";
+import { MRT_RowData } from "material-react-table";
+
 import { DataFilter } from "../DataFilters";
-import { UniversalProps, TableProps } from "./componentTypes";
 import { DataTableColumn } from "../../DataTable";
-import { MRT_RowData } from "material-react-table";
+import { UniversalProps, TableProps } from "./componentTypes";
 
 type FilterConversionType = {
   columns?: TableProps["columns"];

From 0ae204f1794b30b9642a48b93c7f04b4f9dcec3d Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Fri, 21 Jun 2024 09:13:53 -0400
Subject: [PATCH 06/15] refactor: adding translations

---
 .../src/labs/DataComponents/DataView.tsx          | 15 ++-------------
 .../src/labs/DataComponents/LayoutSwitcher.tsx    |  4 ++--
 .../src/labs/DataComponents/RowActions.tsx        | 12 +++++++-----
 .../src/labs/DataComponents/StackCard.tsx         |  6 ++++--
 .../src/properties/odyssey-react-mui.properties   |  1 -
 5 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
index 084609d3c9..fc1cba69e3 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
@@ -109,11 +109,6 @@ const DataView = ({
     rowDensity: tableOptions?.initialDensity ?? densityValues[0],
   });
 
-  const hasMultipleAvailableLayouts = useMemo(
-    () => typeof availableLayouts !== "string" && availableLayouts.length > 1,
-    [availableLayouts],
-  );
-
   const shouldShowFilters = useMemo(
     () => hasSearch || hasFilters,
     [hasSearch, hasFilters],
@@ -226,7 +221,7 @@ const DataView = ({
           />
         )}
 
-        {hasMultipleAvailableLayouts && (
+        {availableLayouts.length > 1 && (
           <LayoutSwitcher
             availableLayouts={availableLayouts}
             currentLayout={currentLayout}
@@ -235,13 +230,7 @@ const DataView = ({
         )}
       </>
     ),
-    [
-      currentLayout,
-      tableOptions,
-      tableState,
-      hasMultipleAvailableLayouts,
-      availableLayouts,
-    ],
+    [currentLayout, tableOptions, tableState, availableLayouts],
   );
 
   const { lastRow: lastRowOnPage } = usePagination({
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
index 963ef027cf..6107e23b95 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
@@ -34,7 +34,7 @@ const LayoutSwitcher = ({
 
       setCurrentLayout(value);
     },
-    [],
+    [setCurrentLayout],
   );
 
   return (
@@ -50,7 +50,7 @@ const LayoutSwitcher = ({
             <MenuItem
               key={value}
               isSelected={currentLayout === value}
-              onClick={changeLayout(value)}
+              onClick={() => changeLayout(value)}
             >
               {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
             </MenuItem>
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
index b98d78f683..9d041f8f55 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
@@ -12,7 +12,7 @@
 
 import { Fragment, ReactElement, memo, useCallback } from "react";
 import { MRT_Row, MRT_RowData } from "material-react-table";
-import { Trans } from "react-i18next";
+import { useTranslation } from "react-i18next";
 
 import {
   ArrowBottomIcon,
@@ -51,6 +51,8 @@ const RowActions = ({
   totalRows,
   updateRowOrder,
 }: RowActionsProps) => {
+  const { t } = useTranslation();
+
   const handleToFrontClick = useCallback(() => {
     updateRowOrder && updateRowOrder({ rowId: row.id, newRowIndex: 0 });
   }, [row.id, updateRowOrder]);
@@ -83,13 +85,13 @@ const RowActions = ({
             isDisabled={rowIndex <= 0 || isRowReorderingDisabled}
             onClick={handleToFrontClick}
           >
-            <ArrowTopIcon /> <Trans i18nKey="table.reorder.tofront" />
+            <ArrowTopIcon /> {t("table.reorder.tofront")}
           </MenuItem>
           <MenuItem
             isDisabled={rowIndex <= 0 || isRowReorderingDisabled}
             onClick={handleForwardClick}
           >
-            <ArrowUpIcon /> <Trans i18nKey="table.reorder.forward" />
+            <ArrowUpIcon /> {t("table.reorder.forward")}
           </MenuItem>
           <MenuItem
             isDisabled={
@@ -98,14 +100,14 @@ const RowActions = ({
             }
             onClick={handleBackwardClick}
           >
-            <ArrowDownIcon /> <Trans i18nKey="table.reorder.backward" />
+            <ArrowDownIcon /> {t("table.reorder.backward")}
           </MenuItem>
           {totalRows && (
             <MenuItem
               isDisabled={rowIndex >= totalRows - 1 || isRowReorderingDisabled}
               onClick={handleToBackClick}
             >
-              <ArrowBottomIcon /> <Trans i18nKey="table.reorder.toback" />
+              <ArrowBottomIcon /> {t("table.reorder.toback")}
             </MenuItem>
           )}
         </>
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index 3b23cc0614..fb4ac8f71f 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -23,6 +23,7 @@ import {
   CardActionArea as MuiCardActionArea,
 } from "@mui/material";
 import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
 import { Button } from "../../Button";
@@ -94,6 +95,7 @@ const StackCard = ({
   title,
 }: StackCardProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
   const cardContent = useMemo(
     () => (
@@ -175,11 +177,11 @@ const StackCard = ({
         <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>
           <MenuButton
             endIcon={<MoreIcon />}
-            ariaLabel="Card menu"
+            ariaLabel={t("table.moreactions.arialabel")}
             buttonVariant="floating"
             menuAlignment="right"
             size="small"
-            tooltipText="Actions"
+            tooltipText={t("table.actions")}
           >
             {menuButtonChildren}
           </MenuButton>
diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
index 5af4b2adf5..3b02d0da55 100644
--- a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
+++ b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -79,7 +79,6 @@ severity.success = success
 severity.warning = warning
 switch.active = Active
 switch.inactive = Inactive
-table.actions = Actions
 table.columnvisibility.arialabel = Show/hide columns
 table.density.arialabel = Table density
 table.draghandle.arialabel = Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.

From 55d9ab7ecc5b59a102418a9100f65017d2cc7396 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Fri, 21 Jun 2024 09:46:48 -0400
Subject: [PATCH 07/15] refactor: remove negative margin from card accessory

---
 .../src/OdysseyCacheProvider.tsx              | 15 ++++++++----
 .../src/labs/DataComponents/StackCard.tsx     | 16 ++++---------
 .../src/labs/DataComponents/StackContent.tsx  | 24 +++++++++----------
 .../src/theme/components.tsx                  |  4 ++++
 4 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
index 6132920bc5..89c6d5edc0 100644
--- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
@@ -23,12 +23,12 @@ import { CacheProvider } from "@emotion/react";
 
 export type OdysseyCacheProviderProps = {
   children: ReactNode;
-  nonce?: string;
   /**
    * Emotion caches styles into the style element.
    * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.
    */
   emotionRoot?: HTMLStyleElement;
+  nonce?: string;
   /**
    * Emotion renders into this HTML element.
    * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
@@ -41,6 +41,7 @@ const OdysseyCacheProvider = ({
   children,
   emotionRoot,
   nonce,
+  shadowDomElement,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
@@ -51,12 +52,16 @@ const OdysseyCacheProvider = ({
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
-      // TODO: Change this back!!
-      speedy: true,
-      // speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
+      speedy: shadowDomElement ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
       ...(stylisPlugins && { stylisPlugins }),
     });
-  }, [emotionRoot, nonce, stylisPlugins, uniqueAlphabeticalId]);
+  }, [
+    emotionRoot,
+    nonce,
+    shadowDomElement,
+    stylisPlugins,
+    uniqueAlphabeticalId,
+  ]);
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index fb4ac8f71f..48c347f67e 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -102,18 +102,10 @@ const StackCard = ({
       <Box
         sx={{
           display: "flex",
+          gap: 3,
         }}
       >
-        {Accessory && (
-          <Box
-            sx={{
-              marginInlineEnd: 3,
-              marginInlineStart: -2,
-            }}
-          >
-            {Accessory}
-          </Box>
-        )}
+        {Accessory && <Box>{Accessory}</Box>}
         <Box>
           {image && (
             <ImageContainer
@@ -166,7 +158,9 @@ const StackCard = ({
   );
 
   return (
-    <MuiCard className={onClick ? "isClickable" : ""}>
+    <MuiCard
+      className={`${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""}`}
+    >
       {onClick ? (
         <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
       ) : (
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
index 1dd552250f..3e35bd9ee1 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -137,18 +137,18 @@ const StackContent = ({
     display: currentLayout === "stack" ? "flex" : "grid",
     flexDirection: currentLayout === "stack" ? "column" : undefined,
     gap: odysseyDesignTokens.Spacing5,
-    [`@media (max-width: 720px)`]: {
-      gridTemplateColumns:
-        currentLayout === "grid" ? "repeat(1, 1fr)" : undefined,
-    },
-    [`@media (min-width: 720px) and (max-width: 960px)`]: {
-      gridTemplateColumns:
-        currentLayout === "grid" ? "repeat(2, 1fr)" : undefined,
-    },
-    [`@media (min-width: 960px)`]: {
-      gridTemplateColumns:
-        currentLayout === "grid" ? `repeat(${maxGridColumns}, 1fr)` : undefined,
-    },
+
+    ...(currentLayout === "grid" && {
+      [`@media (max-width: 720px)`]: {
+        gridTemplateColumns: "repeat(1, 1fr)",
+      },
+      [`@media (min-width: 720px) and (max-width: 960px)`]: {
+        gridTemplateColumns: "repeat(2, 1fr)",
+      },
+      [`@media (min-width: 960px)`]: {
+        gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,
+      },
+    }),
   }));
 
   const LoadingContainer = styled("div", {
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index c9e1b7edfb..fb023603b7 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -786,6 +786,10 @@ export const components = ({
             height: CARD_IMAGE_HEIGHT,
           },
 
+          "&.hasAccessory": {
+            paddingLeft: odysseyTokens.Spacing4,
+          },
+
           "&.isClickable:hover": {
             backgroundColor: odysseyTokens.HueNeutral50,
             boxShadow: odysseyTokens.DepthHigh,

From 85ba89943e8fb5bd9d29e2b7d3b4ab55efc3d3f5 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Fri, 21 Jun 2024 11:21:08 -0400
Subject: [PATCH 08/15] refactor: convert sx to styled wherever needed

---
 .../labs/DataComponents/BulkActionsMenu.tsx   | 37 ++++++++-----
 .../src/labs/DataComponents/DataView.tsx      | 53 +++++++++++--------
 .../labs/DataComponents/LayoutSwitcher.tsx    |  5 +-
 .../src/labs/DataComponents/StackCard.tsx     | 32 +++++------
 .../src/labs/DataComponents/StackContent.tsx  |  5 +-
 .../src/labs/DataComponents/TableContent.tsx  | 32 ++++++-----
 .../src/labs/DataComponents/constants.tsx     |  2 +-
 .../properties/odyssey-react-mui.properties   |  3 ++
 .../DataComponents/DataComponents.stories.tsx |  3 +-
 9 files changed, 96 insertions(+), 76 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
index c3b571dff5..9bf9d0a6ae 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
@@ -12,26 +12,44 @@
 
 import { memo, useCallback, Dispatch, SetStateAction } from "react";
 import { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
 import { Button } from "../../Button";
 import { ChevronDownIcon } from "../../icons.generated";
 import { MenuButton } from "../../MenuButton";
 import { UniversalProps } from "./componentTypes";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
 
-export type BulkActionMenuProps = {
+export type BulkActionsMenuProps = {
   data: MRT_RowData[];
   menuItems: UniversalProps["bulkActionMenuItems"];
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
 };
 
+const BulkActionsContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+}));
+
 const BulkActionMenu = ({
   data,
   menuItems,
   rowSelection,
   setRowSelection,
-}: BulkActionMenuProps) => {
+}: BulkActionsMenuProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
   const selectedRowCount = Object.values(rowSelection).filter(
     (value) => value === true,
   ).length;
@@ -46,16 +64,11 @@ const BulkActionMenu = ({
   }, [setRowSelection]);
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        gap: 2,
-      }}
-    >
+    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>
       {selectedRowCount > 0 && (
         <MenuButton
           ariaLabel="More actions"
-          buttonLabel={`${selectedRowCount} selected`}
+          buttonLabel={t("table.actions.selectsome", { selectedRowCount })}
           buttonVariant="primary"
           endIcon={<ChevronDownIcon />}
         >
@@ -65,18 +78,18 @@ const BulkActionMenu = ({
       <Box>
         <Button
           isDisabled={selectedRowCount === 20}
-          label="Select all"
+          label={t("table.actions.selectall")}
           onClick={handleSelectAll}
           variant="secondary"
         />
         <Button
           isDisabled={selectedRowCount === 0}
-          label="Select none"
+          label={t("table.actions.selectnone")}
           onClick={handleSelectNone}
           variant="secondary"
         />
       </Box>
-    </Box>
+    </BulkActionsContainer>
   );
 };
 
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
index fc1cba69e3..22a1fd3ed5 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
@@ -41,9 +41,32 @@ import { TableContent } from "./TableContent";
 import { StackContent } from "./StackContent";
 import { useFilterConversion } from "./useFilterConversion";
 import { useRowReordering } from "../../DataTable/useRowReordering";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import styled from "@emotion/styled";
 
 export type DataViewProps = UniversalProps & ViewProps<Layout>;
 
+const DataViewContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing4,
+}));
+
+const BulkActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "space-between",
+}));
+
+const AdditionalActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-end",
+}));
+
 const DataView = ({
   availableLayouts = allAvailableLayouts,
   bulkActionMenuItems,
@@ -73,6 +96,8 @@ const DataView = ({
   tableOptions,
   totalRows,
 }: DataViewProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
   const [currentLayout, setCurrentLayout] = useState<Layout>(
     initialLayout ?? availableLayouts[0],
   );
@@ -251,13 +276,7 @@ const DataView = ({
   });
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
-      }}
-    >
+    <DataViewContainer odysseyDesignTokens={odysseyDesignTokens}>
       {errorMessage && (
         <Box>
           <Callout severity="error" text={errorMessage} />
@@ -277,12 +296,7 @@ const DataView = ({
       )}
 
       {(bulkActionMenuItems || hasRowSelection) && (
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-          }}
-        >
+        <BulkActionsContainer>
           <BulkActionMenu
             data={data}
             menuItems={bulkActionMenuItems}
@@ -290,18 +304,13 @@ const DataView = ({
             setRowSelection={setRowSelection}
           />
           {!shouldShowFilters && additionalActions}
-        </Box>
+        </BulkActionsContainer>
       )}
 
       {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && (
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "flex-end",
-          }}
-        >
+        <AdditionalActionsContainer>
           {additionalActions}
-        </Box>
+        </AdditionalActionsContainer>
       )}
 
       {currentLayout === "table" && tableOptions && (
@@ -368,7 +377,7 @@ const DataView = ({
           variant={paginationType}
         />
       )}
-    </Box>
+    </DataViewContainer>
   );
 };
 
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
index 6107e23b95..a4eb530c51 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
@@ -28,10 +28,7 @@ const LayoutSwitcher = ({
   setCurrentLayout,
 }: LayoutSwitcherProps) => {
   const changeLayout = useCallback(
-    (value: Layout) => (_event: React.MouseEvent<HTMLLIElement>) => {
-      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
-      if (process.env.NODE_ENV === "development") console.debug(_event);
-
+    (value: Layout) => {
       setCurrentLayout(value);
     },
     [setCurrentLayout],
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index 48c347f67e..aad67afce5 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -81,6 +81,19 @@ const MenuButtonContainer = styled("div", {
   top: odysseyDesignTokens.Spacing3,
 }));
 
+const CardContentContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing3,
+}));
+
+const CardChildrenContainer = styled("div")(() => ({
+  ["* + &"]: {
+    marginBlockStart: 3,
+  },
+}));
+
 const buttonProviderValue = { isFullWidth: true };
 
 const StackCard = ({
@@ -99,12 +112,7 @@ const StackCard = ({
 
   const cardContent = useMemo(
     () => (
-      <Box
-        sx={{
-          display: "flex",
-          gap: 3,
-        }}
-      >
+      <CardContentContainer odysseyDesignTokens={odysseyDesignTokens}>
         {Accessory && <Box>{Accessory}</Box>}
         <Box>
           {image && (
@@ -131,18 +139,10 @@ const StackCard = ({
           )}
 
           {children && (
-            <Box
-              sx={{
-                ["&:not(:first-child)"]: {
-                  marginBlockStart: 3,
-                },
-              }}
-            >
-              {children}
-            </Box>
+            <CardChildrenContainer>{children}</CardChildrenContainer>
           )}
         </Box>
-      </Box>
+      </CardContentContainer>
     ),
     [
       Accessory,
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
index 3e35bd9ee1..ef17310a68 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -134,8 +134,8 @@ const StackContent = ({
     currentLayout: StackLayout;
     maxGridColumns: number;
   }>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({
-    display: currentLayout === "stack" ? "flex" : "grid",
-    flexDirection: currentLayout === "stack" ? "column" : undefined,
+    display: currentLayout === "list" ? "flex" : "grid",
+    flexDirection: "column",
     gap: odysseyDesignTokens.Spacing5,
 
     ...(currentLayout === "grid" && {
@@ -189,6 +189,7 @@ const StackContent = ({
                   <StackCard
                     Accessory={
                       hasRowSelection && (
+                        // Negative margin to counteract the checkbox's inbuilt spacing
                         <Box sx={{ marginBlockStart: -1 }}>
                           <MuiCheckbox
                             checked={rowSelection[row.id] ?? false}
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index 092525c1c0..a06bd0694c 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -20,7 +20,7 @@ import {
   ReactNode,
   Dispatch,
 } from "react";
-import { CSSObject } from "@emotion/styled";
+import styled, { CSSObject } from "@emotion/styled";
 import {
   MRT_Row,
   MRT_RowData,
@@ -30,6 +30,7 @@ import {
   MRT_TableOptions,
   useMaterialReactTable,
 } from "material-react-table";
+import { useTranslation } from "react-i18next";
 
 import {
   ArrowDownIcon,
@@ -50,7 +51,16 @@ import { MoreIcon } from "../../icons.generated";
 import { RowActions } from "./RowActions";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
 import { useScrollIndication } from "../../DataTable/useScrollIndication";
-import { useTranslation } from "react-i18next";
+
+const TextWrapper = styled("div")(() => ({
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+}));
+
+const RowActionsContainer = styled("div")(() => ({
+  display: "flex",
+}));
 
 export type TableContentProps = {
   columns: TableProps["columns"];
@@ -187,19 +197,7 @@ const TableContent = ({
         cell.column.columnDef.hasTextWrapping ||
         cell.column.columnDef.enableWrapping;
 
-      return hasTextWrapping ? (
-        value
-      ) : (
-        <Box
-          sx={{
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-          }}
-        >
-          {value}
-        </Box>
-      );
+      return hasTextWrapping ? value : <TextWrapper>{value}</TextWrapper>;
     },
     [],
   );
@@ -220,7 +218,7 @@ const TableContent = ({
       const currentIndex =
         row.index + (pagination.pageIndex - 1) * pagination.pageSize;
       return (
-        <Box sx={{ display: "flex" }}>
+        <RowActionsContainer>
           {tableOptions.rowActionButtons?.(row)}
           {(tableOptions.rowActionMenuItems || hasRowReordering) && (
             <MenuButton
@@ -242,7 +240,7 @@ const TableContent = ({
               />
             </MenuButton>
           )}
-        </Box>
+        </RowActionsContainer>
       );
     },
     [
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx
index 8838fe1b58..9d1e5c4716 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const availableStackLayouts = ["stack", "grid"];
+export const availableStackLayouts = ["list", "grid"];
 export const availableTableLayouts = ["table"];
 export const availableLayouts = [
   ...availableTableLayouts,
diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
index 3b02d0da55..3deedc76ba 100644
--- a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
+++ b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -107,3 +107,6 @@ pagination.page = Page
 pagination.rowsperpage = Rows per page
 pagination.rowswithtotal = {{firstRow}}-{{lastRow}} of {{totalRows}} rows
 pagination.rowswithouttotal = {{firstRow}}-{{lastRow}} rows
+table.actions.selectall = Select all
+table.actions.selectnone = Select none
+table.actions.selectsome = {{selectedRowCount}} selected
\ No newline at end of file
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
index 83ca7a8257..f01c3b99d3 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
@@ -234,8 +234,7 @@ const storybookMeta: Meta<DataViewMetaProps> = {
     hasActionMenuItems: false,
     hasCustomEmptyPlaceholder: false,
     hasCustomNoResultsPlaceholder: false,
-    availableLayouts: ["table", "stack", "grid"],
-    initialLayout: "table",
+    availableLayouts: ["table", "list", "grid"],
   },
   decorators: [MuiThemeDecorator],
 };

From c6591ca462708267caf94ccb08f8ed46355e5af1 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Fri, 21 Jun 2024 11:25:34 -0400
Subject: [PATCH 09/15] refactor: fix some missing callback deps

---
 .../src/labs/DataComponents/TableSettings.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
index 60728397f0..da2cdd6ffa 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx
@@ -47,7 +47,7 @@ const TableSettings = ({
           rowDensity: value,
         }));
       },
-    [],
+    [setTableState],
   );
 
   const changeColumnVisibility = useCallback(
@@ -65,7 +65,7 @@ const TableSettings = ({
         },
       }));
     },
-    [],
+    [setTableState],
   );
 
   const isColumnVisibilityChecked = useMemo(() => {

From 695cd6d6a65dc73a7ee6dd9943437df0a5d9e1b6 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Mon, 24 Jun 2024 15:37:46 -0400
Subject: [PATCH 10/15] feat: adding row expansion to stack cards

---
 .../src/labs/DataComponents/StackCard.tsx     | 70 +++++++++++++++++--
 .../src/labs/DataComponents/StackContent.tsx  | 10 +++
 .../src/labs/DataComponents/TableContent.tsx  | 18 ++++-
 .../src/labs/DataComponents/componentTypes.ts |  1 +
 .../labs/DataComponents/tableConstants.tsx    |  5 ++
 .../properties/odyssey-react-mui.properties   |  4 +-
 .../DataComponents/DataComponents.stories.tsx | 39 +++++++++++
 7 files changed, 139 insertions(+), 8 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index aad67afce5..53a0e07ff7 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -16,11 +16,14 @@ import {
   memo,
   useMemo,
   ReactNode,
+  useState,
 } from "react";
 import {
+  IconButton as MuiIconButton,
   Card as MuiCard,
   CardActions as MuiCardActions,
   CardActionArea as MuiCardActionArea,
+  Tooltip as MuiTooltip,
 } from "@mui/material";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
@@ -34,13 +37,18 @@ import {
 } from "../../OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "../../Typography";
 import { MenuButton, MenuButtonProps } from "../../MenuButton";
-import { MoreIcon } from "../../icons.generated";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MoreIcon,
+} from "../../icons.generated";
 
 export const CARD_IMAGE_HEIGHT = "64px";
 
 export type StackCardProps = {
   children?: ReactNode;
   description?: string;
+  detailPanel?: ReactNode;
   image?: ReactElement;
   overline?: string;
   title?: string;
@@ -88,19 +96,22 @@ const CardContentContainer = styled("div", {
   gap: odysseyDesignTokens.Spacing3,
 }));
 
-const CardChildrenContainer = styled("div")(() => ({
+const CardChildrenContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   ["* + &"]: {
-    marginBlockStart: 3,
+    marginBlockStart: odysseyDesignTokens.Spacing3,
   },
 }));
 
 const buttonProviderValue = { isFullWidth: true };
 
 const StackCard = ({
-  Accessory,
+  Accessory: AccessoryProp,
   button,
   children,
   description,
+  detailPanel,
   image,
   menuButtonChildren,
   onClick,
@@ -110,6 +121,43 @@ const StackCard = ({
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
+  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState<boolean>(false);
+
+  const Accessory = useMemo(
+    () => (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+        }}
+      >
+        {AccessoryProp}
+        <MuiTooltip
+          title={
+            isDetailPanelOpen
+              ? t("table.rowexpansion.close")
+              : t("table.rowexpansion.open")
+          }
+        >
+          <MuiIconButton
+            children={
+              isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
+            }
+            onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}
+            aria-label={
+              isDetailPanelOpen
+                ? t("table.rowexpansion.close")
+                : t("table.rowexpansion.open")
+            }
+          />
+        </MuiTooltip>
+      </Box>
+    ),
+    [AccessoryProp, isDetailPanelOpen, t],
+  );
+
   const cardContent = useMemo(
     () => (
       <CardContentContainer odysseyDesignTokens={odysseyDesignTokens}>
@@ -139,21 +187,31 @@ const StackCard = ({
           )}
 
           {children && (
-            <CardChildrenContainer>{children}</CardChildrenContainer>
+            <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+              {children}
+            </CardChildrenContainer>
+          )}
+
+          {detailPanel && isDetailPanelOpen && (
+            <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+              {detailPanel}
+            </CardChildrenContainer>
           )}
         </Box>
       </CardContentContainer>
     ),
     [
+      odysseyDesignTokens,
       Accessory,
+      detailPanel,
       image,
-      odysseyDesignTokens,
       menuButtonChildren,
       overline,
       title,
       description,
       button,
       children,
+      isDetailPanelOpen,
     ],
   );
 
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
index ef17310a68..858badf3f4 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -120,6 +120,15 @@ const StackContent = ({
     [setRowSelection],
   );
 
+  const renderDetailPanelProp = stackOptions.renderDetailPanel;
+
+  const renderDetailPanel = useCallback(
+    (row: MRT_RowData) => {
+      return renderDetailPanelProp?.({ row });
+    },
+    [renderDetailPanelProp],
+  );
+
   const { updateRowOrder } = rowReorderingUtilities;
 
   const odysseyDesignTokens = useOdysseyDesignTokens();
@@ -200,6 +209,7 @@ const StackContent = ({
                     }
                     children={children}
                     description={description}
+                    detailPanel={renderDetailPanel(row)}
                     image={image}
                     key={row.id}
                     menuButtonChildren={
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index a06bd0694c..646a5aa20a 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -303,12 +303,28 @@ const TableContent = ({
     renderRowActions: ({ row }) => renderRowActions({ row }),
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
     enableRowDragging: hasRowReordering && Boolean(onReorderRows),
-    muiTableBodyRowProps: ({ table, row }) => ({
+    muiDetailPanelProps: ({ row }) => ({
+      sx: {
+        paddingBlock: row.getIsExpanded()
+          ? `${odysseyDesignTokens.Spacing3} !important`
+          : undefined,
+      },
+    }),
+    muiTableBodyRowProps: ({ table, row, isDetailPanel }) => ({
       className: draggableTableBodyRowClassName({
         currentRowId: row.id,
         draggingRowId: draggingRow?.id,
         hoveredRowId: table.getState().hoveredRow?.id,
       }),
+      sx: isDetailPanel
+        ? {
+            paddingBlock: "0 !important",
+            border: 0,
+            ["&:hover"]: {
+              backgroundColor: `${odysseyDesignTokens.HueNeutralWhite} !important`,
+            },
+          }
+        : {},
     }),
     muiRowDragHandleProps: ({ table, row }) => ({
       onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
index b8d12bf5d1..13ffde63bd 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts
@@ -93,6 +93,7 @@ export type TableProps = {
 export type StackProps = {
   cardProps: (row: MRT_RowData) => StackCardProps;
   maxGridColumns?: number;
+  renderDetailPanel?: (props: { row: MRT_RowData }) => ReactNode;
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
 };
 
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
index adbc9b1f5f..8e8dc06ec6 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
@@ -96,6 +96,11 @@ export const displayColumnDefOptions = {
   },
   "mrt-row-expand": {
     header: "",
+    muiTableBodyCellProps: {
+      sx: {
+        overflow: "visible",
+      },
+    },
   },
 };
 
diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
index 3deedc76ba..d049210e78 100644
--- a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
+++ b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -109,4 +109,6 @@ pagination.rowswithtotal = {{firstRow}}-{{lastRow}} of {{totalRows}} rows
 pagination.rowswithouttotal = {{firstRow}}-{{lastRow}} rows
 table.actions.selectall = Select all
 table.actions.selectnone = Select none
-table.actions.selectsome = {{selectedRowCount}} selected
\ No newline at end of file
+table.actions.selectsome = {{selectedRowCount}} selected
+table.rowexpansion.open = Open
+table.rowexpansion.close = Close
\ No newline at end of file
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
index f01c3b99d3..fc8f0f993f 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
@@ -41,6 +41,7 @@ import {
   Button,
   EmptyState,
   paginationTypeValues,
+  DataTableRenderDetailPanelType,
 } from "@okta/odyssey-react-mui";
 
 type DataViewMetaProps = DataViewProps &
@@ -562,3 +563,41 @@ export const DataStackComponent: StoryObj<DataViewMetaProps> = {
     );
   },
 };
+
+export const ExpandableRowsAndCards: StoryObj<DataViewMetaProps> = {
+  render: function Base(args) {
+    console.log(args);
+
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData, onReorderRows, onChangeRowSelection } = useDataCallbacks(
+      data,
+      setData,
+    );
+
+    const renderAdditionalContent = useCallback(
+      ({ row }: DataTableRenderDetailPanelType) => {
+        return <Box>This is additional content for row {row.id}</Box>;
+      },
+      [],
+    );
+
+    return (
+      <DataView
+        availableLayouts={["table", "grid"]}
+        initialLayout={"grid"}
+        getData={getData}
+        hasRowSelection={args.hasRowSelection}
+        onReorderRows={onReorderRows}
+        onChangeRowSelection={onChangeRowSelection}
+        tableOptions={{
+          columns: personColumns,
+          renderDetailPanel: renderAdditionalContent,
+        }}
+        stackOptions={{
+          cardProps: cardProps,
+          renderDetailPanel: renderAdditionalContent,
+        }}
+      />
+    );
+  },
+};

From ef841c05691c297482741ef51cebd15b2ec06def Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Tue, 25 Jun 2024 11:23:24 -0400
Subject: [PATCH 11/15] feat: add proper open mechanism to stack cards

---
 .../src/labs/DataComponents/StackCard.tsx     | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index 53a0e07ff7..0c8aeb1677 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -67,6 +67,17 @@ export type StackCardProps = {
     }
 );
 
+const AccessoryContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2,
+}));
+
 const ImageContainer = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren",
@@ -125,14 +136,7 @@ const StackCard = ({
 
   const Accessory = useMemo(
     () => (
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 2,
-        }}
-      >
+      <AccessoryContainer odysseyDesignTokens={odysseyDesignTokens}>
         {AccessoryProp}
         <MuiTooltip
           title={
@@ -153,9 +157,9 @@ const StackCard = ({
             }
           />
         </MuiTooltip>
-      </Box>
+      </AccessoryContainer>
     ),
-    [AccessoryProp, isDetailPanelOpen, t],
+    [AccessoryProp, isDetailPanelOpen, odysseyDesignTokens, t],
   );
 
   const cardContent = useMemo(

From 29a0a39a1644b49237b232293781898b82b27f5d Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Wed, 26 Jun 2024 08:06:57 -0400
Subject: [PATCH 12/15] feat: updating table translations

---
 .../src/labs/DataComponents/StackCard.tsx                 | 8 ++++----
 .../src/labs/DataComponents/TableContent.tsx              | 6 ++++++
 .../src/properties/odyssey-react-mui.properties           | 6 ++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index 0c8aeb1677..574a382e6f 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -141,8 +141,8 @@ const StackCard = ({
         <MuiTooltip
           title={
             isDetailPanelOpen
-              ? t("table.rowexpansion.close")
-              : t("table.rowexpansion.open")
+              ? t("table.rowexpansion.collapse")
+              : t("table.rowexpansion.expand")
           }
         >
           <MuiIconButton
@@ -152,8 +152,8 @@ const StackCard = ({
             onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}
             aria-label={
               isDetailPanelOpen
-                ? t("table.rowexpansion.close")
-                : t("table.rowexpansion.open")
+                ? t("table.rowexpansion.collapse")
+                : t("table.rowexpansion.expand")
             }
           />
         </MuiTooltip>
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index 646a5aa20a..984d9ae074 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -358,6 +358,12 @@ const TableContent = ({
     enableRowSelection: hasRowSelection,
     onRowSelectionChange: setRowSelection,
     renderEmptyRowsFallback: emptyStateContainer,
+    localization: {
+      collapse: t("table.rowexpansion.collapse"),
+      collapseAll: t("table.rowexpansion.collapseall"),
+      expand: t("table.rowexpansion.expand"),
+      expandAll: t("table.rowexpansion.expandall"),
+    },
   });
 
   return (
diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
index d049210e78..c4219747e2 100644
--- a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
+++ b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -110,5 +110,7 @@ pagination.rowswithouttotal = {{firstRow}}-{{lastRow}} rows
 table.actions.selectall = Select all
 table.actions.selectnone = Select none
 table.actions.selectsome = {{selectedRowCount}} selected
-table.rowexpansion.open = Open
-table.rowexpansion.close = Close
\ No newline at end of file
+table.rowexpansion.expand = Expand
+table.rowexpansion.expandall = Expand all
+table.rowexpansion.collapse = Collapse
+table.rowexpansion.collapseall = Collapse all
\ No newline at end of file

From 039dd857f8a7e501965696eb84792bcf72df96a1 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Thu, 27 Jun 2024 21:27:58 -0400
Subject: [PATCH 13/15] refactor: replace Box with MuiBox for native flex
 support

---
 packages/odyssey-react-mui/src/Card.tsx            | 14 +++++---------
 .../odyssey-react-mui/src/OdysseyCacheProvider.tsx | 11 +++++++++--
 .../DataComponents/DataComponents.stories.tsx      |  3 ---
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Card.tsx b/packages/odyssey-react-mui/src/Card.tsx
index 7549944d7f..de84902d20 100644
--- a/packages/odyssey-react-mui/src/Card.tsx
+++ b/packages/odyssey-react-mui/src/Card.tsx
@@ -18,6 +18,7 @@ import {
   useEffect,
 } from "react";
 import {
+  Box as MuiBox,
   Card as MuiCard,
   CardActions as MuiCardActions,
   CardActionArea as MuiCardActionArea,
@@ -33,7 +34,6 @@ import {
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "./Typography";
-import { Box } from "./Box";
 
 export const CARD_IMAGE_HEIGHT = "64px";
 
@@ -92,12 +92,8 @@ const Card = ({
 
   const cardContent = useMemo(
     () => (
-      <Box
-        sx={{
-          display: "flex",
-        }}
-      >
-        <Box>
+      <MuiBox display="flex">
+        <MuiBox>
           {image && (
             <ImageContainer
               odysseyDesignTokens={odysseyDesignTokens}
@@ -120,8 +116,8 @@ const Card = ({
               </ButtonContext.Provider>
             </MuiCardActions>
           )}
-        </Box>
-      </Box>
+        </MuiBox>
+      </MuiBox>
     ),
     [
       button,
diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
index 89c6d5edc0..6139df286d 100644
--- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
@@ -28,11 +28,15 @@ export type OdysseyCacheProviderProps = {
    * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.
    */
   emotionRoot?: HTMLStyleElement;
+  hasShadowDomElement?: boolean;
   nonce?: string;
   /**
    * Emotion renders into this HTML element.
    * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
    */
+  /**
+   * @deprecated Will be removed in a future Odyssey version. Use `hasShadowDomElement` instead.
+   */
   shadowDomElement?: HTMLDivElement | HTMLElement;
   stylisPlugins?: StylisPlugin[];
 };
@@ -40,25 +44,28 @@ export type OdysseyCacheProviderProps = {
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
+  hasShadowDomElement: hasShadowDomElementProp,
   nonce,
   shadowDomElement,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
+  const hasShadowDomElement = hasShadowDomElementProp || shadowDomElement;
+
   const emotionCache = useMemo(() => {
     return createCache({
       ...(emotionRoot && { container: emotionRoot }),
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
-      speedy: shadowDomElement ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
+      speedy: hasShadowDomElement ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
       ...(stylisPlugins && { stylisPlugins }),
     });
   }, [
     emotionRoot,
+    hasShadowDomElement,
     nonce,
-    shadowDomElement,
     stylisPlugins,
     uniqueAlphabeticalId,
   ]);
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
index fc8f0f993f..fca215366f 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
@@ -566,8 +566,6 @@ export const DataStackComponent: StoryObj<DataViewMetaProps> = {
 
 export const ExpandableRowsAndCards: StoryObj<DataViewMetaProps> = {
   render: function Base(args) {
-    console.log(args);
-
     const [data, setData] = useState<Person[]>(personData);
     const { getData, onReorderRows, onChangeRowSelection } = useDataCallbacks(
       data,
@@ -584,7 +582,6 @@ export const ExpandableRowsAndCards: StoryObj<DataViewMetaProps> = {
     return (
       <DataView
         availableLayouts={["table", "grid"]}
-        initialLayout={"grid"}
         getData={getData}
         hasRowSelection={args.hasRowSelection}
         onReorderRows={onReorderRows}

From 96d2bdedfde16b461bb33abd7eb7c2abc55ff3a1 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Sun, 30 Jun 2024 16:40:47 -0400
Subject: [PATCH 14/15] refactor: implement all code review feedback

---
 packages/odyssey-react-mui/src/Card.tsx       |  16 +-
 .../src/DataTable/DataTable.tsx               |   4 +-
 .../src/OdysseyCacheProvider.tsx              |  16 +-
 .../odyssey-react-mui/src/OdysseyProvider.tsx |   2 +-
 .../src/Pagination/usePagination.ts           |   4 +-
 .../labs/DataComponents/BulkActionsMenu.tsx   |  16 +-
 .../src/labs/DataComponents/DataStack.tsx     |  17 +-
 .../src/labs/DataComponents/DataTable.tsx     |  39 ++-
 .../src/labs/DataComponents/DataView.tsx      |  59 ++--
 .../src/labs/DataComponents/DetailPanel.tsx   |  31 ++
 .../labs/DataComponents/LayoutSwitcher.tsx    |  36 +-
 .../src/labs/DataComponents/RowActions.tsx    |   4 +-
 .../src/labs/DataComponents/StackCard.tsx     |   2 +-
 .../src/labs/DataComponents/StackContent.tsx  | 129 +++----
 .../src/labs/DataComponents/TableContent.tsx  |  40 ++-
 .../src/labs/DataComponents/fetchData.ts      |   6 +-
 .../labs/DataComponents/tableConstants.tsx    |   8 +-
 .../src/labs/DataFilters.tsx                  |  12 +-
 .../properties/odyssey-react-mui.properties   |   5 +-
 .../DataComponents/DataComponents.stories.tsx | 316 +++++++++++++++++-
 .../DataComponents/dataFunctions.ts           |   4 +-
 21 files changed, 581 insertions(+), 185 deletions(-)
 create mode 100644 packages/odyssey-react-mui/src/labs/DataComponents/DetailPanel.tsx

diff --git a/packages/odyssey-react-mui/src/Card.tsx b/packages/odyssey-react-mui/src/Card.tsx
index de84902d20..3097fd42ba 100644
--- a/packages/odyssey-react-mui/src/Card.tsx
+++ b/packages/odyssey-react-mui/src/Card.tsx
@@ -18,7 +18,6 @@ import {
   useEffect,
 } from "react";
 import {
-  Box as MuiBox,
   Card as MuiCard,
   CardActions as MuiCardActions,
   CardActionArea as MuiCardActionArea,
@@ -34,6 +33,7 @@ import {
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "./Typography";
+import { Box } from "./Box";
 
 export const CARD_IMAGE_HEIGHT = "64px";
 
@@ -64,7 +64,7 @@ const ImageContainer = styled("div", {
 }>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({
   display: "flex",
   alignItems: "flex-start",
-  maxHeight: `${CARD_IMAGE_HEIGHT}`,
+  maxHeight: CARD_IMAGE_HEIGHT,
   marginBlockEnd: odysseyDesignTokens.Spacing5,
   paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,
 }));
@@ -77,6 +77,10 @@ const MenuButtonContainer = styled("div", {
   top: odysseyDesignTokens.Spacing3,
 }));
 
+const CardContentContainer = styled("div")(() => ({
+  display: "flex",
+}));
+
 const buttonProviderValue = { isFullWidth: true };
 
 const Card = ({
@@ -92,8 +96,8 @@ const Card = ({
 
   const cardContent = useMemo(
     () => (
-      <MuiBox display="flex">
-        <MuiBox>
+      <CardContentContainer>
+        <Box>
           {image && (
             <ImageContainer
               odysseyDesignTokens={odysseyDesignTokens}
@@ -116,8 +120,8 @@ const Card = ({
               </ButtonContext.Provider>
             </MuiCardActions>
           )}
-        </MuiBox>
-      </MuiBox>
+        </Box>
+      </CardContentContainer>
     ),
     [
       button,
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
index ae6d5b0547..e727eabdd8 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -34,6 +34,7 @@ import {
   MRT_ColumnDef,
   MRT_TableInstance,
 } from "material-react-table";
+import { useTranslation } from "react-i18next";
 import {
   ArrowDownIcon,
   ArrowUnsortedIcon,
@@ -61,7 +62,6 @@ import { useScrollIndication } from "./useScrollIndication";
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState";
 import { Callout } from "../Callout";
-import { t } from "i18next";
 
 export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {
   /**
@@ -387,6 +387,8 @@ const DataTable = ({
   searchDelayTime,
   totalRows,
 }: DataTableProps) => {
+  const { t } = useTranslation();
+
   const [data, setData] = useState<DataTableRowData[]>([]);
   const [pagination, setPagination] = useState({
     pageIndex: currentPage,
diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
index 6139df286d..3973c7e726 100644
--- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx
@@ -28,7 +28,7 @@ export type OdysseyCacheProviderProps = {
    * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.
    */
   emotionRoot?: HTMLStyleElement;
-  hasShadowDomElement?: boolean;
+  hasShadowDom?: boolean;
   nonce?: string;
   /**
    * Emotion renders into this HTML element.
@@ -44,14 +44,14 @@ export type OdysseyCacheProviderProps = {
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
-  hasShadowDomElement: hasShadowDomElementProp,
+  hasShadowDom: hasShadowDomProp,
   nonce,
   shadowDomElement,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
-  const hasShadowDomElement = hasShadowDomElementProp || shadowDomElement;
+  const hasShadowDom = hasShadowDomProp || shadowDomElement;
 
   const emotionCache = useMemo(() => {
     return createCache({
@@ -59,16 +59,10 @@ const OdysseyCacheProvider = ({
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
-      speedy: hasShadowDomElement ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
+      speedy: hasShadowDom ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
       ...(stylisPlugins && { stylisPlugins }),
     });
-  }, [
-    emotionRoot,
-    hasShadowDomElement,
-    nonce,
-    stylisPlugins,
-    uniqueAlphabeticalId,
-  ]);
+  }, [emotionRoot, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };
diff --git a/packages/odyssey-react-mui/src/OdysseyProvider.tsx b/packages/odyssey-react-mui/src/OdysseyProvider.tsx
index 69e8f89368..228ee84535 100644
--- a/packages/odyssey-react-mui/src/OdysseyProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyProvider.tsx
@@ -49,7 +49,7 @@ const OdysseyProvider = <SupportedLanguages extends string>({
   <OdysseyCacheProvider
     nonce={nonce}
     emotionRoot={emotionRoot}
-    shadowDomElement={shadowDomElement}
+    hasShadowDom={Boolean(shadowDomElement)}
     stylisPlugins={stylisPlugins}
   >
     <OdysseyThemeProvider
diff --git a/packages/odyssey-react-mui/src/Pagination/usePagination.ts b/packages/odyssey-react-mui/src/Pagination/usePagination.ts
index c4732900d3..5f90643861 100644
--- a/packages/odyssey-react-mui/src/Pagination/usePagination.ts
+++ b/packages/odyssey-react-mui/src/Pagination/usePagination.ts
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
 type UsePaginationType = {
   pageIndex: number;
@@ -23,6 +23,8 @@ export const usePagination = ({
   pageSize,
   totalRows,
 }: UsePaginationType) => {
+  const { t } = useTranslation();
+
   const firstRow = pageSize * (pageIndex - 1) + 1;
   const lastRow = firstRow + (pageSize - 1);
   if (totalRows && lastRow > totalRows) {
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
index 9bf9d0a6ae..bc39f705fc 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx
@@ -41,7 +41,7 @@ const BulkActionsContainer = styled("div", {
   gap: odysseyDesignTokens.Spacing2,
 }));
 
-const BulkActionMenu = ({
+const BulkActionsMenu = ({
   data,
   menuItems,
   rowSelection,
@@ -50,9 +50,7 @@ const BulkActionMenu = ({
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
-  const selectedRowCount = Object.values(rowSelection).filter(
-    (value) => value === true,
-  ).length;
+  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;
 
   const handleSelectAll = useCallback(() => {
     const rows = Object.fromEntries(data.map((row) => [row.id, true]));
@@ -77,13 +75,13 @@ const BulkActionMenu = ({
       )}
       <Box>
         <Button
-          isDisabled={selectedRowCount === 20}
+          isDisabled={selectedRowCount === data.length} // Disabled if all are selected
           label={t("table.actions.selectall")}
           onClick={handleSelectAll}
           variant="secondary"
         />
         <Button
-          isDisabled={selectedRowCount === 0}
+          isDisabled={selectedRowCount === 0} // Disabled if none are selected
           label={t("table.actions.selectnone")}
           onClick={handleSelectNone}
           variant="secondary"
@@ -93,7 +91,7 @@ const BulkActionMenu = ({
   );
 };
 
-const MemoizedBulkActionMenu = memo(BulkActionMenu);
-MemoizedBulkActionMenu.displayName = "BulkActionMenu";
+const MemoizedBulkActionsMenu = memo(BulkActionsMenu);
+MemoizedBulkActionsMenu.displayName = "BulkActionsMenu";
 
-export { MemoizedBulkActionMenu as BulkActionMenu };
+export { MemoizedBulkActionsMenu as BulkActionsMenu };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
index c9e36ba3bd..2bfd3359d7 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 
 import { availableStackLayouts } from "./constants";
 import {
@@ -54,6 +54,15 @@ const DataStack = ({
   searchDelayTime,
   totalRows,
 }: DataStackProps) => {
+  const stackOptions = useMemo(
+    () => ({
+      cardProps,
+      maxGridColumns,
+      rowActionMenuItems,
+    }),
+    [cardProps, maxGridColumns, rowActionMenuItems],
+  );
+
   return (
     <DataView
       availableLayouts={availableLayouts}
@@ -78,11 +87,7 @@ const DataStack = ({
       paginationType={paginationType}
       resultsPerPage={resultsPerPage}
       searchDelayTime={searchDelayTime}
-      stackOptions={{
-        cardProps,
-        maxGridColumns,
-        rowActionMenuItems,
-      }}
+      stackOptions={stackOptions}
       totalRows={totalRows}
     />
   );
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
index 55a107a955..707c3bc6b5 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 
 import { DataView } from "./DataView";
 import { TableProps, UniversalProps } from "./componentTypes";
@@ -50,6 +50,31 @@ const DataTable = ({
   searchDelayTime,
   totalRows,
 }: DataTableProps) => {
+  const tableOptions = useMemo(
+    () => ({
+      columns,
+      hasChangeableDensity,
+      hasColumnResizing,
+      hasColumnVisibility,
+      hasSorting,
+      initialDensity,
+      renderDetailPanel,
+      rowActionButtons,
+      rowActionMenuItems,
+    }),
+    [
+      columns,
+      hasChangeableDensity,
+      hasColumnResizing,
+      hasColumnVisibility,
+      hasSorting,
+      initialDensity,
+      renderDetailPanel,
+      rowActionButtons,
+      rowActionMenuItems,
+    ],
+  );
+
   return (
     <DataView
       availableLayouts={["table"]}
@@ -74,17 +99,7 @@ const DataTable = ({
       paginationType={paginationType}
       resultsPerPage={resultsPerPage}
       searchDelayTime={searchDelayTime}
-      tableOptions={{
-        columns,
-        hasChangeableDensity,
-        hasColumnResizing,
-        hasColumnVisibility,
-        hasSorting,
-        initialDensity,
-        renderDetailPanel,
-        rowActionButtons,
-        rowActionMenuItems,
-      }}
+      tableOptions={tableOptions}
       totalRows={totalRows}
     />
   );
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
index 22a1fd3ed5..8c5adc1c82 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DataView.tsx
@@ -16,7 +16,7 @@ import {
   MRT_RowData,
   MRT_RowSelectionState,
 } from "material-react-table";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
 import {
   availableLayouts as allAvailableLayouts,
@@ -29,9 +29,9 @@ import {
   TableState,
 } from "./componentTypes";
 import { Box } from "../../Box";
-import { BulkActionMenu } from "./BulkActionsMenu";
+import { BulkActionsMenu } from "./BulkActionsMenu";
 import { Callout } from "../../Callout";
-import { DataFilter, DataFilters } from "../DataFilters";
+import { DataFilters } from "../DataFilters";
 import { EmptyState } from "../../EmptyState";
 import { fetchData } from "./fetchData";
 import { LayoutSwitcher } from "./LayoutSwitcher";
@@ -73,7 +73,8 @@ const DataView = ({
   currentPage = 1,
   emptyPlaceholder,
   errorMessage: errorMessageProp,
-  getData: getDataFn,
+  filters: filtersProp,
+  getData,
   getRowId: getRowIdProp,
   hasFilters,
   hasPagination,
@@ -97,6 +98,7 @@ const DataView = ({
   totalRows,
 }: DataViewProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
   const [currentLayout, setCurrentLayout] = useState<Layout>(
     initialLayout ?? availableLayouts[0],
@@ -112,8 +114,11 @@ const DataView = ({
     useState<UniversalProps["errorMessage"]>(errorMessageProp);
 
   const [search, setSearch] = useState<string>("");
-  const [initialFilters, setInitialFilters] = useState<DataFilter[]>();
-  const [filters, setFilters] = useState<DataFilter[]>();
+
+  const [initialFilters, setInitialFilters] =
+    useState<UniversalProps["filters"]>(filtersProp);
+  const [filters, setFilters] =
+    useState<UniversalProps["filters"]>(filtersProp);
 
   const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();
 
@@ -134,36 +139,38 @@ const DataView = ({
     rowDensity: tableOptions?.initialDensity ?? densityValues[0],
   });
 
-  const shouldShowFilters = useMemo(
-    () => hasSearch || hasFilters,
-    [hasSearch, hasFilters],
-  );
+  const shouldShowFilters = hasSearch || hasFilters;
 
   const availableFilters = useFilterConversion({
     filters: filters,
     columns: tableOptions?.columns,
   });
 
+  useEffect(() => {
+    if (!initialFilters && availableFilters) {
+      setInitialFilters(availableFilters);
+    }
+  }, [availableFilters, initialFilters]);
+
   const dataQueryParams = useMemo(
     () => ({
       page: pagination.pageIndex,
       resultsPerPage: pagination.pageSize,
       search,
-      filters,
+      filters: availableFilters,
       sort: tableState?.columnSorting,
     }),
-    [pagination, search, filters, tableState?.columnSorting],
+    [
+      pagination.pageIndex,
+      pagination.pageSize,
+      search,
+      availableFilters,
+      tableState?.columnSorting,
+    ],
   );
 
   const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;
 
-  // Set initial filters
-  useEffect(() => {
-    if (!initialFilters && filters) {
-      setInitialFilters(filters);
-    }
-  }, [filters, initialFilters]);
-
   // Update pagination state if props change
   useEffect(() => {
     setPagination({
@@ -175,14 +182,14 @@ const DataView = ({
   // Retrieve the data
   useEffect(() => {
     fetchData({
-      getDataFn,
-      setIsLoading,
-      setErrorMessage,
+      dataQueryParams,
       errorMessageProp,
+      getData,
       setData,
-      dataQueryParams,
+      setErrorMessage,
+      setIsLoading,
     });
-  }, [dataQueryParams, errorMessageProp, getDataFn]);
+  }, [dataQueryParams, errorMessageProp, getData]);
 
   // When data is updated
   useEffect(() => {
@@ -233,7 +240,7 @@ const DataView = ({
     }
 
     return;
-  }, [emptyPlaceholder, noResultsPlaceholder, isEmpty, isNoResults]);
+  }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);
 
   const additionalActions = useMemo(
     () => (
@@ -297,7 +304,7 @@ const DataView = ({
 
       {(bulkActionMenuItems || hasRowSelection) && (
         <BulkActionsContainer>
-          <BulkActionMenu
+          <BulkActionsMenu
             data={data}
             menuItems={bulkActionMenuItems}
             rowSelection={rowSelection}
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/DetailPanel.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/DetailPanel.tsx
new file mode 100644
index 0000000000..809bd959f1
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/DetailPanel.tsx
@@ -0,0 +1,31 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { StackProps } from "./componentTypes";
+import { DataRow } from "./dataTypes";
+
+const DetailPanel = ({
+  row,
+  renderDetailPanel,
+}: {
+  row: DataRow;
+  renderDetailPanel: StackProps["renderDetailPanel"];
+}) => {
+  if (!renderDetailPanel) return null;
+  return renderDetailPanel({ row });
+};
+
+const MemoizedDetailPanel = memo(DetailPanel);
+MemoizedDetailPanel.displayName = "DetailPanel";
+
+export { MemoizedDetailPanel as DetailPanel };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
index a4eb530c51..ab5c704387 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/LayoutSwitcher.tsx
@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Dispatch, memo, useCallback, SetStateAction } from "react";
+import { Dispatch, memo, useCallback, SetStateAction, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 
 import { AvailableLayouts, Layout } from "./componentTypes";
 import { MenuButton } from "../../MenuButton";
@@ -27,6 +28,8 @@ const LayoutSwitcher = ({
   currentLayout,
   setCurrentLayout,
 }: LayoutSwitcherProps) => {
+  const { t } = useTranslation();
+
   const changeLayout = useCallback(
     (value: Layout) => {
       setCurrentLayout(value);
@@ -34,6 +37,16 @@ const LayoutSwitcher = ({
     [setCurrentLayout],
   );
 
+  const memoizedMenuItems = useMemo(
+    () =>
+      availableLayouts.map((value: Layout) => ({
+        value,
+        onClick: () => changeLayout(value),
+        label: t(`dataview.layout.${value}`),
+      })),
+    [availableLayouts, changeLayout, t],
+  );
+
   return (
     <MenuButton
       ariaLabel="Layout"
@@ -41,18 +54,15 @@ const LayoutSwitcher = ({
       menuAlignment="right"
       shouldCloseOnSelect={false}
     >
-      <>
-        {typeof availableLayouts !== "string" &&
-          availableLayouts.map((value: Layout) => (
-            <MenuItem
-              key={value}
-              isSelected={currentLayout === value}
-              onClick={() => changeLayout(value)}
-            >
-              {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
-            </MenuItem>
-          ))}
-      </>
+      {memoizedMenuItems.map(({ value, onClick, label }) => (
+        <MenuItem
+          key={value}
+          isSelected={currentLayout === value}
+          onClick={onClick}
+        >
+          {label}
+        </MenuItem>
+      ))}
     </MenuButton>
   );
 };
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
index 9d041f8f55..4587ae6c40 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/RowActions.tsx
@@ -30,7 +30,7 @@ export type RowActionsProps = {
   row: MRT_Row<MRT_RowData> | MRT_RowData;
   rowActionButtons?: (
     row: MRT_RowData,
-  ) => ReactElement<typeof Button | typeof Fragment>;
+  ) => ReactElement<typeof Button> | ReactElement<typeof Fragment>;
   rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps["children"];
   rowIndex: number;
   totalRows?: DataTableProps["totalRows"];
@@ -77,7 +77,7 @@ const RowActions = ({
 
   return (
     <>
-      {rowActionMenuItems && <>{rowActionMenuItems(row)}</>}
+      {rowActionMenuItems && rowActionMenuItems(row)}
       {rowActionMenuItems && updateRowOrder && <hr />}
       {updateRowOrder && (
         <>
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index 574a382e6f..0ee37df228 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -110,7 +110,7 @@ const CardContentContainer = styled("div", {
 const CardChildrenContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  ["* + &"]: {
+  ["div + &"]: {
     marginBlockStart: odysseyDesignTokens.Spacing3,
   },
 }));
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
index 858badf3f4..066e600307 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -29,6 +29,7 @@ import {
 import { RowActions } from "./RowActions";
 import { StackCard } from "./StackCard";
 import { StackLayout, StackProps, UniversalProps } from "./componentTypes";
+import { DetailPanel } from "./DetailPanel";
 
 export type StackContentProps = {
   currentLayout: StackLayout;
@@ -87,6 +88,53 @@ export type StackContentProps = {
   totalRows: UniversalProps["totalRows"];
 };
 
+const StackContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop !== "currentLayout" &&
+    prop !== "maxGridColumns",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  currentLayout: StackLayout;
+  maxGridColumns: number;
+}>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({
+  display: currentLayout === "list" ? "flex" : "grid",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing5,
+
+  ...(currentLayout === "grid" && {
+    [`@media (max-width: 720px)`]: {
+      gridTemplateColumns: "repeat(1, 1fr)",
+    },
+    [`@media (min-width: 720px) and (max-width: 960px)`]: {
+      gridTemplateColumns: "repeat(2, 1fr)",
+    },
+    [`@media (min-width: 960px)`]: {
+      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,
+    },
+  }),
+}));
+
+const LoadingContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  paddingBlock: odysseyDesignTokens.Spacing5,
+}));
+
+const CheckboxContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,
+}));
+
 const StackContent = ({
   currentLayout,
   data,
@@ -105,73 +153,23 @@ const StackContent = ({
   stackOptions,
   totalRows,
 }: StackContentProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
   const handleRowSelectionChange = useCallback(
     (row: MRT_RowData) => {
-      setRowSelection((prev) => {
-        const newSelection = { ...prev };
-        if (newSelection[row.id]) {
-          delete newSelection[row.id];
-        } else {
-          newSelection[row.id] = true;
-        }
-        return newSelection;
-      });
+      setRowSelection((rowSelection) =>
+        Object.fromEntries(
+          row.id in rowSelection
+            ? Object.entries(rowSelection).filter(([key]) => key !== row.id)
+            : Object.entries(rowSelection).concat([[row.id, true]]),
+        ),
+      );
     },
     [setRowSelection],
   );
 
-  const renderDetailPanelProp = stackOptions.renderDetailPanel;
-
-  const renderDetailPanel = useCallback(
-    (row: MRT_RowData) => {
-      return renderDetailPanelProp?.({ row });
-    },
-    [renderDetailPanelProp],
-  );
-
   const { updateRowOrder } = rowReorderingUtilities;
 
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const StackContainer = styled("div", {
-    shouldForwardProp: (prop) =>
-      prop !== "odysseyDesignTokens" &&
-      prop !== "currentLayout" &&
-      prop !== "maxGridColumns",
-  })<{
-    odysseyDesignTokens: DesignTokens;
-    currentLayout: StackLayout;
-    maxGridColumns: number;
-  }>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({
-    display: currentLayout === "list" ? "flex" : "grid",
-    flexDirection: "column",
-    gap: odysseyDesignTokens.Spacing5,
-
-    ...(currentLayout === "grid" && {
-      [`@media (max-width: 720px)`]: {
-        gridTemplateColumns: "repeat(1, 1fr)",
-      },
-      [`@media (min-width: 720px) and (max-width: 960px)`]: {
-        gridTemplateColumns: "repeat(2, 1fr)",
-      },
-      [`@media (min-width: 960px)`]: {
-        gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,
-      },
-    }),
-  }));
-
-  const LoadingContainer = styled("div", {
-    shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-  })<{
-    odysseyDesignTokens: DesignTokens;
-  }>(({ odysseyDesignTokens }) => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    paddingBlock: odysseyDesignTokens.Spacing5,
-  }));
-
   return (
     <StackContainer
       odysseyDesignTokens={odysseyDesignTokens}
@@ -199,17 +197,24 @@ const StackContent = ({
                     Accessory={
                       hasRowSelection && (
                         // Negative margin to counteract the checkbox's inbuilt spacing
-                        <Box sx={{ marginBlockStart: -1 }}>
+                        <CheckboxContainer
+                          odysseyDesignTokens={odysseyDesignTokens}
+                        >
                           <MuiCheckbox
                             checked={rowSelection[row.id] ?? false}
                             onChange={() => handleRowSelectionChange(row)}
                           />
-                        </Box>
+                        </CheckboxContainer>
                       )
                     }
                     children={children}
                     description={description}
-                    detailPanel={renderDetailPanel(row)}
+                    detailPanel={
+                      <DetailPanel
+                        row={row}
+                        renderDetailPanel={stackOptions.renderDetailPanel}
+                      />
+                    }
                     image={image}
                     key={row.id}
                     menuButtonChildren={
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index 984d9ae074..67aa85ba10 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -19,6 +19,7 @@ import {
   useState,
   ReactNode,
   Dispatch,
+  ReactElement,
 } from "react";
 import styled, { CSSObject } from "@emotion/styled";
 import {
@@ -176,11 +177,12 @@ const TableContent = ({
       "mrt-row-drag",
       "mrt-row-select",
       "mrt-row-expand",
-      ...columnIds,
+      ...(columnIds?.filter((id): id is string => typeof id === "string") ||
+        []),
       "mrt-row-actions",
     ],
     [columnIds],
-  ) as string[];
+  );
 
   const rowDensityClassName = useMemo(() => {
     return tableState.rowDensity === "spacious"
@@ -190,17 +192,15 @@ const TableContent = ({
         : "MuiTableBody-default";
   }, [tableState]);
 
-  const defaultCell = useCallback(
-    ({ cell }: { cell: DataTableCell<MRT_RowData> }) => {
-      const value = cell.getValue<string>();
-      const hasTextWrapping =
-        cell.column.columnDef.hasTextWrapping ||
-        cell.column.columnDef.enableWrapping;
-
-      return hasTextWrapping ? value : <TextWrapper>{value}</TextWrapper>;
-    },
-    [],
-  );
+  const defaultCell = useCallback<
+    ({ cell }: { cell: DataTableCell<MRT_RowData> }) => ReactElement | string
+  >(({ cell }) => {
+    const value = cell.getValue<string>();
+    const hasTextWrapping =
+      cell.column.columnDef.hasTextWrapping ||
+      cell.column.columnDef.enableWrapping;
+    return hasTextWrapping ? value : <TextWrapper>{value}</TextWrapper>;
+  }, []);
 
   const {
     draggableTableBodyRowClassName,
@@ -256,9 +256,14 @@ const TableContent = ({
     ],
   );
 
+  const innerWidthStyle = useMemo(
+    () => ({ width: tableInnerContainerWidth }),
+    [tableInnerContainerWidth],
+  );
+
   const emptyStateContainer = useCallback(
-    () => <Box sx={{ width: tableInnerContainerWidth }}>{emptyState}</Box>,
-    [tableInnerContainerWidth, emptyState],
+    () => <Box sx={innerWidthStyle}>{emptyState}</Box>,
+    [innerWidthStyle, emptyState],
   );
 
   const dataTable = useMaterialReactTable({
@@ -279,8 +284,9 @@ const TableContent = ({
       ExpandMoreIcon: ChevronDownIcon,
     },
     ...dataTableImmutableSettings,
-    displayColumnDefOptions:
-      displayColumnDefOptions as MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"],
+    displayColumnDefOptions: displayColumnDefOptions satisfies Partial<
+      MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"]
+    >,
     muiTableProps: {
       ref: tableContentRef,
     },
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
index d425270113..78223fd849 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/fetchData.ts
@@ -20,7 +20,7 @@ import { UniversalProps } from "./componentTypes";
 type DataRequestType = {
   dataQueryParams: DataQueryParamsType;
   errorMessageProp: UniversalProps["errorMessage"];
-  getDataFn: UniversalProps["getData"];
+  getData: UniversalProps["getData"];
   setData: Dispatch<SetStateAction<MRT_RowData[]>>;
   setErrorMessage: Dispatch<SetStateAction<UniversalProps["errorMessage"]>>;
   setIsLoading: Dispatch<SetStateAction<boolean>>;
@@ -29,7 +29,7 @@ type DataRequestType = {
 export const fetchData = async ({
   dataQueryParams,
   errorMessageProp,
-  getDataFn,
+  getData,
   setData,
   setErrorMessage,
   setIsLoading,
@@ -37,7 +37,7 @@ export const fetchData = async ({
   setIsLoading(true);
   setErrorMessage(errorMessageProp);
   try {
-    const incomingData = await getDataFn?.(dataQueryParams);
+    const incomingData = await getData?.(dataQueryParams);
     setData(incomingData);
   } catch (error) {
     setErrorMessage(typeof error === "string" ? error : t("table.error"));
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
index 8e8dc06ec6..1bc3058252 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
@@ -48,7 +48,7 @@ export const displayColumnDefOptions = {
     header: "",
     grow: true,
     muiTableBodyCellProps: {
-      align: "right",
+      align: "right" as const,
       sx: {
         overflow: "visible",
         width: "unset",
@@ -56,7 +56,7 @@ export const displayColumnDefOptions = {
       className: "ods-actions-cell",
     },
     muiTableHeadCellProps: {
-      align: "right",
+      align: "right" as const,
       sx: {
         width: "unset",
       },
@@ -88,10 +88,10 @@ export const displayColumnDefOptions = {
   },
   "mrt-row-select": {
     muiTableHeadCellProps: {
-      padding: "checkbox",
+      padding: "checkbox" as const,
     },
     muiTableBodyCellProps: {
-      padding: "checkbox",
+      padding: "checkbox" as const,
     },
   },
   "mrt-row-expand": {
diff --git a/packages/odyssey-react-mui/src/labs/DataFilters.tsx b/packages/odyssey-react-mui/src/labs/DataFilters.tsx
index c828a2f0d5..62e81d1647 100644
--- a/packages/odyssey-react-mui/src/labs/DataFilters.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataFilters.tsx
@@ -283,10 +283,9 @@ const DataFilters = ({
 
   const [searchValue, setSearchValue] = useState<string>(defaultSearchTerm);
 
-  const activeFilters = useMemo(
-    () => filters.filter((filter) => filter.value),
-    [filters],
-  );
+  const activeFilters = useMemo(() => {
+    return filters.filter((filter) => filter.value);
+  }, [filters]);
 
   const [isFiltersMenuOpen, setIsFiltersMenuOpen] = useState<boolean>(false);
 
@@ -338,11 +337,14 @@ const DataFilters = ({
 
   const updateFilters = useCallback<UpdateFiltersOrValues>(
     ({ filterId, value }) => {
+      setInputValues((prevInputValues) => ({
+        ...prevInputValues,
+        [filterId]: value,
+      }));
       const updatedFilters = filtersProp.map((filter) => ({
         ...filter,
         value: filter.id === filterId ? value : inputValues[filter.id],
       }));
-
       setFilters(updatedFilters);
     },
     [inputValues, filtersProp],
diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
index c4219747e2..b43c0db521 100644
--- a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
+++ b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -113,4 +113,7 @@ table.actions.selectsome = {{selectedRowCount}} selected
 table.rowexpansion.expand = Expand
 table.rowexpansion.expandall = Expand all
 table.rowexpansion.collapse = Collapse
-table.rowexpansion.collapseall = Collapse all
\ No newline at end of file
+table.rowexpansion.collapseall = Collapse all
+dataview.layout.table = Table
+dataview.layout.grid = Grid
+dataview.layout.list = List
\ No newline at end of file
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
index fca215366f..41647a3a5b 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
@@ -24,6 +24,7 @@ import {
   StackProps,
   DataTable,
   DataStack,
+  UpdateFiltersOrValues,
 } from "@okta/odyssey-react-mui/labs";
 import { PauseIcon, RefreshIcon } from "@okta/odyssey-react-mui/icons";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -33,7 +34,13 @@ import {
   data as personData,
 } from "./personData";
 import { filterData, reorderData } from "./dataFunctions";
-import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import {
   Box,
   MenuItem,
@@ -41,7 +48,7 @@ import {
   Button,
   EmptyState,
   paginationTypeValues,
-  DataTableRenderDetailPanelType,
+  DataTableRowData,
 } from "@okta/odyssey-react-mui";
 
 type DataViewMetaProps = DataViewProps &
@@ -573,7 +580,7 @@ export const ExpandableRowsAndCards: StoryObj<DataViewMetaProps> = {
     );
 
     const renderAdditionalContent = useCallback(
-      ({ row }: DataTableRenderDetailPanelType) => {
+      ({ row }: { row: DataTableRowData }) => {
         return <Box>This is additional content for row {row.id}</Box>;
       },
       [],
@@ -598,3 +605,306 @@ export const ExpandableRowsAndCards: StoryObj<DataViewMetaProps> = {
     );
   },
 };
+
+export const Truncation: StoryObj<DataViewMetaProps> = {
+  render: function C() {
+    const columns = useMemo(
+      () => [
+        {
+          accessorKey: "truncated",
+          header: "Truncated",
+        },
+        {
+          accessorKey: "wrapped",
+          header: "Wrapped",
+          hasTextWrapping: true,
+        },
+      ],
+      [],
+    );
+
+    const getData = useCallback(() => {
+      const data: Array<{ truncated: string; wrapped: string }> = [];
+      [...Array(10)].forEach(() => {
+        data.push({
+          truncated:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",
+          wrapped:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",
+        });
+      }); // Corrected the missing parenthesis here
+      return data;
+    }, []);
+
+    return <DataTable columns={columns} getData={getData} hasColumnResizing />;
+  },
+};
+
+export const Empty: StoryObj<DataViewMetaProps> = {
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false,
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Person[]>(personData);
+    const { onReorderRows, onChangeRowSelection } = useDataCallbacks(
+      data,
+      setData,
+    );
+
+    const emptyPlaceholder = useMemo(
+      () => (
+        <EmptyState
+          heading="Start by adding data assets"
+          description="All relevant data will be displayed and can be searched and filtered"
+          PrimaryCallToActionComponent={
+            <Button variant="primary" label="Primary" />
+          }
+          SecondaryCallToActionComponent={
+            <Button variant="secondary" label="Secondary" />
+          }
+        />
+      ),
+      [],
+    );
+
+    return (
+      <DataTable
+        {...props}
+        columns={personColumns}
+        getData={() => []}
+        onReorderRows={onReorderRows}
+        onChangeRowSelection={onChangeRowSelection}
+        emptyPlaceholder={emptyPlaceholder}
+      />
+    );
+  },
+};
+
+export const CustomFilters: StoryObj<DataViewMetaProps> = {
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: false,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false,
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData, onReorderRows } = useDataCallbacks(data, setData);
+
+    const filters = useMemo(
+      () => [
+        ...personColumns,
+        {
+          id: "startLetter",
+          label: "Name starting with...",
+          render: (updateFilters: UpdateFiltersOrValues) => (
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignContent: "stretch",
+                gap: 2,
+              }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                }}
+              >
+                <Button
+                  variant="secondary"
+                  label="Vowel"
+                  isFullWidth
+                  onClick={() =>
+                    updateFilters({ filterId: "startLetter", value: "vowel" })
+                  }
+                />
+              </Box>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                }}
+              >
+                <Button
+                  variant="secondary"
+                  label="Consonant"
+                  isFullWidth
+                  onClick={() =>
+                    updateFilters({
+                      filterId: "startLetter",
+                      value: "consonant",
+                    })
+                  }
+                />
+              </Box>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                }}
+              >
+                <Button
+                  variant="secondary"
+                  label="Any"
+                  isFullWidth
+                  onClick={() =>
+                    updateFilters({ filterId: "startLetter", value: "any" })
+                  }
+                />
+              </Box>
+            </Box>
+          ),
+        },
+      ],
+      [],
+    );
+
+    return (
+      <DataTable
+        {...props}
+        columns={personColumns}
+        filters={filters}
+        getData={getData}
+        onReorderRows={onReorderRows}
+      />
+    );
+  },
+};
+
+export const FilterWithCustomRender: StoryObj<DataViewMetaProps> = {
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false,
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData, onReorderRows, onChangeRowSelection } = useDataCallbacks(
+      data,
+      setData,
+    );
+
+    const filters = useMemo(() => {
+      // Filter out the column with the id of "type"
+      const filteredPersonColumns = personColumns.filter(
+        (column) => column.id !== "visit",
+      );
+
+      return [
+        ...filteredPersonColumns,
+        {
+          id: "startLetter",
+          label: "Starting letter ",
+          render: (updateFilters: UpdateFiltersOrValues) => (
+            <Box>
+              <Button
+                variant="secondary"
+                label="🛰️ Vowel"
+                onClick={() =>
+                  updateFilters({ filterId: "startLetter", value: "vowel" })
+                }
+              />
+              <Button
+                variant="secondary"
+                label="🛸 Consonant"
+                onClick={() =>
+                  updateFilters({ filterId: "startLetter", value: "consonant" })
+                }
+              />
+              <Button
+                variant="secondary"
+                label="🤷‍♂️ Any"
+                onClick={() =>
+                  updateFilters({ filterId: "startLetter", value: "" })
+                }
+              />
+            </Box>
+          ),
+        },
+      ];
+    }, []);
+
+    return (
+      <DataTable
+        {...props}
+        columns={personColumns}
+        filters={filters}
+        getData={getData}
+        onReorderRows={onReorderRows}
+        onChangeRowSelection={onChangeRowSelection}
+      />
+    );
+  },
+};
+
+export const CustomFilterWithDefaultVariant: StoryObj<DataViewMetaProps> = {
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: false,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false,
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData } = useDataCallbacks(data, setData);
+
+    const filters = useMemo<DataViewMetaProps["filters"]>(() => {
+      return [
+        ...personColumns,
+        {
+          id: "startLetter",
+          label: "Starting letter",
+          variant: "select",
+          options: [
+            {
+              label: "Vowel",
+              value: "vowel",
+            },
+            {
+              label: "Consonant",
+              value: "consonant",
+            },
+          ],
+        },
+      ];
+    }, []);
+
+    return (
+      <DataTable
+        {...props}
+        columns={personColumns}
+        filters={filters}
+        getData={getData}
+      />
+    );
+  },
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts
index 557dffb308..9555b60930 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/dataFunctions.ts
@@ -50,10 +50,12 @@ export const filterData = ({
         // If filter value is array, search for each array value
         if (Array.isArray(value)) {
           return value.some((arrayValue) => {
+            const filterValue =
+              typeof arrayValue === "object" ? arrayValue.value : arrayValue;
             return row[id as keyof Person]
               ?.toString()
               .toLowerCase()
-              .includes(arrayValue.toString().toLowerCase());
+              .includes(filterValue.toString().toLowerCase());
           });
         }
 

From 5973df00db0907f528723e91f09a027eca7ac5cf Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Sun, 30 Jun 2024 20:47:14 -0400
Subject: [PATCH 15/15] feat: add docs for Data View

---
 .../src/labs/DataComponents/StackCard.tsx     |  39 +-
 .../src/labs/DataComponents/StackContent.tsx  |  10 +-
 .../DataComponents/DataComponents.mdx         | 476 ++++++++++++++++++
 3 files changed, 503 insertions(+), 22 deletions(-)
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.mdx

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
index 0ee37df228..37707ebe9d 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackCard.tsx
@@ -138,34 +138,36 @@ const StackCard = ({
     () => (
       <AccessoryContainer odysseyDesignTokens={odysseyDesignTokens}>
         {AccessoryProp}
-        <MuiTooltip
-          title={
-            isDetailPanelOpen
-              ? t("table.rowexpansion.collapse")
-              : t("table.rowexpansion.expand")
-          }
-        >
-          <MuiIconButton
-            children={
-              isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
-            }
-            onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}
-            aria-label={
+        {detailPanel && (
+          <MuiTooltip
+            title={
               isDetailPanelOpen
                 ? t("table.rowexpansion.collapse")
                 : t("table.rowexpansion.expand")
             }
-          />
-        </MuiTooltip>
+          >
+            <MuiIconButton
+              children={
+                isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
+              }
+              onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}
+              aria-label={
+                isDetailPanelOpen
+                  ? t("table.rowexpansion.collapse")
+                  : t("table.rowexpansion.expand")
+              }
+            />
+          </MuiTooltip>
+        )}
       </AccessoryContainer>
     ),
-    [AccessoryProp, isDetailPanelOpen, odysseyDesignTokens, t],
+    [AccessoryProp, detailPanel, isDetailPanelOpen, odysseyDesignTokens, t],
   );
 
   const cardContent = useMemo(
     () => (
       <CardContentContainer odysseyDesignTokens={odysseyDesignTokens}>
-        {Accessory && <Box>{Accessory}</Box>}
+        {(AccessoryProp || detailPanel) && <Box>{Accessory}</Box>}
         <Box>
           {image && (
             <ImageContainer
@@ -206,8 +208,9 @@ const StackCard = ({
     ),
     [
       odysseyDesignTokens,
-      Accessory,
+      AccessoryProp,
       detailPanel,
+      Accessory,
       image,
       menuButtonChildren,
       overline,
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
index 066e600307..38fa77071a 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/StackContent.tsx
@@ -210,10 +210,12 @@ const StackContent = ({
                     children={children}
                     description={description}
                     detailPanel={
-                      <DetailPanel
-                        row={row}
-                        renderDetailPanel={stackOptions.renderDetailPanel}
-                      />
+                      stackOptions.renderDetailPanel ? (
+                        <DetailPanel
+                          row={row}
+                          renderDetailPanel={stackOptions.renderDetailPanel}
+                        />
+                      ) : undefined
                     }
                     image={image}
                     key={row.id}
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.mdx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.mdx
new file mode 100644
index 0000000000..97829fcced
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.mdx
@@ -0,0 +1,476 @@
+import {
+  Canvas,
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from "@storybook/addon-docs";
+import { Story } from "@storybook/blocks";
+import * as DataComponentsStories from "./DataComponents.stories";
+
+<Meta of={DataComponentsStories} />
+
+<Title of={DataComponentsStories} />
+<Subtitle of={DataComponentsStories} />
+<Description of={DataComponentsStories} />
+
+The `DataComponents` suite is a powerful and flexible set of tools for displaying and interacting with data in various formats. It includes `DataView`, `DataTable`, and `DataStack`, which can be used to create complex data representations with features like filtering, sorting, pagination, and more.
+
+## Overview
+
+The `DataComponents` suite is built on top of Material-React-Table v2 (MRT) and offers additional functionality and styling to match the Okta Odyssey design system. It's designed to be easy to set up while remaining highly customizable to meet diverse data display needs.
+
+Key components:
+
+- `DataView`: The most flexible component, allowing you to switch between table and stack layouts.
+- `DataTable`: Focused on tabular data display with advanced features.
+- `DataStack`: For displaying data in a card-based layout, either as a list or grid.
+
+## Getting Started
+
+To use the `DataComponents`, you'll need to provide at minimum a `getData` function. Here's a basic example:
+
+```tsx
+import { DataView, DataViewProps } from "@okta/odyssey-react-mui/labs";
+import { columns, data } from "./yourDataFile";
+
+const YourComponent = () => {
+  const getData = useCallback(
+    ({ ...props }: DataGetDataType) => {
+      return filterData({ data, ...props });
+    },
+    [data],
+  );
+
+  return (
+    <DataView
+      getData={getData}
+      hasRowSelection
+      hasPagination
+      hasFilters
+      hasSearch
+    />
+  );
+};
+```
+
+This will create a fully functional data view with filtering, searching, and pagination capabilities.
+
+## Key Features
+
+### Layouts
+
+`DataView` supports multiple layouts:
+
+- Table: A traditional tabular layout
+- List: A vertical stack of cards
+- Grid: A grid of cards
+
+You can control available layouts using the `availableLayouts` prop:
+
+```tsx
+<DataView
+  availableLayouts={["table", "list", "grid"]}
+  // ... other props
+/>
+```
+
+### Filtering and Searching
+
+Enable filtering and searching with the `hasFilters` and `hasSearch` props:
+
+```tsx
+<DataView
+  hasFilters
+  hasSearch
+  // ... other props
+/>
+```
+
+### Pagination
+
+Control pagination with the `hasPagination`, `paginationType`, `currentPage`, and `resultsPerPage` props:
+
+```tsx
+<DataView
+  hasPagination
+  paginationType="paged"
+  currentPage={1}
+  resultsPerPage={20}
+  // ... other props
+/>
+```
+
+### Row Selection
+
+Enable row selection with the `hasRowSelection` prop and handle selection changes with `onChangeRowSelection`:
+
+```tsx
+<DataView
+  hasRowSelection
+  onChangeRowSelection={(rowSelection) => {
+    console.log(`${Object.keys(rowSelection).length} rows selected`);
+  }}
+  // ... other props
+/>
+```
+
+### Row Reordering
+
+Enable row reordering with the `hasRowReordering` prop and handle reordering with `onReorderRows`:
+
+```tsx
+<DataView
+  hasRowReordering
+  onReorderRows={({ rowId, newRowIndex }) => {
+    // Handle row reordering logic
+  }}
+  // ... other props
+/>
+```
+
+### Custom Empty States
+
+Provide custom empty states for when there's no data or no search results:
+
+```tsx
+<DataView
+  emptyPlaceholder={<EmptyState heading="No data available" />}
+  noResultsPlaceholder={<EmptyState heading="No results found" />}
+  // ... other props
+/>
+```
+
+## DataView, DataTable, and DataStack
+
+It's important to understand the relationship between these components:
+
+- `DataView` is the core component with the most flexibility.
+- `DataTable` and `DataStack` are convenience wrappers around `DataView`.
+
+`DataTable` and `DataStack` are provided as a convenience for common use cases, but they ultimately use `DataView` under the hood. If you need more control or a mix of table and stack layouts, you should use `DataView` directly.
+
+### TableOptions
+
+When using `DataView`, you can pass a `tableOptions` prop to customize the table behavior and appearance. Here's a detailed look at the available options:
+
+```tsx
+<DataView
+  tableOptions={{
+    columns: columnDefinitions,
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: true,
+    hasSorting: true,
+    initialDensity: "comfortable",
+    renderDetailPanel: ({ row }) => <DetailPanel data={row.original} />,
+    rowActionButtons: (row) => (
+      <>
+        <Button
+          endIcon={<EditIcon />}
+          ariaLabel="Edit"
+          size="small"
+          variant="floating"
+          onClick={() => handleEdit(row.original)}
+        />
+        <Button
+          endIcon={<DeleteIcon />}
+          ariaLabel="Delete"
+          size="small"
+          variant="floating"
+          onClick={() => handleDelete(row.original)}
+        />
+      </>
+    ),
+    rowActionMenuItems: (row) => (
+      <>
+        <MenuItem onClick={() => handleAction1(row.original)}>
+          Action 1
+        </MenuItem>
+        <MenuItem onClick={() => handleAction2(row.original)}>
+          Action 2
+        </MenuItem>
+      </>
+    ),
+  }}
+  // ... other props
+/>
+```
+
+Let's break down these options:
+
+- `columns`: Array of column definitions (required).
+- `hasChangeableDensity`: Allows users to change row density (compact, comfortable, spacious).
+- `hasColumnResizing`: Enables column resizing.
+- `hasColumnVisibility`: Allows users to show/hide columns.
+- `hasSorting`: Enables column sorting.
+- `initialDensity`: Sets the initial row density.
+- `renderDetailPanel`: Function to render an expandable detail panel for each row.
+- `rowActionButtons`: Function to render action buttons for each row.
+- `rowActionMenuItems`: Function to render menu items for additional row actions.
+
+### StackOptions
+
+When using `DataView` with stack layouts, you can pass a `stackOptions` prop to customize the card-based layout:
+
+```tsx
+<DataView
+  stackOptions={{
+    cardProps: (row) => ({
+      overline: `${row.category}`,
+      title: row.name,
+      description: row.description,
+      image: <img src={row.imageUrl} alt={row.name} />,
+      children: <Status label={row.status} severity="success" />,
+      detailPanel: <DetailPanel data={row} />,
+      button: (
+        <Button label="View Details" onClick={() => handleViewDetails(row)} />
+      ),
+      menuButtonChildren: (
+        <>
+          <MenuItem onClick={() => handleEdit(row)}>Edit</MenuItem>
+          <MenuItem onClick={() => handleDelete(row)}>Delete</MenuItem>
+        </>
+      ),
+    }),
+    maxGridColumns: 4,
+    renderDetailPanel: ({ row }) => <DetailPanel data={row} />,
+    rowActionMenuItems: (row) => (
+      <>
+        <MenuItem onClick={() => handleEdit(row)}>Edit</MenuItem>
+        <MenuItem onClick={() => handleDelete(row)}>Delete</MenuItem>
+      </>
+    ),
+  }}
+  // ... other props
+/>
+```
+
+Here's what these options do:
+
+- `cardProps`: Function that returns props for the `StackCard` component for each data item.
+- `maxGridColumns`: Maximum number of columns to display in grid layout.
+- `renderDetailPanel`: Function to render an expandable detail panel for each card.
+- `rowActionMenuItems`: Function to render menu items for card actions.
+
+### DataTable and DataStack as Convenience Wrappers
+
+While `DataTable` and `DataStack` appear to be distinct components, they are actually convenient wrappers around `DataView`. They pre-configure certain props and options to create a more targeted API for specific use cases.
+
+For example, `DataTable` might be implemented like this:
+
+```tsx
+const DataTable = (props: DataTableProps) => {
+  return (
+    <DataView
+      availableLayouts={["table"]}
+      tableOptions={{
+        columns: props.columns,
+        hasChangeableDensity: props.hasChangeableDensity,
+        hasColumnResizing: props.hasColumnResizing,
+        hasColumnVisibility: props.hasColumnVisibility,
+        hasSorting: props.hasSorting,
+        initialDensity: props.initialDensity,
+        renderDetailPanel: props.renderDetailPanel,
+        rowActionButtons: props.rowActionButtons,
+        rowActionMenuItems: props.rowActionMenuItems,
+      }}
+      {...props}
+    />
+  );
+};
+```
+
+Similarly, `DataStack` might be implemented like this:
+
+```tsx
+const DataStack = (props: DataStackProps) => {
+  return (
+    <DataView
+      availableLayouts={["list", "grid"]}
+      stackOptions={{
+        cardProps: props.cardProps,
+        maxGridColumns: props.maxGridColumns,
+        renderDetailPanel: props.renderDetailPanel,
+        rowActionMenuItems: props.rowActionMenuItems,
+      }}
+      {...props}
+    />
+  );
+};
+```
+
+This approach allows for a more intuitive API when you know you want specifically a table or a card-based layout, while still leveraging the full power of `DataView` under the hood.
+
+If you need more control or want to mix table and stack layouts, you should use `DataView` directly and provide both `tableOptions` and `stackOptions` as needed.
+
+```tsx
+<DataView
+  availableLayouts={["table", "list", "grid"]}
+  tableOptions={{...}}
+  stackOptions={{...}}
+  // ... other props
+/>
+```
+
+This flexibility allows you to create complex, multi-layout data views while still benefiting from the convenience of pre-configured components for simpler use cases.
+
+## Data Handling Functions
+
+### getData
+
+The `getData` function is a crucial part of the DataComponents. It's responsible for fetching and filtering data based on the current state of the component. Here's the type definition:
+
+```typescript
+type DataGetDataType = {
+  filters?: DataFilter[];
+  page?: number;
+  resultsPerPage?: number;
+  search?: string;
+  sort?: MRT_SortingState;
+};
+```
+
+Your `getData` function should handle these parameters and return the appropriate data. For example:
+
+```tsx
+const getData = useCallback(
+  ({ filters, page, resultsPerPage, search, sort }: DataGetDataType) => {
+    let filteredData = data;
+
+    // Apply filters
+    if (filters) {
+      filteredData = filteredData.filter((row) =>
+        filters.every((filter) => {
+          // Implement filter logic here
+        }),
+      );
+    }
+
+    // Apply search
+    if (search) {
+      filteredData = filteredData.filter((row) =>
+        Object.values(row).some((value) =>
+          value.toString().toLowerCase().includes(search.toLowerCase()),
+        ),
+      );
+    }
+
+    // Apply sorting
+    if (sort && sort.length > 0) {
+      filteredData.sort((a, b) => {
+        // Implement sorting logic here
+      });
+    }
+
+    // Apply pagination
+    const startIndex = (page - 1) * resultsPerPage;
+    const endIndex = startIndex + resultsPerPage;
+    return filteredData.slice(startIndex, endIndex);
+  },
+  [data],
+);
+```
+
+### onChangeRowSelection
+
+The `onChangeRowSelection` function is called whenever the row selection state changes. It receives the current selection state as an argument:
+
+```tsx
+const onChangeRowSelection = useCallback(
+  (rowSelection: DataRowSelectionState) => {
+    console.log(`${Object.keys(rowSelection).length} rows selected`);
+    // Perform actions based on the selected rows
+  },
+  [],
+);
+```
+
+### onReorderRows
+
+The `onReorderRows` function is called when a row is reordered. It receives an object with the `rowId` of the moved row and its `newRowIndex`:
+
+```tsx
+type DataOnReorderRowsType = {
+  newRowIndex: number;
+  rowId: string;
+};
+
+const onReorderRows = useCallback(
+  ({ rowId, newRowIndex }: DataOnReorderRowsType) => {
+    // Update your data structure to reflect the new order
+    const updatedData = [...data];
+    const movedItem = updatedData.find((item) => item.id === rowId);
+    if (movedItem) {
+      updatedData.splice(updatedData.indexOf(movedItem), 1);
+      updatedData.splice(newRowIndex, 0, movedItem);
+      setData(updatedData);
+    }
+  },
+  [data, setData],
+);
+```
+
+## Additional Features
+
+### Bulk Actions Menu
+
+When row selection is enabled, you can provide bulk actions that apply to all selected rows:
+
+```tsx
+<DataView
+  bulkActionMenuItems={(selectedRows) => (
+    <>
+      <MenuItem onClick={() => handleBulkAction1(selectedRows)}>
+        Bulk Action 1
+      </MenuItem>
+      <MenuItem onClick={() => handleBulkAction2(selectedRows)}>
+        Bulk Action 2
+      </MenuItem>
+    </>
+  )}
+  hasRowSelection
+  // ... other props
+/>
+```
+
+This will display a menu with bulk actions when rows are selected.
+
+### Error Handling
+
+You can display an error message when data fetching fails:
+
+```tsx
+<DataView
+  errorMessage="An error occurred while fetching data."
+  // ... other props
+/>
+```
+
+This will display a callout with the error message above the data view.
+
+### Lazy Loading
+
+You can also use lazy loading instead of traditional pagination:
+
+```tsx
+<DataView
+  paginationType="loadMore"
+  // ... other props
+/>
+```
+
+This will display a "Load More" button instead of page numbers, allowing users to incrementally load more data.
+
+## Customization
+
+While the `DataComponents` come with pre-styled elements matching the Okta Odyssey design system, you can further customize the appearance using the theming capabilities of Material-UI and Emotion styled components.
+
+<Canvas>
+  <Story of={DataComponentsStories.Default} />
+</Canvas>
+
+Explore the stories in this Storybook to see more examples and configurations of the `DataComponents` suite.