diff --git a/.cursor/rules/02-typescript-testing.mdc b/.cursor/rules/02-typescript-testing.mdc
index 2dc6402fd9..0e0f20c2b9 100644
--- a/.cursor/rules/02-typescript-testing.mdc
+++ b/.cursor/rules/02-typescript-testing.mdc
@@ -17,13 +17,15 @@ alwaysApply: false
 - Implement proper generic constraints.
 
 # Testing Standards
-- Write **Vitest** unit tests for utilities and hooks.
+- Write **Vitest** unit tests for utilities and hooks and components.
 - Create **Storybook stories** for visual testing.
 - Include **accessibility tests** using axe-playwright.
 - Test component variants and edge cases.
 - Avoid excessive mocking; test behavior, not internals.
 - Always run tests to confirm changes.
 - Do not import `@testing-library/jest-dom` 
+- Import vitest methods like: describe, it, expect, etc. explicitily
+- name test files with `.test.tsx` or `.test.ts`, never with `.specs.ts`
 
 ## Example with Icon component
 
diff --git a/packages/react/src/components/Utilities/Await/Await.tsx b/packages/react/src/components/Utilities/Await/Await.tsx
new file mode 100644
index 0000000000..f0d259c0d0
--- /dev/null
+++ b/packages/react/src/components/Utilities/Await/Await.tsx
@@ -0,0 +1,50 @@
+import { ReactNode, useEffect, useState } from "react"
+
+type AwaitProps<T> = {
+  resolve: Promise<T> | T
+  fallback: ReactNode
+  error?: ReactNode
+  className?: string
+  children: (value: T) => ReactNode
+}
+
+export const Await = <T,>({
+  resolve,
+  fallback,
+  error: errorFallback,
+  children,
+}: AwaitProps<T>): ReactNode => {
+  const [resolvedValue, setResolvedValue] = useState<T | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+  const [isPending, setIsPending] = useState(false)
+
+  useEffect(() => {
+    if (resolve instanceof Promise) {
+      setIsPending(true)
+      resolve
+        .then((value) => {
+          setResolvedValue(value)
+        })
+        .catch((error) => {
+          setError(error)
+        })
+        .finally(() => {
+          setIsPending(false)
+        })
+    } else {
+      setResolvedValue(resolve)
+      setIsPending(false)
+    }
+  }, [resolve])
+
+  if (isPending) {
+    return fallback
+  }
+  if (error) {
+    return errorFallback ?? null
+  }
+  if (resolvedValue) {
+    return children(resolvedValue)
+  }
+  return null
+}
diff --git a/packages/react/src/components/Utilities/Await/__stories__/Await.stories.tsx b/packages/react/src/components/Utilities/Await/__stories__/Await.stories.tsx
new file mode 100644
index 0000000000..f6a124e568
--- /dev/null
+++ b/packages/react/src/components/Utilities/Await/__stories__/Await.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Button } from "@/components/Actions/Button"
+import { Skeleton } from "@/ui/skeleton"
+import { ComponentProps, useCallback, useEffect, useState } from "react"
+import { Await } from "../index"
+
+const ExampleComponent = (args: Story["args"]) => {
+  const [count, setCount] = useState(0)
+  const [value, setValue] = useState<Promise<string> | null>(null)
+
+  const triggerPromise = useCallback(() => {
+    setValue(
+      new Promise((resolve) =>
+        setTimeout(() => resolve(`${args.resolve as string} - ${count}`), 1000)
+      )
+    )
+    setCount(count + 1)
+  }, [args.resolve, count])
+
+  useEffect(() => {
+    triggerPromise()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <>
+      <div style={{ marginBottom: "20px" }}>
+        <Button onClick={() => triggerPromise()} label="Trigger promise" />
+      </div>
+      <Await fallback={args.fallback} resolve={value}>
+        {args.children}
+      </Await>
+    </>
+  )
+}
+
+const meta = {
+  title: "Await",
+  component: Await,
+  argTypes: {
+    fallback: {
+      description:
+        "Fallback to display when the promise is pending. It can be a ReactNode",
+    },
+    resolve: {
+      description:
+        "Value to await for, it can be a promise or a primitive value",
+    },
+    error: {
+      description: "Error to display when the promise is rejected",
+    },
+    children: {
+      description:
+        "Children to display when the promise is resolved. It's a function that gets the resolved value as an argument",
+    },
+  },
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "This is an utility component. The `Await` component is used to display a fallback component when a promise is resolved, but it accepts a promise or a primitive value as a prop, you don't need to take care. ",
+      },
+    },
+  },
+  tags: ["autodocs", "stable"],
+} satisfies Meta<ComponentProps<typeof Await>>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => <ExampleComponent {...args} />,
+  args: {
+    resolve: "Hello",
+    fallback: "Loading...",
+    children: (value) => `${value}`,
+  },
+}
+
+export const WithSkeleton: Story = {
+  render: (args) => <ExampleComponent {...args} />,
+  args: {
+    resolve: "Hello",
+    fallback: <Skeleton className="h-4 w-full" />,
+    children: (value) => `${value}`,
+  },
+}
diff --git a/packages/react/src/components/Utilities/Await/index.tsx b/packages/react/src/components/Utilities/Await/index.tsx
new file mode 100644
index 0000000000..5e86667708
--- /dev/null
+++ b/packages/react/src/components/Utilities/Await/index.tsx
@@ -0,0 +1 @@
+export * from "./Await"
diff --git a/packages/react/src/experimental/Forms/Fields/Checkbox/index.tsx b/packages/react/src/experimental/Forms/Fields/Checkbox/index.tsx
index 12acf643db..32e22bd5e3 100644
--- a/packages/react/src/experimental/Forms/Fields/Checkbox/index.tsx
+++ b/packages/react/src/experimental/Forms/Fields/Checkbox/index.tsx
@@ -50,6 +50,12 @@ interface CheckboxProps extends DataAttributes {
    * @default false
    */
   presentational?: boolean
+
+  /**
+   * Whether the checkbox should stop event propagation
+   * @default false
+   */
+  stopPropagation?: boolean
 }
 
 export function Checkbox({
@@ -62,6 +68,7 @@ export function Checkbox({
   value,
   hideLabel = false,
   presentational = false,
+  stopPropagation = false,
   ...rest
 }: CheckboxProps) {
   return (
@@ -75,6 +82,7 @@ export function Checkbox({
       value={value}
       hideLabel={hideLabel}
       tabIndex={presentational ? -1 : undefined}
+      onClick={(e) => stopPropagation && e.stopPropagation()}
       {...rest}
     />
   )
diff --git a/packages/react/src/experimental/OneCard/OneCard.tsx b/packages/react/src/experimental/OneCard/OneCard.tsx
index cc5a412e3d..f6f8eb9f2a 100644
--- a/packages/react/src/experimental/OneCard/OneCard.tsx
+++ b/packages/react/src/experimental/OneCard/OneCard.tsx
@@ -135,7 +135,10 @@ export function OneCard({
       {link && (
         <Link
           href={link}
-          className={cn("absolute inset-0 z-0 block rounded-xl", focusRing())}
+          style={{
+            zIndex: 1,
+          }}
+          className={cn("z-1 absolute inset-0 block rounded-xl", focusRing())}
           aria-label={title}
         />
       )}
diff --git a/packages/react/src/experimental/OneDataCollection/ItemActions/Dropdown.test.tsx b/packages/react/src/experimental/OneDataCollection/ItemActions/Dropdown.test.tsx
deleted file mode 100644
index e53430ee6a..0000000000
--- a/packages/react/src/experimental/OneDataCollection/ItemActions/Dropdown.test.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Ai, Pencil } from "@/icons/app"
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it, vi } from "vitest"
-import { ItemActionsDefinition } from "../item-actions"
-import { ActionsDropdown } from "./Dropdown"
-
-// Mock the imported components
-vi.mock("@/components/Actions/Button", () => ({
-  Button: ({ label, icon: Icon, ...props }) => (
-    <button {...props} data-testid="button">
-      {Icon && <Icon data-testid="button-icon" />}
-      {!props.hideLabel && label}
-    </button>
-  ),
-}))
-
-vi.mock("@/experimental/Navigation/Dropdown", () => ({
-  Dropdown: ({ children, items }) => (
-    <div data-testid="dropdown" data-items={JSON.stringify(items)}>
-      {children}
-    </div>
-  ),
-}))
-
-vi.mock("@/icons/app", () => ({
-  Ellipsis: () => <div data-testid="ellipsis-icon">...</div>,
-  Ai: () => <div>AI Icon</div>,
-  Pencil: () => <div>Pencil Icon</div>,
-}))
-
-describe("ActionsDropdown", () => {
-  type TestRecord = {
-    id: string
-    name: string
-    canEdit: boolean
-  }
-
-  const mockItem: TestRecord = {
-    id: "test-1",
-    name: "Test Item",
-    canEdit: true,
-  }
-
-  const mockActions: ItemActionsDefinition<TestRecord> = (item) => [
-    {
-      label: "View Details",
-      icon: Ai,
-      onClick: () => console.log(`Viewing ${item.name}`),
-    },
-    {
-      label: "Edit Item",
-      icon: Pencil,
-      onClick: () => console.log(`Editing ${item.name}`),
-      enabled: item.canEdit,
-    },
-  ]
-
-  it("renders dropdown with actions when actions are available", () => {
-    render(<ActionsDropdown item={mockItem} actions={mockActions} />)
-
-    expect(screen.getByTestId("dropdown")).toBeInTheDocument()
-    expect(screen.getByRole("button")).toBeInTheDocument()
-    expect(screen.getByTestId("ellipsis-icon")).toBeInTheDocument()
-
-    // Verify items are passed to dropdown
-    const dropdownElement = screen.getByTestId("dropdown")
-    const passedItems = JSON.parse(
-      dropdownElement.getAttribute("data-items") || "[]"
-    )
-    expect(passedItems).toHaveLength(2)
-    expect(passedItems[0].label).toBe("View Details")
-    expect(passedItems[1].label).toBe("Edit Item")
-  })
-
-  it("doesn't render when actions array is empty", () => {
-    const emptyActions: ItemActionsDefinition<TestRecord> = () => []
-    const { container } = render(
-      <ActionsDropdown item={mockItem} actions={emptyActions} />
-    )
-
-    expect(container).toBeEmptyDOMElement()
-  })
-
-  it("doesn't render when actions is undefined", () => {
-    const undefinedActions: ItemActionsDefinition<TestRecord> = () => undefined
-    const { container } = render(
-      <ActionsDropdown item={mockItem} actions={undefinedActions} />
-    )
-
-    expect(container).toBeEmptyDOMElement()
-  })
-
-  it("filters actions based on enabled property", () => {
-    const mockItemWithoutEdit = { ...mockItem, canEdit: false }
-    const actionsWithDisabled: ItemActionsDefinition<TestRecord> = (item) => [
-      {
-        label: "View Details",
-        icon: Ai,
-        onClick: () => console.log(`Viewing ${item.name}`),
-      },
-      {
-        label: "Edit Item",
-        icon: Pencil,
-        onClick: () => console.log(`Editing ${item.name}`),
-        enabled: item.canEdit, // This will be false
-      },
-    ]
-
-    render(
-      <ActionsDropdown
-        item={mockItemWithoutEdit}
-        actions={actionsWithDisabled}
-      />
-    )
-
-    const dropdownElement = screen.getByTestId("dropdown")
-    const passedItems = JSON.parse(
-      dropdownElement.getAttribute("data-items") || "[]"
-    )
-
-    // Only one action should be enabled
-    expect(passedItems).toHaveLength(1)
-    expect(passedItems[0].label).toBe("View Details")
-  })
-})
diff --git a/packages/react/src/experimental/OneDataCollection/ItemActions/ItemActionsDropdown.test.tsx b/packages/react/src/experimental/OneDataCollection/ItemActions/ItemActionsDropdown.test.tsx
new file mode 100644
index 0000000000..9112e38a68
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/ItemActions/ItemActionsDropdown.test.tsx
@@ -0,0 +1,82 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { DropdownItem } from "../../Navigation/Dropdown"
+import { ItemActionsDropdown } from "./ItemActionsDropdown"
+
+// Mock the imported components
+vi.mock("@/components/Utilities/Icon", () => ({
+  Icon: ({ icon: Icon }) => <Icon data-testid="icon" />,
+}))
+
+vi.mock("@/lib/utils", () => ({
+  cn: (...classes: string[]) => classes.join(" "),
+  focusRing: (className: string) => className,
+}))
+
+vi.mock("../../../icons/app", () => ({
+  Ellipsis: () => <div data-testid="ellipsis-icon">...</div>,
+}))
+
+vi.mock("../../Navigation/Dropdown", () => ({
+  Dropdown: ({ children, items, open, onOpenChange }) => (
+    <div
+      data-testid="dropdown"
+      data-items={JSON.stringify(items)}
+      data-open={open}
+    >
+      {children}
+      <button onClick={() => onOpenChange?.(!open)}>Toggle</button>
+    </div>
+  ),
+  DropdownItem: ({ children }) => <div>{children}</div>,
+}))
+
+describe("ItemActionsDropdown", () => {
+  const mockItems: DropdownItem[] = [
+    {
+      label: "View Details",
+      onClick: () => {},
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: "Edit Item",
+      onClick: () => {},
+    },
+  ]
+
+  it("renders dropdown with actions when items are available", () => {
+    render(<ItemActionsDropdown items={mockItems} />)
+
+    expect(screen.getByTestId("dropdown")).toBeInTheDocument()
+    expect(screen.getByTestId("ellipsis-icon")).toBeInTheDocument()
+
+    // Verify items are passed to dropdown
+    const dropdownElement = screen.getByTestId("dropdown")
+    const passedItems = JSON.parse(
+      dropdownElement.getAttribute("data-items") || "[]"
+    )
+    expect(passedItems).toHaveLength(3)
+    expect(passedItems[0].label).toBe("View Details")
+    expect(passedItems[1].type).toBe("separator")
+    expect(passedItems[2].label).toBe("Edit Item")
+  })
+
+  it("doesn't render when items array is empty", () => {
+    const { container } = render(<ItemActionsDropdown items={[]} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it("handles open state changes", () => {
+    const onOpenChange = vi.fn()
+    render(
+      <ItemActionsDropdown items={mockItems} onOpenChange={onOpenChange} />
+    )
+
+    const toggleButton = screen.getByText("Toggle")
+    toggleButton.click()
+
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+  })
+})
diff --git a/packages/react/src/experimental/OneDataCollection/ItemActions/Dropdown.tsx b/packages/react/src/experimental/OneDataCollection/ItemActions/ItemActionsDropdown.tsx
similarity index 62%
rename from packages/react/src/experimental/OneDataCollection/ItemActions/Dropdown.tsx
rename to packages/react/src/experimental/OneDataCollection/ItemActions/ItemActionsDropdown.tsx
index bace253e8e..3993d44211 100644
--- a/packages/react/src/experimental/OneDataCollection/ItemActions/Dropdown.tsx
+++ b/packages/react/src/experimental/OneDataCollection/ItemActions/ItemActionsDropdown.tsx
@@ -2,32 +2,28 @@ import { cn, focusRing } from "@/lib/utils"
 import { useState } from "react"
 import { Icon } from "../../../components/Utilities/Icon"
 import { Ellipsis } from "../../../icons/app"
-import { Dropdown } from "../../Navigation/Dropdown"
-import { ItemActionsDefinition, filterItemActions } from "../item-actions"
-import { RecordType } from "../types"
+import { Dropdown, DropdownItem } from "../../Navigation/Dropdown"
 
-export const ActionsDropdown = <
-  Record extends RecordType,
-  ItemActions extends ItemActionsDefinition<Record>,
->({
-  item,
-  actions,
-}: {
-  item: Record
-  actions: ItemActions
-}) => {
-  const [open, setOpen] = useState(false)
-
-  if (!actions || actions.length === 0) return null
+export type ItemActionsDropdownProps = {
+  items: DropdownItem[]
+  onOpenChange?: (open: boolean) => void
+  align?: "start" | "end"
+}
 
-  const items = filterItemActions(actions, item)
+export const ItemActionsDropdown = ({
+  items,
+  onOpenChange,
+  align = "end",
+}: ItemActionsDropdownProps) => {
+  const [open, setOpen] = useState(false)
 
-  if (items.length === 0) {
+  if (!items || items.length === 0) {
     return null
   }
 
   return (
     <Dropdown
+      align={align}
       items={items.map((item) => {
         if (item.type === "separator") {
           return item
@@ -38,8 +34,10 @@ export const ActionsDropdown = <
         }
       })}
       open={open}
-      onOpenChange={setOpen}
-      align="end"
+      onOpenChange={(open) => {
+        setOpen(open)
+        onOpenChange?.(open)
+      }}
     >
       <button
         title="Actions"
diff --git a/packages/react/src/experimental/OneDataCollection/Settings/Settings.tsx b/packages/react/src/experimental/OneDataCollection/Settings/Settings.tsx
new file mode 100644
index 0000000000..35bd360e79
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/Settings/Settings.tsx
@@ -0,0 +1,124 @@
+import { Button } from "@/components/Actions/Button"
+import { Sliders } from "@/icons/app"
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover"
+import { useState } from "react"
+import { FiltersDefinition } from "../Filters/types"
+import { GroupingDefinition, GroupingState } from "../grouping"
+import { ItemActionsDefinition } from "../item-actions"
+import { NavigationFiltersDefinition } from "../navigationFilters/types"
+import { RecordType, SortingsDefinition } from "../types"
+import { Visualization } from "../visualizations/collection"
+import { GroupingSelector } from "./components/GroupingSelector"
+import { VisualizationSelector } from "./components/VisualizationSelector"
+
+type SettingsProps<
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+> = {
+  visualizations: ReadonlyArray<
+    Visualization<
+      R,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
+  >
+  currentVisualization: number
+  onVisualizationChange: (index: number) => void
+  grouping?: Grouping
+  currentGrouping?: GroupingState<R, Grouping>
+  onGroupingChange: (groupingState: GroupingState<R, Grouping>) => void
+}
+
+export const Settings = <
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+>({
+  visualizations,
+  currentVisualization,
+  onVisualizationChange,
+  grouping,
+  currentGrouping,
+  onGroupingChange,
+}: SettingsProps<
+  R,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping
+>) => {
+  const groupByOptions = grouping
+    ? Object.keys(grouping.groupBy).length + (grouping.mandatory ? 1 : 0)
+    : 0
+
+  const shouldShowSettings =
+    (visualizations && visualizations.length > 1) || groupByOptions > 0
+
+  const [open, setOpen] = useState(false)
+
+  const handleVisualizationChange = (index: number) => {
+    setOpen(false)
+    onVisualizationChange(index)
+  }
+
+  const handleGroupingChange = (
+    grouping: GroupingState<R, Grouping> | undefined
+  ) => {
+    onGroupingChange(grouping)
+  }
+
+  return (
+    shouldShowSettings && (
+      <div className="flex gap-2">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild onClick={() => setOpen(!open)}>
+            <Button
+              variant="outline"
+              label="Filters"
+              icon={Sliders}
+              onClick={() => {}}
+              hideLabel
+              round
+            />
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-[280px] rounded-md border border-solid border-f1-border-secondary p-2"
+            align="end"
+            sideOffset={8}
+            alignOffset={-6}
+          >
+            {visualizations && visualizations.length > 1 && (
+              <div className="mb-2">
+                <VisualizationSelector
+                  visualizations={visualizations}
+                  currentVisualization={currentVisualization}
+                  onVisualizationChange={handleVisualizationChange}
+                />
+              </div>
+            )}
+            {grouping && groupByOptions > 0 && (
+              <div className="mb-2">
+                <GroupingSelector
+                  grouping={grouping}
+                  currentGrouping={currentGrouping}
+                  onGroupingChange={handleGroupingChange}
+                />
+              </div>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+    )
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/Settings/components/GroupingSelector.tsx b/packages/react/src/experimental/OneDataCollection/Settings/components/GroupingSelector.tsx
new file mode 100644
index 0000000000..69661f4c27
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/Settings/components/GroupingSelector.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@/components/Actions/Button"
+import { Select } from "@/experimental/Forms/Fields/Select"
+import { ArrowDown, ArrowUp } from "@/icons/app"
+import { GroupingDefinition, GroupingState } from "../../grouping"
+import { RecordType } from "../../types"
+
+type GroupingSelectorProps<
+  R extends RecordType,
+  Grouping extends GroupingDefinition<R>,
+> = {
+  grouping: Grouping
+  currentGrouping: GroupingState<R, Grouping> | undefined
+  onGroupingChange: (groupingState: GroupingState<R, Grouping>) => void
+}
+
+const EmptyGroupingValue = "__no-grouping__"
+
+export const GroupingSelector = <
+  R extends RecordType,
+  Grouping extends GroupingDefinition<R>,
+>({
+  grouping,
+  currentGrouping,
+  onGroupingChange,
+}: GroupingSelectorProps<R, Grouping>) => {
+  const groupingOptions = [
+    ...(!grouping.mandatory
+      ? [
+          {
+            label: "No grouping",
+            value: EmptyGroupingValue,
+          },
+        ]
+      : []),
+    ...Object.entries(grouping.groupBy || {})
+      .filter(
+        (
+          entry
+        ): entry is [
+          string,
+          NonNullable<(typeof grouping.groupBy)[keyof typeof grouping.groupBy]>,
+        ] => !!entry[1]
+      )
+      .map(([key, value]) => ({
+        label: value.name,
+        value: key,
+      })),
+  ]
+
+  return (
+    <div>
+      <label>Group by...</label>
+      <div className="flex items-center gap-2">
+        <div className="shrink grow">
+          <Select
+            options={groupingOptions}
+            value={currentGrouping?.field.toString() ?? EmptyGroupingValue}
+            onChange={(value: string) =>
+              onGroupingChange(
+                value !== EmptyGroupingValue
+                  ? {
+                      field: value,
+                      order: currentGrouping?.order ?? "asc",
+                    }
+                  : undefined
+              )
+            }
+          />
+        </div>
+        {currentGrouping?.field && (
+          <div>
+            <Button
+              hideLabel
+              label="Toggle sort direction"
+              variant="outline"
+              icon={currentGrouping?.order === "asc" ? ArrowUp : ArrowDown}
+              onClick={() =>
+                onGroupingChange({
+                  field: currentGrouping.field,
+                  order: currentGrouping.order === "asc" ? "desc" : "asc",
+                })
+              }
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/Settings/components/VisualizationSelector.tsx b/packages/react/src/experimental/OneDataCollection/Settings/components/VisualizationSelector.tsx
new file mode 100644
index 0000000000..8fa95efc88
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/Settings/components/VisualizationSelector.tsx
@@ -0,0 +1,110 @@
+import { Icon } from "@/components/Utilities/Icon"
+
+import { focusRing } from "@/lib/utils"
+
+import { useI18n } from "@/lib/providers/i18n"
+import { cn } from "@/lib/utils"
+import { FiltersDefinition } from "../../Filters/types"
+import { GroupingDefinition } from "../../grouping"
+import { ItemActionsDefinition } from "../../item-actions"
+import { NavigationFiltersDefinition } from "../../navigationFilters/types"
+import { RecordType, SortingsDefinition } from "../../types"
+import {
+  collectionVisualizations,
+  Visualization,
+} from "../../visualizations/collection"
+
+/**
+ * A component that renders a selector for switching between different visualization types.
+ * Provides buttons for each available visualization with appropriate icons.
+ *
+ * @template Record - The type of records in the collection
+ * @template Filters - The filters type extending FiltersDefinition
+ * @template Actions - The actions type extending ActionsDefinition
+ *
+ * @param visualizations - Array of available visualizations
+ * @param currentVisualization - Index of the currently selected visualization
+ * @param onVisualizationChange - Callback function when visualization selection changes
+ *
+ * @returns A row of buttons for switching between visualizations
+ */
+export const VisualizationSelector = <
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+>({
+  visualizations,
+  currentVisualization,
+  onVisualizationChange,
+}: {
+  visualizations: ReadonlyArray<
+    Visualization<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
+  >
+  currentVisualization: number
+  onVisualizationChange: (index: number) => void
+}): JSX.Element => {
+  const i18n = useI18n()
+
+  const handleVisualizationChange = (index: number) => {
+    onVisualizationChange(index)
+  }
+
+  const getVisualizationMeta = (
+    visualization: Visualization<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
+  ) => {
+    if (visualization.type === "custom") {
+      return {
+        icon: visualization.icon,
+        label: visualization.label,
+      }
+    }
+
+    const visualizationType = collectionVisualizations[visualization.type]
+
+    return {
+      icon: visualizationType.icon,
+      label: i18n.collections.visualizations[visualization.type],
+    }
+  }
+  return (
+    <div className="grid grid-cols-2">
+      {visualizations.map((visualization, index) => {
+        const { icon, label } = getVisualizationMeta(visualization)
+
+        const isSelected = currentVisualization === index
+
+        return (
+          <button
+            className={cn(
+              "flex w-full flex-col items-center justify-center gap-1 rounded-sm p-2 font-medium text-f1-foreground-secondary transition-colors",
+              isSelected && "bg-f1-background-secondary text-f1-foreground",
+              focusRing()
+            )}
+            key={visualization.type}
+            onClick={() => handleVisualizationChange(index)}
+          >
+            <Icon icon={icon} />
+            {label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/Settings/index.tsx b/packages/react/src/experimental/OneDataCollection/Settings/index.tsx
new file mode 100644
index 0000000000..1c9ff4e4aa
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/Settings/index.tsx
@@ -0,0 +1 @@
+export * from "./Settings"
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/collection-actions.stories.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/collection-actions.stories.tsx
index be32ef8380..cf750a6fe2 100644
--- a/packages/react/src/experimental/OneDataCollection/__stories__/collection-actions.stories.tsx
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/collection-actions.stories.tsx
@@ -6,7 +6,7 @@ import { OneDataCollection, useDataSource } from "../index"
 import { ItemActionsDefinition } from "../item-actions"
 import { NavigationFiltersDefinition } from "../navigationFilters/types"
 import { SortingsDefinition } from "../sortings"
-import { DataSource } from "../types"
+import { DataSource, GroupingDefinition } from "../types"
 
 const meta = {
   title: "Data Collection/Collection Actions",
@@ -126,7 +126,8 @@ function BaseStory<
     Filters,
     Sortings,
     ItemActions,
-    NavigationFilters
+    NavigationFilters,
+    GroupingDefinition<(typeof mockUsers)[number]>
   >
 }) {
   return (
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/empty-states.stories.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/empty-states.stories.tsx
index d61ea56663..a8cb8df564 100644
--- a/packages/react/src/experimental/OneDataCollection/__stories__/empty-states.stories.tsx
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/empty-states.stories.tsx
@@ -5,6 +5,7 @@ import {
   filters,
   getMockVisualizations,
   mockUsers,
+  sortings,
 } from "./mockData"
 
 const meta = {
@@ -102,6 +103,7 @@ export const NoResultsExample: Story = {
       currentFilters: {
         search: "Joey Tribbiani",
       },
+      sortings,
     })
 
     const mockVisualizations = getMockVisualizations()
@@ -159,6 +161,7 @@ export const CustomMessagesAndActions: Story = {
         },
       },
       currentFilters: { search: "Joey Tribbiani" },
+      sortings,
     })
 
     const emptyStates = {
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/grouping.mdx b/packages/react/src/experimental/OneDataCollection/__stories__/grouping.mdx
new file mode 100644
index 0000000000..efb14a4c08
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/grouping.mdx
@@ -0,0 +1,147 @@
+import { Canvas, Meta, Controls, Unstyled, Story } from "@storybook/blocks"
+import { DoDonts } from "@/lib/storybook-utils/do-donts"
+
+import * as GroupingStories from "./grouping.stories"
+
+<Meta title="Data collection/Grouping" />
+
+# Data collection Grouping
+
+## Introduction
+
+Data collection grouping allows to group the data by a field. This is useful to
+organize the data in a more readable way and to perform aggregations on the
+data.
+
+The grouping is applied in the frontend just defining whitch field is used for
+the grouping. T he `useDataCollection` hook fetch thedata as is (flat), and then
+the data is grouped in the frontend.
+
+> Important: For paginated data with grouping, the data must be sorted by the
+> grouping field in last term (and then other sortings can be applied) to
+> warranty all the rows with the same value for the grouping fields are together
+> in the list
+
+The grouping is defined in the grouping property of the `useDataCollection`
+hook.
+
+```tsx
+const { source, currentGrouping, setCurrentGrouping } = useDataCollection({
+  ...
+  grouping={{
+    mandatory: true, // If true, the grouping is mandatory and the data will be grouped by the grouping field, if false, the grouping is optional and the use can choose not grouping the data
+    collapsible: true, // If true, the grouping is collapsible and the user can collapse the grouping, if false, the grouping is non collapsible and the user cannot collapse the grouping
+    initialOpenGroups: true, // If true, the grouping is open by default, if false, the grouping is closed by default, if an array, the grouping will be open only for the groups in the array
+    groupBy: {
+        // This is the field to group the data by
+        department: {
+            name: "Department", // This is the name of the group
+            label: (groupId) => groupId, //
+            itemCount: async (groupId) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return mockUsers.filter((user) => user.department === groupId)
+                .length
+            },
+        },
+        role: {
+            name: "Role",
+            label: (groupId) => groupId,
+            itemCount: (groupId) => {
+               return mockUsers.filter((user) => user.role === groupId).length
+           },
+        },
+    },
+  },
+  ...
+})
+```
+
+## Grouping definition
+
+The grouping is configured in the `grouping` property of the `useDataCollection`
+
+```ts
+export type GroupingDefinition<R extends RecordType> = {
+  mandatory?: boolean
+  collapsible?: boolean
+  defaultOpenGroups?: boolean | string[]
+  groupBy: {
+    [K in keyof R]?: {
+      name: string
+      label: (
+        groupId: R[K],
+        filters: FiltersState<FiltersDefinition>
+      ) => string | Promise<string>
+      itemCount?: (
+        groupId: R[K],
+        filters: FiltersState<FiltersDefinition>
+      ) => number | undefined | Promise<number | undefined>
+    }
+  }
+}
+```
+
+### Mandatory
+
+The `mandatory` property is used to define if the grouping is mandatory or not.
+If it is mandatory, the data must be grouped by one of the grouping fields. If
+it is not mandatory, the user can choose not grouping the data and still
+choosing group by one of the available fields.
+
+### Collapsible
+
+The `collapsible` property is used to define if the grouping is collapsible or
+not. If it is collapsible, the user can collapse the grouping . If it is not
+collapsible, the grouping is always expanded.
+
+### Default open groups
+
+The `defaultOpenGroups` property is used to define the default open groups. If
+it is a boolean, it will be applied to all groups. If it is an array, it will be
+applied to the groups in the array. This property is only used if the grouping
+is collapsible.
+
+### GroupBy
+
+The `groupBy` property is used to define the grouping fields. Each key is a
+field of the record and the value is an object with the following properties:
+
+- `name`: The name of the grouping (used in the UI to select the how to group
+  the data). e.g 'Department'.
+- `label`: The label of of a group, used to show the group title. e.g 'Sales'.
+  This function receives the group id (e.g. 123, which is the department id) and
+  the current filters state, and it returns the label to show or a promise. In
+  the case of a promise the datacollection will render a skeleton until the
+  promise is resolved. you can use this to fetch the label from an api, array,
+  etc.
+- `itemCount`: The count of elements in a group. This function receives the
+  group id (e.g. 123, which is the department id) and the current filters state,
+  and it returns the item count of the group or a promise. In the case of a
+  promise the datacollection will render a skeleton until the promise is
+  resolved. you can use this to fetch the item count from an api, array, etc.
+
+## Examples
+
+### Basic example
+
+<Canvas of={GroupingStories.WithGrouping} />
+
+### With optional grouping
+
+<Canvas of={GroupingStories.WithOptionalGrouping} />
+
+### Collapsible grouping
+
+<Canvas of={GroupingStories.CollapsibleGrouping} />
+
+### Collapsible grouping with default open groups
+
+<Canvas of={GroupingStories.CollapsibleGroupingWithDefaultOpenGroups} />
+
+### With grouping and pagination
+
+<Canvas of={GroupingStories.WithPaginationAndGrouping} />
+
+### Selectable grouping
+
+<Canvas of={GroupingStories.SelectableGrouping} />
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/grouping.stories.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/grouping.stories.tsx
new file mode 100644
index 0000000000..1b4245d6fe
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/grouping.stories.tsx
@@ -0,0 +1,298 @@
+import { Delete } from "@/icons/app"
+import { Meta, StoryObj } from "@storybook/react"
+import {
+  GroupingDefinition,
+  OneDataCollection,
+  useDataSource,
+} from "../exports"
+import {
+  createDataAdapter,
+  ExampleComponent,
+  filterPresets,
+  filters,
+  generateMockUsers,
+  mockUsers,
+  sortings,
+} from "./mockData"
+
+const meta = {
+  title: "Data Collection/Grouping",
+  component: ExampleComponent,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Grouping is a feature that allows you to group data by a specific field. This is useful for displaying data in a more organized way.",
+      },
+    },
+  },
+  argTypes: {
+    useObservable: {
+      control: "boolean",
+      description: "Use Observable for data fetching",
+    },
+    usePresets: {
+      control: "boolean",
+      description: "Include filter presets",
+    },
+    onSelectItems: {
+      action: "onSelectItems",
+      description:
+        "<p>Callback triggered when items are selected. It gets if `allItemsCheck` is checked(boolean | 'indeterminate', indeterminate means at least one item was delected), `itemsStatus` return the list of know items (if the datacollection is async we don't all the items) and the check status for each item, and `filters` the current filters state.</p>" +
+        "‼️ If the datacollection is async, the `itemsStatus` will return the items that are known at the moment of the callback execution, that means when the `allChecked` is not false you need to apply the selection logic in the backend for all the items (using the filters state) and removing the items which status is `checked: false`, but in this case never use the `itemsStatus` ",
+    },
+    onBulkAction: {
+      action: "onBulkAction",
+      description:
+        "<p>Callback triggered when a bulk action is performed. It gets the action name, and the same args as `inSelectItems`. ‼️ Please check the `onSelectItems` docs for more information.</p>",
+    },
+  },
+  tags: ["autodocs", "experimental"],
+} satisfies Meta<typeof ExampleComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// Examples with multiple visualizations
+export const WithGrouping: Story = {
+  render: () => (
+    <ExampleComponent
+      frozenColumns={2}
+      currentGrouping={{
+        field: "role",
+        order: "desc",
+      }}
+      grouping={{
+        mandatory: true,
+        groupBy: {
+          department: {
+            name: "Department",
+            label: (groupId) => groupId,
+            itemCount: async (groupId) => {
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              return mockUsers.filter((user) => user.department === groupId)
+                .length
+            },
+          },
+          role: {
+            name: "Role",
+            label: (groupId) => groupId,
+            itemCount: (groupId) => {
+              return mockUsers.filter((user) => user.role === groupId).length
+            },
+          },
+        },
+      }}
+    />
+  ),
+}
+
+export const WithOptionalGrouping: Story = {
+  render: () => (
+    <ExampleComponent
+      frozenColumns={2}
+      grouping={{
+        groupBy: {
+          department: {
+            name: "Department",
+            label: (groupId) => groupId,
+            itemCount: async (groupId) => {
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              return mockUsers.filter((user) => user.department === groupId)
+                .length
+            },
+          },
+        },
+      }}
+    />
+  ),
+}
+
+export const CollapsibleGrouping: Story = {
+  render: () => (
+    <ExampleComponent
+      frozenColumns={2}
+      grouping={{
+        collapsible: true,
+        mandatory: true,
+        groupBy: {
+          department: {
+            name: "Department",
+            label: (groupId) => groupId,
+            itemCount: async (groupId) => {
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              return mockUsers.filter((user) => user.department === groupId)
+                .length
+            },
+          },
+        },
+      }}
+    />
+  ),
+}
+
+export const CollapsibleGroupingWithDefaultOpenGroups: Story = {
+  render: () => (
+    <ExampleComponent
+      frozenColumns={2}
+      grouping={{
+        mandatory: true,
+        collapsible: true,
+        defaultOpenGroups: ["Engineering"],
+        groupBy: {
+          department: {
+            name: "Department",
+            label: (groupId) => groupId,
+            itemCount: async (groupId) => {
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              return mockUsers.filter((user) => user.department === groupId)
+                .length
+            },
+          },
+        },
+      }}
+    />
+  ),
+}
+
+export const WithPaginationAndGrouping: Story = {
+  render: () => {
+    // Create a fixed set of paginated users so we're not regenerating them on every render
+    const paginatedMockUsers = generateMockUsers(50)
+
+    const grouping: GroupingDefinition<(typeof mockUsers)[number]> = {
+      mandatory: true,
+      collapsible: true,
+      groupBy: {
+        department: {
+          name: "Department",
+          label: async (groupId) => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            return groupId
+          },
+          itemCount: async (groupId) => {
+            await new Promise((resolve) => setTimeout(resolve, 1500))
+            return paginatedMockUsers.filter(
+              (user) => user.department === groupId
+            ).length
+          },
+        },
+        role: {
+          name: "Role",
+          label: (groupId) => groupId,
+          itemCount: (groupId) => {
+            return paginatedMockUsers.filter((user) => user.role === groupId)
+              .length
+          },
+        },
+      },
+    }
+
+    const source = useDataSource({
+      selectable: (item) => item.id,
+      filters,
+      presets: filterPresets,
+      sortings,
+      grouping,
+      currentGrouping: {
+        field: "department",
+        order: "asc",
+      },
+      bulkActions: (allSelected) => {
+        return {
+          primary: [
+            {
+              label: allSelected ? "Delete All" : "Delete",
+              icon: Delete,
+              id: "delete-all",
+            },
+          ],
+        }
+      },
+      dataAdapter: createDataAdapter({
+        data: paginatedMockUsers,
+        delay: 500,
+        paginationType: "pages",
+      }),
+    })
+
+    return (
+      <OneDataCollection
+        source={source}
+        onSelectItems={(selectedItems) => {
+          console.log("Selected items", "->", selectedItems)
+        }}
+        onBulkAction={(action, selectedItems) => {
+          console.log(`Bulk action: ${action}`, "->", selectedItems)
+        }}
+        visualizations={[
+          {
+            type: "table",
+            options: {
+              columns: [
+                {
+                  label: "Name",
+                  render: (item) => item.name,
+                  sorting: "name",
+                },
+                {
+                  label: "Email",
+                  render: (item) => item.email,
+                  sorting: "email",
+                },
+                {
+                  label: "Role",
+                  render: (item) => item.role,
+                  sorting: "role",
+                },
+                {
+                  label: "Department",
+                  render: (item) => item.department,
+                  sorting: "department",
+                },
+              ],
+            },
+          },
+          {
+            type: "card",
+            options: {
+              cardProperties: [
+                { label: "Email", render: (item) => item.email },
+                { label: "Role", render: (item) => item.role },
+                { label: "Department", render: (item) => item.department },
+              ],
+              title: (item) => item.name,
+            },
+          },
+        ]}
+      />
+    )
+  },
+}
+
+export const SelectableGrouping: Story = {
+  render: () => (
+    <ExampleComponent
+      frozenColumns={2}
+      selectable={(item) => item.id}
+      grouping={{
+        mandatory: true,
+        collapsible: true,
+        defaultOpenGroups: ["Engineering"],
+        groupBy: {
+          department: {
+            name: "Department",
+            label: (groupId) => groupId,
+            itemCount: async (groupId) => {
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              return mockUsers.filter((user) => user.department === groupId)
+                .length
+            },
+          },
+        },
+      }}
+    />
+  ),
+}
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/index.stories.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/index.stories.tsx
index b8f20374a2..02e4e74bbd 100644
--- a/packages/react/src/experimental/OneDataCollection/__stories__/index.stories.tsx
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/index.stories.tsx
@@ -12,9 +12,11 @@ import {
   Upload,
 } from "@/icons/app"
 import { Meta, StoryObj } from "@storybook/react"
+import { GroupingDefinition } from "../grouping"
 import { OneDataCollection, useDataSource } from "../index"
 import { ItemActionsDefinition } from "../item-actions"
 import { NavigationFiltersDefinition } from "../navigationFilters/types"
+import { SimpleResponse } from "../types"
 import { useData } from "../useData"
 import {
   createDataAdapter,
@@ -26,6 +28,8 @@ import {
   filters,
   filterUsers,
   generateMockUsers,
+  getMockVisualizations,
+  MockUser,
   mockUsers,
   PERFORMANCE_SCORE_MOCK,
   PROJECTS_MOCK,
@@ -516,6 +520,11 @@ export const RendererTypes: Story = {
 }
 
 export const CustomCardProperties: Story = {
+  parameters: {
+    a11y: {
+      skipCi: true,
+    },
+  },
   render: () => {
     const dataSource = useDataSource({
       filters,
@@ -654,7 +663,8 @@ const JsonVisualization = ({
       typeof filters,
       typeof sortings,
       ItemActionsDefinition<(typeof mockUsers)[number]>,
-      NavigationFiltersDefinition
+      NavigationFiltersDefinition,
+      GroupingDefinition<(typeof mockUsers)[number]>
     >
   >
 }) => {
@@ -685,7 +695,8 @@ export const WithCustomJsonView: Story = {
       typeof filters,
       typeof sortings,
       MockActions,
-      NavigationFiltersDefinition
+      NavigationFiltersDefinition,
+      GroupingDefinition<MockUser>
     >({
       filters,
       sortings,
@@ -862,51 +873,13 @@ export const WithMultipleVisualizations: Story = {
       }),
     })
 
-    return (
-      <OneDataCollection
-        source={source}
-        visualizations={[
-          {
-            type: "table",
-            options: {
-              columns: [
-                {
-                  label: "Name",
-                  render: (item) => item.name,
-                  sorting: "name",
-                },
-                {
-                  label: "Email",
-                  render: (item) => item.email,
-                  sorting: "email",
-                },
-                {
-                  label: "Role",
-                  render: (item) => item.role,
-                  sorting: "role",
-                },
-                {
-                  label: "Department",
-                  render: (item) => item.department,
-                  sorting: "department",
-                },
-              ],
-            },
-          },
-          {
-            type: "card",
-            options: {
-              cardProperties: [
-                { label: "Email", render: (item) => item.email },
-                { label: "Role", render: (item) => item.role },
-                { label: "Department", render: (item) => item.department },
-              ],
-              title: (item) => item.name,
-            },
-          },
-        ]}
-      />
+    const visualizations = Object.values(
+      getMockVisualizations({
+        frozenColumns: 0,
+      })
     )
+
+    return <OneDataCollection source={source} visualizations={visualizations} />
   },
 }
 
@@ -915,6 +888,10 @@ export const WithPagination: Story = {
     // Create a fixed set of paginated users so we're not regenerating them on every render
     const paginatedMockUsers = generateMockUsers(50)
 
+    const mockVisualizations = getMockVisualizations({
+      frozenColumns: 0,
+    })
+
     const source = useDataSource({
       filters,
       presets: filterPresets,
@@ -948,44 +925,9 @@ export const WithPagination: Story = {
           console.log(`Bulk action: ${action}`, "->", selectedItems)
         }}
         visualizations={[
-          {
-            type: "table",
-            options: {
-              columns: [
-                {
-                  label: "Name",
-                  render: (item) => item.name,
-                  sorting: "name",
-                },
-                {
-                  label: "Email",
-                  render: (item) => item.email,
-                  sorting: "email",
-                },
-                {
-                  label: "Role",
-                  render: (item) => item.role,
-                  sorting: "role",
-                },
-                {
-                  label: "Department",
-                  render: (item) => item.department,
-                  sorting: "department",
-                },
-              ],
-            },
-          },
-          {
-            type: "card",
-            options: {
-              cardProperties: [
-                { label: "Email", render: (item) => item.email },
-                { label: "Role", render: (item) => item.role },
-                { label: "Department", render: (item) => item.department },
-              ],
-              title: (item) => item.name,
-            },
-          },
+          mockVisualizations.table,
+          mockVisualizations.card,
+          mockVisualizations.list,
         ]}
       />
     )
@@ -994,20 +936,25 @@ export const WithPagination: Story = {
 
 export const WithSynchronousData: Story = {
   render: () => {
+    const mockVisualizations = getMockVisualizations({
+      frozenColumns: 0,
+    })
+
     const source = useDataSource<
-      (typeof mockUsers)[number],
+      MockUser,
       typeof filters,
       typeof sortings,
-      ItemActionsDefinition<(typeof mockUsers)[number]>,
-      NavigationFiltersDefinition
+      ItemActionsDefinition<MockUser>,
+      NavigationFiltersDefinition,
+      GroupingDefinition<MockUser>
     >({
       filters,
       sortings,
       presets: filterPresets,
       dataAdapter: {
-        fetchData: ({ filters, sortings }) => {
+        fetchData: ({ filters, sortings, navigationFilters }) => {
           // Ensure sortings are properly applied
-          return filterUsers(mockUsers, filters, sortings)
+          return filterUsers(mockUsers, filters, sortings, navigationFilters)
         },
       },
     })
@@ -1016,33 +963,9 @@ export const WithSynchronousData: Story = {
       <OneDataCollection
         source={source}
         visualizations={[
-          {
-            type: "table",
-            options: {
-              columns: [
-                {
-                  label: "Name",
-                  render: (item) => item.name,
-                  sorting: "name",
-                },
-                {
-                  label: "Email",
-                  render: (item) => item.email,
-                  sorting: "email",
-                },
-                {
-                  label: "Role",
-                  render: (item) => item.role,
-                  sorting: "role",
-                },
-                {
-                  label: "Department",
-                  render: (item) => item.department,
-                  sorting: "department",
-                },
-              ],
-            },
-          },
+          mockVisualizations.table,
+          mockVisualizations.list,
+          mockVisualizations.card,
         ]}
       />
     )
@@ -1224,7 +1147,8 @@ export const WithSyncSearch: Story = {
       typeof filters,
       typeof sortings,
       ItemActionsDefinition<(typeof mockUserData)[number]>,
-      NavigationFiltersDefinition
+      NavigationFiltersDefinition,
+      GroupingDefinition<(typeof mockUserData)[number]>
     >({
       filters,
       sortings,
@@ -1264,7 +1188,7 @@ export const WithSyncSearch: Story = {
 
           // Apply sorting if provided
           if (sortings) {
-            ;[sortings].forEach(({ field, order }) => {
+            sortings.forEach(({ field, order }) => {
               filteredUsers.sort((a, b) => {
                 const aValue = a[field as keyof (typeof mockUserData)[number]]
                 const bValue = b[field as keyof (typeof mockUserData)[number]]
@@ -1344,7 +1268,8 @@ export const WithAsyncSearch: Story = {
       typeof filters,
       typeof sortings,
       MockActions,
-      NavigationFiltersDefinition
+      NavigationFiltersDefinition,
+      GroupingDefinition<MockUser>
     >({
       filters,
       sortings,
@@ -1411,7 +1336,7 @@ export const WithAsyncSearch: Story = {
 
               // Apply sorting if provided
               if (sortings) {
-                ;[sortings].forEach(({ field, order }) => {
+                sortings.forEach(({ field, order }) => {
                   const direction = order
 
                   filteredUsers.sort((a, b) => {
@@ -1992,3 +1917,57 @@ export const TotalItemsSummary: Story = {
     />
   ),
 }
+
+export const TableAsyncCols: Story = {
+  render: () => {
+    const dataSource = useDataSource({
+      dataAdapter: {
+        fetchData: () =>
+          new Promise<SimpleResponse<MockUser>>((resolve) => {
+            setTimeout(() => {
+              resolve({
+                records: mockUsers,
+                properties: [
+                  {
+                    name: "name",
+                    label: "Name",
+                  },
+                  {
+                    name: "email",
+                    label: "Email",
+                  },
+                ],
+              })
+            }, 1000)
+          }),
+      },
+    })
+
+    return (
+      <OneDataCollection
+        source={dataSource}
+        visualizations={[
+          {
+            type: "table",
+            options: {
+              columns: (properties: Array<{ name: string; label: string }>) => {
+                console.log("properties", properties)
+                return [
+                  {
+                    label: "Fixed col",
+                    render: (item) => item.name,
+                  },
+                  ...(properties || []).map((col) => ({
+                    label: col.label,
+                    render: (item) => item[col.name],
+                    sorting: col.name,
+                  })),
+                ]
+              },
+            },
+          },
+        ]}
+      />
+    )
+  },
+}
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/mockData.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/mockData.tsx
index 4fe1432639..130553e06d 100644
--- a/packages/react/src/experimental/OneDataCollection/__stories__/mockData.tsx
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/mockData.tsx
@@ -4,27 +4,28 @@ import {
   DataAdapter,
   FilterDefinition,
   FiltersState,
+  GroupingDefinition,
+  GroupingState,
   ItemActionsDefinition,
-  NewColor,
   OnBulkActionCallback,
   OneDataCollection,
   OnSelectItemsCallback,
   PaginatedResponse,
   PresetsDefinition,
   RecordType,
-  SortingsDefinition,
-  SortingsState,
+  SortingsStateMultiple,
   useDataSource,
-} from "@/experimental/exports"
+} from "@/experimental/OneDataCollection/exports"
 import { PromiseState } from "@/lib/promise-to-observable"
 import { Observable } from "zen-observable-ts"
 
+import { NewColor } from "@/experimental/Information/Tags/DotTag"
 import { Ai, Delete, Pencil, Star } from "../../../icons/app"
 import {
   NavigationFiltersDefinition,
   NavigationFiltersState,
 } from "../navigationFilters/types"
-import { Visualization, VisualizationType } from "../visualizations"
+import { Visualization, VisualizationType } from "../visualizations/collection"
 
 export const DEPARTMENTS_MOCK = [
   "Engineering",
@@ -106,8 +107,7 @@ export const filterPresets: PresetsDefinition<typeof filters> = [
   },
 ]
 
-// Mock data
-export const mockUsers: {
+export type MockUser = {
   index: number
   id: string
   name: string
@@ -116,70 +116,131 @@ export const mockUsers: {
   department: (typeof DEPARTMENTS_MOCK)[number]
   status: string
   isStarred: boolean
-  href?: string
   salary: number | undefined
   joinedAt: Date
-}[] = [
-  {
-    index: 0,
-    id: "user-1",
-    name: "John Doe",
-    email: "john@example.com",
-    role: "Senior Engineer",
-    department: DEPARTMENTS_MOCK[0],
-    status: "active",
-    isStarred: true,
-    salary: 100000,
-    joinedAt: START_DATE_MOCK[0],
-  },
-  {
-    index: 1,
-    id: "user-2",
-    name: "Jane Smith",
-    email: "jane@example.com",
-    role: "Product Manager",
-    department: DEPARTMENTS_MOCK[1],
-    status: "active",
-    isStarred: false,
-    salary: 80000,
-    joinedAt: START_DATE_MOCK[1],
-  },
-  {
-    index: 2,
-    id: "user-3",
-    name: "Bob Johnson",
-    email: "bob@example.com",
-    role: "Designer",
-    department: DEPARTMENTS_MOCK[2],
-    status: "inactive",
-    isStarred: false,
-    salary: 90000,
-    joinedAt: START_DATE_MOCK[2],
-  },
-  {
-    index: 3,
-    id: "user-4",
-    name: "Alice Williams",
-    email: "alice@example.com",
-    role: "Marketing Lead",
-    department: DEPARTMENTS_MOCK[3],
-    status: "active",
-    isStarred: true,
-    salary: undefined,
-    joinedAt: START_DATE_MOCK[3],
-  },
+}
+
+export const FIRST_NAMES_MOCK = [
+  "Dani",
+  "Desirée",
+  "Eliseo",
+  "Arnau",
+  "Carlos",
+  "Lilian",
+  "Andrea",
+  "Mario",
+  "Nik",
+  "René",
+  "Sergio",
+  "Saúl",
+]
+
+export const SURNAMES_MOCK = [
+  "Smith",
+  "Johnson",
+  "Williams",
+  "Brown",
+  "Jones",
+  "Garcia",
+  "Miller",
+  "Davis",
+  "Rodriguez",
+  "Martinez",
+  "Hernandez",
+  "Lopez",
+  "Gonzalez",
+  "Wilson",
+  "Anderson",
+  "Thomas",
+  "Taylor",
+  "Moore",
+  "Jackson",
+  "Martin",
+  "Lee",
+  "Perez",
+  "Thompson",
+  "White",
+  "Harris",
+  "Sanchez",
+  "Clark",
+  "Ramirez",
+  "Lewis",
+  "Robinson",
+]
+
+export const ROLES_MOCK = [
+  "Senior Engineer",
+  "Product Manager",
+  "Designer",
+  "Marketing Lead",
+  "Software Engineer",
 ]
 
+export const STATUS_MOCK = ["active", "inactive", "active", "active", "active"]
+
+export const SALARY_MOCK = [
+  100000,
+  80000,
+  90000,
+  undefined,
+  120000,
+  95000,
+  85000,
+  110000,
+  undefined,
+  75000,
+  130000,
+  92000,
+  88000,
+  undefined,
+  115000,
+  105000,
+  82000,
+  98000,
+  undefined,
+  125000,
+  78000,
+  108000,
+  94000,
+  undefined,
+  135000,
+]
+
+export const generateMockUsers = (count: number): MockUser[] => {
+  return Array.from({ length: count }).map((_, index) => {
+    const department = DEPARTMENTS_MOCK[index % DEPARTMENTS_MOCK.length]
+    const name = `${FIRST_NAMES_MOCK[index % FIRST_NAMES_MOCK.length]} ${SURNAMES_MOCK[index % SURNAMES_MOCK.length]}`
+    const email = `${name.toLowerCase().replace(/\s+/g, ".")}@example.com`
+    return {
+      index,
+      id: `user-${index + 1}`,
+      name,
+      email,
+      role: ROLES_MOCK[index % ROLES_MOCK.length],
+      department,
+      status: STATUS_MOCK[index % STATUS_MOCK.length],
+      isStarred: index % 3 === 0,
+      href: `/users/user-${index + 1}`,
+      salary: SALARY_MOCK[index % SALARY_MOCK.length],
+      joinedAt: START_DATE_MOCK[index % START_DATE_MOCK.length],
+    }
+  })
+}
+
+// Mock data
+export const mockUsers = generateMockUsers(10)
+
 export const getMockVisualizations = (options?: {
   frozenColumns?: 0 | 1 | 2
 }): Record<
   Exclude<VisualizationType, "custom">,
   Visualization<
-    (typeof mockUsers)[number],
+    MockUser,
     FiltersType,
     typeof sortings,
-    ItemActionsDefinition<(typeof mockUsers)[number]>,
-    NavigationFiltersDefinition
+    ItemActionsDefinition<MockUser>,
+    NavigationFiltersDefinition,
+    GroupingDefinition<MockUser>
   >
 > => ({
   table: {
@@ -282,8 +343,44 @@ export const getMockVisualizations = (options?: {
       ],
     },
   },
+  list: {
+    type: "list",
+    options: {
+      itemDefinition: (item) => ({
+        title: item.name,
+        description: item.email,
+        metadata: item.role,
+        avatar: {
+          type: "person",
+          firstName: item.name.split(" ")[0],
+          lastName: item.name.split(" ")[1],
+        },
+      }),
+      fields: [
+        {
+          label: "Email",
+          render: (item) => item.email,
+          sorting: "email",
+        },
+        {
+          label: "Role",
+          render: (item) => item.role,
+          sorting: "role",
+        },
+        {
+          label: "Department",
+          render: (item) => ({
+            type: "dotTag",
+            value: {
+              color: "yellow",
+              label: item.department,
+            },
+          }),
+        },
+      ],
+    },
+  },
 })
-
 // Example of using the object-based approach (recommended)
 export const sortings = {
   name: {
@@ -304,19 +401,10 @@ export const sortings = {
 } as const
 
 // Helper function to filter users based on filters
-export const filterUsers = <
-  T extends RecordType & {
-    index: number
-    name: string
-    email: string
-    department: string
-    salary: number | undefined
-    joinedAt: Date
-  },
->(
-  users: T[],
+export const filterUsers = (
+  users: MockUser[],
   filterValues: FiltersState<typeof filters>,
-  sortingState: SortingsState<typeof sortings>,
+  sortingState: SortingsStateMultiple,
   navigationFilters?: NavigationFiltersState<NavigationFiltersDefinition>,
   search?: string
 ) => {
@@ -333,10 +421,10 @@ export const filterUsers = <
   }
 
   if (sortingState) {
-    ;[sortingState].forEach(({ field, order }) => {
+    sortingState.reverse().forEach(({ field, order }) => {
       filteredUsers = filteredUsers.sort((a, b) => {
-        const aValue = a[field]
-        const bValue = b[field]
+        const aValue = a[field as keyof MockUser]
+        const bValue = b[field as keyof MockUser]
 
         // Handle string comparisons
         if (typeof aValue === "string" && typeof bValue === "string") {
@@ -411,11 +499,7 @@ export const createObservableDataFetch = (delay = 0) => {
     filters,
     sortings: sortingsState,
     navigationFilters,
-  }: BaseFetchOptions<
-    FiltersType,
-    typeof sortings,
-    NavigationFiltersDefinition
-  >) =>
+  }: BaseFetchOptions<FiltersType, NavigationFiltersDefinition>) =>
     new Observable<PromiseState<(typeof mockUsers)[number][]>>((observer) => {
       observer.next({
         loading: true,
@@ -447,12 +531,8 @@ export const createPromiseDataFetch = (delay = 500) => {
     sortings: sortingsState,
     search,
     navigationFilters,
-  }: BaseFetchOptions<
-    FiltersType,
-    typeof sortings,
-    NavigationFiltersDefinition
-  >) =>
-    new Promise<(typeof mockUsers)[number][]>((resolve) => {
+  }: BaseFetchOptions<FiltersType, NavigationFiltersDefinition>) =>
+    new Promise<MockUser[]>((resolve) => {
       setTimeout(() => {
         resolve(
           filterUsers(
@@ -477,6 +557,8 @@ export const ExampleComponent = ({
   frozenColumns = 0,
   selectable,
   bulkActions,
+  currentGrouping,
+  grouping,
   navigationFilters,
   totalItemSummary,
   visualizations,
@@ -486,26 +568,27 @@ export const ExampleComponent = ({
   frozenColumns?: 0 | 1 | 2
   visualizations?: ReadonlyArray<
     Visualization<
-      (typeof mockUsers)[number],
+      MockUser,
       FiltersType,
       typeof sortings,
-      ItemActionsDefinition<(typeof mockUsers)[number]>,
-      NavigationFiltersDefinition
+      ItemActionsDefinition<MockUser>,
+      NavigationFiltersDefinition,
+      GroupingDefinition<MockUser>
     >
   >
-  selectable?: (item: (typeof mockUsers)[number]) => string | number | undefined
+  selectable?: (item: MockUser) => string | number | undefined
   bulkActions?: (
-    selectedItems: Parameters<
-      OnBulkActionCallback<(typeof mockUsers)[number], FiltersType>
-    >[1]
+    selectedItems: Parameters<OnBulkActionCallback<MockUser, FiltersType>>[1]
   ) => {
     primary: BulkActionDefinition[]
     secondary?: BulkActionDefinition[]
   }
-  onSelectItems?: OnSelectItemsCallback<(typeof mockUsers)[number], FiltersType>
-  onBulkAction?: OnBulkActionCallback<(typeof mockUsers)[number], FiltersType>
+  onSelectItems?: OnSelectItemsCallback<MockUser, FiltersType>
+  onBulkAction?: OnBulkActionCallback<MockUser, FiltersType>
   navigationFilters?: NavigationFiltersDefinition
   totalItemSummary?: (totalItems: number) => string
+  grouping?: GroupingDefinition<MockUser> | undefined
+  currentGrouping?: GroupingState<MockUser, GroupingDefinition<MockUser>>
 }) => {
   const mockVisualizations = getMockVisualizations({
     frozenColumns,
@@ -515,12 +598,15 @@ export const ExampleComponent = ({
     navigationFilters,
     presets: usePresets ? filterPresets : undefined,
     sortings,
+    grouping,
+    currentGrouping: currentGrouping,
     itemActions: (item) => [
       {
         label: "Edit",
         icon: Pencil,
         onClick: () => console.log(`Editing ${item.name}`),
         description: "Modify user information",
+        type: "primary",
       },
       {
         label: "View Profile",
@@ -566,34 +652,17 @@ export const ExampleComponent = ({
           console.log(`Bulk action: ${action}`, "->", selectedItems)
         }
         visualizations={
-          visualizations ?? [mockVisualizations.table, mockVisualizations.card]
+          visualizations ?? [
+            mockVisualizations.table,
+            mockVisualizations.card,
+            mockVisualizations.list,
+          ]
         }
       />
     </div>
   )
 }
 
-// Fix the generateMockUsers function to use the correct department types
-export const generateMockUsers = (count: number) => {
-  return Array.from({ length: count }).map((_, index) => {
-    const department = DEPARTMENTS_MOCK[index % DEPARTMENTS_MOCK.length]
-    return {
-      index,
-      id: `user-${index + 1}`,
-      name: `User ${index + 1}`,
-      email: `user${index + 1}@example.com`,
-      role:
-        index % 3 === 0 ? "Engineer" : index % 3 === 1 ? "Designer" : "Manager",
-      department,
-      status: index % 5 === 0 ? "inactive" : "active",
-      isStarred: index % 3 === 0,
-      href: `/users/user-${index + 1}`,
-      salary: department === "Marketing" ? 50000 + index * 1000 : undefined,
-      joinedAt: START_DATE_MOCK[index % START_DATE_MOCK.length],
-    }
-  })
-}
-
 interface DataAdapterOptions<TRecord> {
   data: TRecord[]
   delay?: number
@@ -610,7 +679,6 @@ export function createDataAdapter<
     salary?: number
   },
   TFilters extends Record<string, FilterDefinition>,
-  TSortings extends SortingsDefinition,
   TNavigationFilters extends NavigationFiltersDefinition,
 >({
   data,
@@ -621,13 +689,12 @@ export function createDataAdapter<
 }: DataAdapterOptions<TRecord>): DataAdapter<
   TRecord,
   TFilters,
-  TSortings,
   TNavigationFilters
 > {
   const filterData = (
     records: TRecord[],
     filters: FiltersState<TFilters>,
-    sortingsState: SortingsState<TSortings>,
+    sortingsState: SortingsStateMultiple,
     pagination?: { currentPage?: number; perPage?: number }
   ): TRecord[] | PaginatedResponse<TRecord> => {
     let filteredRecords = [...records]
@@ -659,7 +726,7 @@ export function createDataAdapter<
 
     // Apply sorting if available
     if (sortingsState) {
-      ;[sortingsState].reverse().forEach(({ field, order }) => {
+      sortingsState.reverse().forEach(({ field, order }) => {
         const sortField = field as keyof TRecord
         const sortDirection = order
 
@@ -725,12 +792,7 @@ export function createDataAdapter<
   }
 
   if (paginationType === "pages") {
-    const adapter: DataAdapter<
-      TRecord,
-      TFilters,
-      TSortings,
-      TNavigationFilters
-    > = {
+    const adapter: DataAdapter<TRecord, TFilters, TNavigationFilters> = {
       paginationType: "pages",
       perPage,
       fetchData: ({ filters, sortings, pagination }) => {
@@ -795,52 +857,51 @@ export function createDataAdapter<
     return adapter
   }
 
-  const adapter: DataAdapter<TRecord, TFilters, TSortings, TNavigationFilters> =
-    {
-      fetchData: ({ filters, sortings }) => {
-        if (useObservable) {
-          return new Observable<PromiseState<TRecord[]>>((observer) => {
-            observer.next({
-              loading: true,
-              error: null,
-              data: null,
-            })
-
-            setTimeout(() => {
-              try {
-                const fetch = () =>
-                  filterData(data, filters, sortings) as TRecord[]
-
-                observer.next({
-                  loading: false,
-                  error: null,
-                  data: fetch(),
-                })
-                observer.complete()
-              } catch (error) {
-                observer.next({
-                  loading: false,
-                  error:
-                    error instanceof Error ? error : new Error(String(error)),
-                  data: null,
-                })
-                observer.complete()
-              }
-            }, delay)
+  const adapter: DataAdapter<TRecord, TFilters, TNavigationFilters> = {
+    fetchData: ({ filters, sortings }) => {
+      if (useObservable) {
+        return new Observable<PromiseState<TRecord[]>>((observer) => {
+          observer.next({
+            loading: true,
+            error: null,
+            data: null,
           })
-        }
 
-        return new Promise<TRecord[]>((resolve, reject) => {
           setTimeout(() => {
             try {
-              resolve(filterData(data, filters, sortings) as TRecord[])
+              const fetch = () =>
+                filterData(data, filters, sortings) as TRecord[]
+
+              observer.next({
+                loading: false,
+                error: null,
+                data: fetch(),
+              })
+              observer.complete()
             } catch (error) {
-              reject(error)
+              observer.next({
+                loading: false,
+                error:
+                  error instanceof Error ? error : new Error(String(error)),
+                data: null,
+              })
+              observer.complete()
             }
           }, delay)
         })
-      },
-    }
+      }
+
+      return new Promise<TRecord[]>((resolve, reject) => {
+        setTimeout(() => {
+          try {
+            resolve(filterData(data, filters, sortings) as TRecord[])
+          } catch (error) {
+            reject(error)
+          }
+        }, delay)
+      })
+    },
+  }
 
   return adapter
 }
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/selectable-bulk-actions.mdx b/packages/react/src/experimental/OneDataCollection/__stories__/selectable-bulk-actions.mdx
new file mode 100644
index 0000000000..737007701b
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/selectable-bulk-actions.mdx
@@ -0,0 +1,202 @@
+import { Canvas, Meta, Controls, Unstyled, Story } from "@storybook/blocks"
+import { DoDonts } from "@/lib/storybook-utils/do-donts"
+
+import * as DataCollectionStories from "./index.stories"
+import * as ActionDataCollectionStories from "./collection-actions.stories"
+
+<Meta title="Data collection/Selectable and bulk actions" />
+
+# Data collection Selectable and bulk actions
+
+## Introduction
+
+The selectable and bulk actions are two features related (but selectable can
+work without bulk actions) that allow the user to select items in the data
+collection and perform actions on them.
+
+The selectable is applied in the frontend just defining a function that returns
+the id of the item to be selected in the source. This value is common for all
+visualizations.
+
+The bulk actions are applied in the frontend just defining a function that
+returns the actions to be performed on the selected items.
+
+> Important: The value returned by the selectable function must be unique for
+> each datacollection
+
+## Selectable
+
+In order to use the selectable, you need to define a function that returns the
+id of the item to be selected in the source. This value is common for all
+visualizations.
+
+> Important: The value returned by the selectable function must be unique for
+> each datacollection
+
+```tsx
+const { source, currentSelectable, setCurrentSelectable } = useDataCollection({
+  ...
+  selectable: (item) => item.id,
+  },
+  ...
+})
+
+<OneDataCollection
+  source={source}
+  onSelectItems={handleSelectItems}
+/>
+```
+
+You can react to the item selection change using the `OneDataCollection`
+component `onSelectItems` prop.
+
+### onSelectItems
+
+The `onSelectItems` prop is a function that is called when the user selects or
+de-selects an item.
+
+The callback receives the an object with the following properties:
+
+- `allSelected`: A boolean indicating the all items check is checked.
+- `groupsStatus`: If the data is grouped, an object with the status of each
+  group all checked status. e.g. `{ "group1": true, "group2": false }` (Checked
+  true means the user has checked all items in the group or the all group global
+  check)
+- `itemsStatus`: This is an array of `{item: R, checked: boolean}` objects which
+  indicates the items status. NOTE: This doesn't represent all the selected
+  items, it represents the items that where loaded in the data collection and
+  their status.
+- `filters`: The current filters state
+
+#### Why this complex structure?
+
+You can think why not just return an array of selected items?
+
+The answer is that the data collection is a stateful component that is
+responsible for fetching the data and not all the dataset is loaded from the
+backend. Data collection only loads the data needed to render the view in each
+moment.
+
+Imagine this scenario:
+
+- You have a dataset of 1000 items
+- You are in the first page
+- You click on the "Select all" button
+- You navigate to the second page
+- You select all selected because the all items check is checked
+- You navigate to the third page
+- You deselect the element 1,5,6 and 10 in the third page
+- You want to delete the selected items
+
+The datacollection only know the first 30 items in the dataset, so it can't
+return an array of selected items.
+
+In this case trusting only in the itemsStatus the action will not delete all the
+items the user expect as there is no items loaded from the rest of pages.
+
+This is why the `onSelectItems` callback receives more information to allow you
+to recover the list of selected items in your side (typically in the backend)
+
+In this example you know the user has checked the `allSelected` that means it
+wants to delete all the items in the dataset, but from the `itemsStatus` you
+know that the user unchecked the items 1,5,6 and 10 you should not remove them.
+
+This works in the same way for the groups.
+
+<Canvas
+  of={DataCollectionStories.WithPagination}
+  meta={DataCollectionStories}
+/>
+
+## Bulk actions
+
+The bulk actions allows you to define a set of actions that will be available
+when the user has selected items.
+
+The data collection will render the actions in the actionbar of the data
+collection and will be disabled if no items are selected.
+
+```tsx
+const { source, currentSelectable, setCurrentSelectable } = useDataCollection({
+  ...
+  selectable: (item) => item.id,
+  bulkActions: (allSelected) => {
+    return {
+      primary: [
+        {
+          label: allSelected ? "Delete All" : "Delete",
+          icon: Delete,
+          id: "delete-all",
+        },
+        {
+          label: allSelected ? "Edit All" : "Edit",
+          icon: Edit,
+          id: "edit-all",
+        },
+      ],
+      secondary: [
+        {
+          label: "Approve",
+          icon: Approve,
+          id: "approve",
+        },
+      ],
+    }
+  }
+  ...
+})
+
+<OneDataCollection
+  source={source}
+  onBulkAction={handleBulkActions}
+/>
+```
+
+You can react to the action selected by the user using the `OneDataCollection`
+component `onBulkAction` prop.
+
+### datasource.bulkActions
+
+Defined the available actions in the data source via a function that get the
+selected items (in the same way as the `onSelectItems` callback). This allows
+you to define the actions based on the selected items.
+
+It returns an object with the following properties:
+
+- `primary`: A mandatory array of primary actions. If more than one action is
+  defined, the data collection will render a dropdown button with the actions.
+- `secondary`: An optional array of secondary actions.
+
+```tsx
+  bulkActions?: (
+    selectedItems: Parameters<OnBulkActionCallback<Record, Filters>>[1]
+  ) => {
+    primary: BulkActionDefinition[]
+    secondary?: BulkActionDefinition[]
+  }
+```
+
+#### BulkActionDefinition
+
+- `label: string`: The label to show in the button / dropdown
+- `icon?: IconType`: The icon to show in the button / dropdown
+- `id: string`: The id of the action. This is used to identify the action in the
+  `onBulkAction` callback.
+- `keepSelection?: boolean`: If true, the selection will not be cleared after
+  the action is performed (false by default)
+
+### onBulkAction
+
+The `onBulkAction` prop is a function that is called when the user selects an
+action.
+
+The callback receives the following parameters:
+
+- `action`: The action selected by the user
+- `selectedItems`: The items selected by the user. Check the `onSelectItems`
+  callback for more information about the structure of the object.
+
+<Canvas
+  of={DataCollectionStories.WithSelectableAndBulkActions}
+  meta={DataCollectionStories}
+/>
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/visualizations.mdx b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations.mdx
new file mode 100644
index 0000000000..7760fe4615
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations.mdx
@@ -0,0 +1,41 @@
+import { Canvas, Meta, Controls, Unstyled } from "@storybook/blocks"
+import { DoDonts } from "@/lib/storybook-utils/do-donts"
+import { FeatureCard } from "~/docs/components/FeatureCard"
+import { Table } from "@/icons/app"
+import { Kanban } from "@/icons/app"
+import { List } from "@/icons/app"
+
+<Meta title="Data collection/Visualizations" />
+
+# Data collection/Visualizations
+
+## Introduction
+
+Visualizations are the way to display the data in the collection.
+
+Data collection abstracts the data (including, filtering, sorting, grouping,
+etc.) and the visualization, of the data at item level (visualization) and
+[cell level](?path=/docs/data-collection-cell-types--docs).
+
+<Unstyled>
+  <div className="mt-6 grid grid-cols-1 gap-6 pb-8 md:grid-cols-3">
+    <FeatureCard
+      icon={Table}
+      title="Table"
+      description="Table visualization is the default visualization for data collection. It displays the data in a table format."
+      href="/?path=/docs/components-data-collection-visualizations-table--documentation"
+    />
+    <FeatureCard
+      icon={Kanban}
+      title="Card"
+      description="Card visualization is a visualization that displays the data in a card format."
+      href="/?path=/docs/components-data-collection-visualizations-card--documentation"
+    />
+    <FeatureCard
+      icon={List}
+      title="List"
+      description="List visualization is a visualization that displays the data in a list format."
+      href="/?path=/docs/components-data-collection-visualizations-list--documentation"
+    />
+  </div>
+</Unstyled>
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/card.stories.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/card.stories.tsx
new file mode 100644
index 0000000000..2ff217d7a8
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/card.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { ExampleComponent, getMockVisualizations } from "../mockData"
+
+const meta = {
+  title: "Data Collection/Visualizations/Card",
+  parameters: {
+    layout: "padded",
+    a11y: {
+      skipCi: true,
+    },
+    docs: {
+      description: {
+        component:
+          "[TODO] Card view specific visualization. Displays a card of items with a checkbox column and a list of properties.",
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BasicListVisualization: Story = {
+  render: () => {
+    const mockVisualizations = getMockVisualizations()
+    return <ExampleComponent visualizations={[mockVisualizations.card]} />
+  },
+}
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/list.stories.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/list.stories.tsx
new file mode 100644
index 0000000000..3a77c7711e
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/list.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { ExampleComponent, getMockVisualizations, mockUsers } from "../mockData"
+
+const meta = {
+  title: "Data Collection/Visualizations/List",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "List view specific visualization. Displays a list of items with a checkbox column and a list of properties.",
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BasicListVisualization: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  render: () => {
+    const mockVisualizations = getMockVisualizations()
+    return <ExampleComponent visualizations={[mockVisualizations.list]} />
+  },
+}
+
+export const ListVisualizationWithGrouping: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  render: () => {
+    const mockVisualizations = getMockVisualizations()
+    return (
+      <ExampleComponent
+        visualizations={[mockVisualizations.list]}
+        grouping={{
+          collapsible: true,
+          mandatory: true,
+          groupBy: {
+            department: {
+              name: "Department",
+              label: (groupId) => groupId,
+              itemCount: async (groupId) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return mockUsers.filter((user) => user.department === groupId)
+                  .length
+              },
+            },
+          },
+        }}
+      />
+    )
+  },
+}
diff --git a/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/table.stories.tsx b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/table.stories.tsx
new file mode 100644
index 0000000000..ea5911a3e6
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__stories__/visualizations/table.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { ExampleComponent, getMockVisualizations } from "../mockData"
+
+const meta = {
+  title: "Data Collection/Visualizations/Table",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "[TODO] Table view specific visualization. Displays a table of items with a checkbox column and a list of properties.",
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BasicListVisualization: Story = {
+  render: () => {
+    const mockVisualizations = getMockVisualizations()
+    return <ExampleComponent visualizations={[mockVisualizations.table]} />
+  },
+}
diff --git a/packages/react/src/experimental/OneDataCollection/index.spec.tsx b/packages/react/src/experimental/OneDataCollection/__tests__/index.spec.tsx
similarity index 90%
rename from packages/react/src/experimental/OneDataCollection/index.spec.tsx
rename to packages/react/src/experimental/OneDataCollection/__tests__/index.spec.tsx
index 2133b9097b..48ff14dfa5 100644
--- a/packages/react/src/experimental/OneDataCollection/index.spec.tsx
+++ b/packages/react/src/experimental/OneDataCollection/__tests__/index.spec.tsx
@@ -10,15 +10,15 @@ import { userEvent } from "@testing-library/user-event"
 import { LayoutGrid } from "lucide-react"
 import { describe, expect, test, vi } from "vitest"
 import { Observable } from "zen-observable-ts"
-import { PromiseState } from "../../lib/promise-to-observable"
-import { defaultTranslations, I18nProvider } from "../../lib/providers/i18n"
-import type { FiltersDefinition } from "./Filters/types"
-import { OneDataCollection, useDataSource } from "./index"
-import { ItemActionsDefinition } from "./item-actions"
-import { NavigationFiltersDefinition } from "./navigationFilters/types"
-import { SortingsDefinition } from "./sortings"
-import type { DataSource } from "./types"
-import { useData } from "./useData"
+import { PromiseState } from "../../../lib/promise-to-observable"
+import { defaultTranslations, I18nProvider } from "../../../lib/providers/i18n"
+import type { FiltersDefinition } from "../Filters/types"
+import { OneDataCollection, useDataSource } from "../index"
+import { ItemActionsDefinition } from "../item-actions"
+import { NavigationFiltersDefinition } from "../navigationFilters/types"
+import { SortingsDefinition } from "../sortings"
+import type { DataSource, GroupingDefinition, SortingsState } from "../types"
+import { GROUP_ID_SYMBOL, useData, WithGroupId } from "../useData"
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <I18nProvider translations={defaultTranslations}>{children}</I18nProvider>
@@ -26,7 +26,10 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 
 describe("Collections", () => {
   test("renders with basic search filter", async () => {
-    const mockData = [{ name: "John Doe" }, { name: "Jane Smith" }]
+    const mockData: WithGroupId<{ name: string }>[] = [
+      { name: "John Doe", [GROUP_ID_SYMBOL]: undefined },
+      { name: "Jane Smith", [GROUP_ID_SYMBOL]: undefined },
+    ]
 
     const { result } = renderHook(
       () =>
@@ -298,19 +301,21 @@ describe("Collections", () => {
         FiltersDefinition,
         SortingsDefinition,
         ItemActionsDefinition<Item>,
-        NavigationFiltersDefinition
+        NavigationFiltersDefinition,
+        GroupingDefinition<Item>
       >
     }) => {
       const { data } = useData<
         Item,
         FiltersDefinition,
         SortingsDefinition,
-        NavigationFiltersDefinition
+        NavigationFiltersDefinition,
+        GroupingDefinition<Item>
       >(source)
 
       return (
         <div data-testid="custom-visualization">
-          {data?.map((item) => (
+          {data?.records.map((item) => (
             <div key={item.email} className="custom-item">
               <h3>{item.name}</h3>
               <p>
@@ -416,16 +421,21 @@ describe("Collections", () => {
           FiltersDefinition,
           SortingsDefinition,
           ItemActionsDefinition<Person>,
-          NavigationFiltersDefinition
+          NavigationFiltersDefinition,
+          GroupingDefinition<Person>
         >({
           dataAdapter: {
             fetchData: async ({ sortings }) => {
               const sorted = [...mockData]
 
-              if (sortings && sortings.field === "name") {
-                sorted.sort((a, b) => {
-                  const direction = sortings.order === "asc" ? 1 : -1
-                  return a.name.localeCompare(b.name) * direction
+              if (sortings) {
+                sortings.forEach(({ field, order }) => {
+                  if (field === "name") {
+                    sorted.sort((a, b) => {
+                      const direction = order === "asc" ? 1 : -1
+                      return a.name.localeCompare(b.name) * direction
+                    })
+                  }
                 })
               }
 
@@ -519,11 +529,17 @@ describe("Collections", () => {
     const fetchDataMock = vi.fn().mockImplementation(({ sortings }) => {
       const sorted = [...mockData]
 
-      if (sortings && sortings.field === "name") {
-        sorted.sort((a, b) => {
-          const direction = sortings.order === "asc" ? 1 : -1
-          return a.name.localeCompare(b.name) * direction
-        })
+      if (sortings) {
+        const nameSorting = sortings.find(
+          (sorting: SortingsState<SortingsDefinition>) =>
+            sorting?.field === "name"
+        )
+        if (nameSorting) {
+          sorted.sort((a, b) => {
+            const direction = nameSorting.order === "asc" ? 1 : -1
+            return a.name.localeCompare(b.name) * direction
+          })
+        }
       }
 
       return sorted
@@ -536,7 +552,8 @@ describe("Collections", () => {
           FiltersDefinition,
           SortingsDefinition,
           ItemActionsDefinition<Person>,
-          NavigationFiltersDefinition
+          NavigationFiltersDefinition,
+          GroupingDefinition<Person>
         >({
           dataAdapter: {
             fetchData: fetchDataMock,
@@ -583,10 +600,12 @@ describe("Collections", () => {
     // Verify the fetchData function was called with the correct default sorting
     expect(fetchDataMock).toHaveBeenCalledWith(
       expect.objectContaining({
-        sortings: {
-          field: "name",
-          order: "desc",
-        },
+        sortings: [
+          {
+            field: "name",
+            order: "desc",
+          },
+        ],
       })
     )
 
@@ -622,7 +641,8 @@ describe("Collections", () => {
           FiltersDefinition,
           SortingsDefinition,
           ItemActionsDefinition<Person>,
-          NavigationFiltersDefinition
+          NavigationFiltersDefinition,
+          GroupingDefinition<Person>
         >({
           dataAdapter: {
             fetchData: async () => [
@@ -665,24 +685,27 @@ describe("Collections", () => {
           FiltersDefinition,
           SortingsDefinition,
           ItemActionsDefinition<Person>,
-          NavigationFiltersDefinition
+          NavigationFiltersDefinition,
+          GroupingDefinition<Person>
         >({
           dataAdapter: {
             fetchData: async ({ sortings }) => {
               const sorted = [...mockData]
 
               if (sortings) {
-                if (sortings.field === "name") {
-                  sorted.sort((a, b) => {
-                    const direction = sortings.order === "asc" ? 1 : -1
-                    return a.name.localeCompare(b.name) * direction
-                  })
-                } else if (sortings.field === "email") {
-                  sorted.sort((a, b) => {
-                    const direction = sortings.order === "asc" ? 1 : -1
-                    return a.email.localeCompare(b.email) * direction
-                  })
-                }
+                sortings.forEach(({ field, order }) => {
+                  if (field === "name") {
+                    sorted.sort((a, b) => {
+                      const direction = order === "asc" ? 1 : -1
+                      return a.name.localeCompare(b.name) * direction
+                    })
+                  } else if (field === "email") {
+                    sorted.sort((a, b) => {
+                      const direction = order === "asc" ? 1 : -1
+                      return a.email.localeCompare(b.email) * direction
+                    })
+                  }
+                })
               }
 
               return sorted
@@ -883,9 +906,19 @@ describe("Collections", () => {
       email: string
     }
 
-    const mockData = [
-      { id: 1, name: "John Doe", email: "john@example.com" },
-      { id: 2, name: "Jane Smith", email: "jane@example.com" },
+    const mockData: WithGroupId<Person>[] = [
+      {
+        id: 1,
+        name: "John Doe",
+        email: "john@example.com",
+        [GROUP_ID_SYMBOL]: undefined,
+      },
+      {
+        id: 2,
+        name: "Jane Smith",
+        email: "jane@example.com",
+        [GROUP_ID_SYMBOL]: undefined,
+      },
     ]
 
     // Create mock handlers for our actions
@@ -900,7 +933,8 @@ describe("Collections", () => {
           FiltersDefinition,
           SortingsDefinition,
           ItemActionsDefinition<Person>,
-          NavigationFiltersDefinition
+          NavigationFiltersDefinition,
+          GroupingDefinition<Person>
         >({
           dataAdapter: {
             fetchData: async () => mockData,
@@ -975,7 +1009,12 @@ describe("Collections", () => {
 
     // Verify our handler was called with the correct item
     expect(handleEdit).toHaveBeenCalledTimes(1)
-    expect(handleEdit).toHaveBeenCalledWith(mockData[0])
+    expect(handleEdit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...mockData[0],
+        [GROUP_ID_SYMBOL]: undefined,
+      })
+    )
   })
 
   test("integrates search functionality", async () => {
@@ -1014,7 +1053,8 @@ describe("Collections", () => {
           FiltersDefinition,
           SortingsDefinition,
           ItemActionsDefinition<Person>,
-          NavigationFiltersDefinition
+          NavigationFiltersDefinition,
+          GroupingDefinition<Person>
         >({
           dataAdapter: {
             fetchData: async ({ search }) => {
@@ -1104,7 +1144,8 @@ describe("Collections", () => {
           FiltersDefinition,
           SortingsDefinition,
           ItemActionsDefinition<Person>,
-          NavigationFiltersDefinition
+          NavigationFiltersDefinition,
+          GroupingDefinition<Person>
         >({
           dataAdapter: {
             paginationType: "pages",
diff --git a/packages/react/src/experimental/OneDataCollection/__tests__/item-actions.test.tsx b/packages/react/src/experimental/OneDataCollection/__tests__/item-actions.test.tsx
new file mode 100644
index 0000000000..4e5fe65381
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__tests__/item-actions.test.tsx
@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest"
+import { filterItemActions, type ItemActionsDefinition } from "../item-actions"
+import { type RecordType } from "../types"
+
+describe("filterItemActions", () => {
+  type TestRecord = RecordType & {
+    id: string
+    name: string
+  }
+
+  const mockItem: TestRecord = {
+    id: "1",
+    name: "Test Item",
+  }
+
+  it("should return empty array when actions is undefined", () => {
+    const result = filterItemActions(undefined, mockItem)
+    expect(result).toEqual([])
+  })
+
+  it("should return empty array when actions returns undefined", () => {
+    const actions: ItemActionsDefinition<TestRecord> = () => undefined
+    const result = filterItemActions(actions, mockItem)
+    expect(result).toEqual([])
+  })
+
+  it("should keep enabled actions", () => {
+    const actions: ItemActionsDefinition<TestRecord> = () => [
+      {
+        label: "Enabled Action",
+        onClick: () => {},
+        enabled: true,
+      },
+    ]
+    const result = filterItemActions(actions, mockItem)
+    expect(result).toHaveLength(1)
+    expect(result[0].label).toBe("Enabled Action")
+  })
+
+  it("should keep actions with undefined enabled property", () => {
+    const actions: ItemActionsDefinition<TestRecord> = () => [
+      {
+        label: "Undefined Enabled Action",
+        onClick: () => {},
+      },
+    ]
+    const result = filterItemActions(actions, mockItem)
+    expect(result).toHaveLength(1)
+    expect(result[0].label).toBe("Undefined Enabled Action")
+  })
+
+  it("should keep separator actions regardless of enabled property", () => {
+    const actions: ItemActionsDefinition<TestRecord> = () => [
+      {
+        type: "separator",
+      },
+    ]
+    const result = filterItemActions(actions, mockItem)
+    expect(result).toHaveLength(1)
+    expect(result[0].type).toBe("separator")
+  })
+
+  it("should filter out disabled actions", () => {
+    const actions: ItemActionsDefinition<TestRecord> = () => [
+      {
+        label: "Enabled Action",
+        onClick: () => {},
+        enabled: true,
+      },
+      {
+        label: "Disabled Action",
+        onClick: () => {},
+        enabled: false,
+      },
+    ]
+    const result = filterItemActions(actions, mockItem)
+    expect(result).toHaveLength(1)
+    expect(result[0].label).toBe("Enabled Action")
+  })
+
+  it("should handle mixed action types correctly", () => {
+    const actions: ItemActionsDefinition<TestRecord> = () => [
+      {
+        label: "Enabled Action",
+        onClick: () => {},
+        enabled: true,
+      },
+      {
+        type: "separator",
+      },
+      {
+        label: "Disabled Action",
+        onClick: () => {},
+        enabled: false,
+      },
+      {
+        label: "Undefined Enabled Action",
+        onClick: () => {},
+      },
+    ]
+    const result = filterItemActions(actions, mockItem)
+    expect(result).toHaveLength(3)
+    expect(result[0].label).toBe("Enabled Action")
+    expect(result[1].type).toBe("separator")
+    expect(result[2].label).toBe("Undefined Enabled Action")
+  })
+})
diff --git a/packages/react/src/experimental/OneDataCollection/__tests__/useSelectable.test.tsx b/packages/react/src/experimental/OneDataCollection/__tests__/useSelectable.test.tsx
new file mode 100644
index 0000000000..2cfbb11052
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/__tests__/useSelectable.test.tsx
@@ -0,0 +1,233 @@
+import { act, renderHook, waitFor } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { DataSource, PaginationInfo } from "../types"
+import { Data, GROUP_ID_SYMBOL } from "../useData"
+import { useSelectable } from "../useSelectable"
+
+type TestRecord = {
+  id: number
+  name: string
+  group: string
+}
+
+describe("useSelectable", () => {
+  const mockFlatData = Array.from({ length: 100 }, (_, index) => ({
+    id: index,
+    name: `Item ${index}`,
+    group: index % 3 === 0 ? "group1" : index % 3 === 1 ? "group2" : "group3",
+  }))
+
+  const mockSelectable = (item: TestRecord) => item.id
+
+  const mockSource = {
+    selectable: mockSelectable,
+    dataAdapter: {} as never,
+    currentFilters: {} as never,
+    setCurrentFilters: () => {},
+    currentSortings: {} as never,
+    setCurrentSortings: () => {},
+    currentSearch: "",
+    setCurrentSearch: () => {},
+    debouncedCurrentSearch: "",
+    currentNavigationFilters: {} as never,
+    setCurrentNavigationFilters: () => {},
+    currentGrouping: {} as never,
+    setCurrentGrouping: () => {},
+    isLoading: false,
+    setIsLoading: () => {},
+  } as unknown as DataSource<TestRecord, never, never, never, never, never>
+
+  describe("Flat data", () => {
+    const mockData: Data<TestRecord> = {
+      type: "flat",
+      records: mockFlatData.map((item) => ({
+        ...item,
+        [GROUP_ID_SYMBOL]: undefined,
+      })),
+    }
+
+    it("should handle item selection", async () => {
+      const { result } = renderHook(() =>
+        useSelectable(mockData, null, mockSource)
+      )
+
+      act(() => {
+        result.current.handleSelectItemChange(mockData.records[0], true)
+      })
+
+      await waitFor(() => {
+        expect(result.current.selectedItems.size).toBe(1)
+        expect(result.current.selectedItems.get(0)).toEqual(mockData.records[0])
+      })
+    })
+  })
+
+  describe("Grouped data", () => {
+    const mockGroupedData: Data<TestRecord> = {
+      type: "grouped",
+      records: [],
+      groups: [
+        {
+          key: "group1",
+          label: "Group 1",
+          records: [
+            {
+              id: 1,
+              name: "Item 1",
+              group: "group1",
+              [GROUP_ID_SYMBOL]: "group1",
+            },
+            {
+              id: 2,
+              name: "Item 2",
+              group: "group1",
+              [GROUP_ID_SYMBOL]: "group1",
+            },
+          ],
+          itemCount: Promise.resolve(2),
+        },
+        {
+          key: "group2",
+          label: "Group 2",
+          records: [
+            {
+              id: 3,
+              name: "Item 3",
+              group: "group2",
+              [GROUP_ID_SYMBOL]: "group2",
+            },
+            {
+              id: 4,
+              name: "Item 4",
+              group: "group2",
+              [GROUP_ID_SYMBOL]: "group2",
+            },
+          ],
+          itemCount: Promise.resolve(2),
+        },
+      ],
+    }
+
+    it("should handle group selection", async () => {
+      const { result } = renderHook(() =>
+        useSelectable(mockGroupedData, null, mockSource)
+      )
+
+      act(() => {
+        result.current.handleSelectGroupChange(mockGroupedData.groups[0], true)
+      })
+
+      await waitFor(() => {
+        expect(result.current.selectedGroups.size).toBe(1)
+        expect(result.current.selectedItems.size).toBe(2)
+        expect(result.current.groupAllSelectedStatus["group1"].checked).toBe(
+          true
+        )
+      })
+    })
+
+    it("should handle select all in grouped data", async () => {
+      const { result } = renderHook(() =>
+        useSelectable(mockGroupedData, null, mockSource)
+      )
+
+      act(() => {
+        result.current.handleSelectAll(true)
+      })
+
+      await waitFor(() => {
+        expect(result.current.selectedGroups.size).toBe(2)
+        expect(result.current.selectedItems.size).toBe(4)
+        expect(result.current.isAllSelected).toBe(true)
+      })
+    })
+
+    it("should handle pagination in grouped data and maintain selection state", async () => {
+      const initialGroupedData: Data<TestRecord> = {
+        type: "grouped",
+        records: [],
+        groups: [
+          {
+            key: "group1",
+            label: "Group 1",
+            records: [
+              {
+                id: 1,
+                name: "Item 1",
+                group: "group1",
+                [GROUP_ID_SYMBOL]: "group1",
+              },
+              {
+                id: 2,
+                name: "Item 2",
+                group: "group1",
+                [GROUP_ID_SYMBOL]: "group1",
+              },
+            ],
+            itemCount: Promise.resolve(3),
+          },
+        ],
+      }
+
+      const paginationInfo: PaginationInfo = {
+        total: 3,
+        currentPage: 1,
+        perPage: 2,
+        pagesCount: 2,
+      }
+
+      const { result, rerender } = renderHook(
+        ({ data }) => useSelectable(data, paginationInfo, mockSource),
+        { initialProps: { data: initialGroupedData } }
+      )
+
+      // Select all items in first group
+      act(() => {
+        result.current.handleSelectGroupChange(
+          initialGroupedData.groups[0],
+          true
+        )
+      })
+
+      await waitFor(() => {
+        expect(result.current.selectedGroups.size).toBe(1)
+        expect(result.current.selectedItems.size).toBe(2)
+        expect(result.current.groupAllSelectedStatus["group1"].checked).toBe(
+          true
+        )
+      })
+
+      // Simulate page change with new data for the same group
+      const newGroupedData: Data<TestRecord> = {
+        type: "grouped",
+        records: [],
+        groups: [
+          {
+            key: "group1",
+            label: "Group 1",
+            records: [
+              {
+                id: 3,
+                name: "Item 3",
+                group: "group1",
+                [GROUP_ID_SYMBOL]: "group1",
+              },
+            ],
+            itemCount: Promise.resolve(3),
+          },
+        ],
+      }
+
+      rerender({ data: newGroupedData })
+
+      // New items should be automatically selected
+      await waitFor(() => {
+        expect(result.current.selectedGroups.size).toBe(1)
+        expect(result.current.selectedItems.size).toBe(3)
+        expect(result.current.groupAllSelectedStatus["group1"].checked).toBe(
+          true
+        )
+      })
+    })
+  })
+})
diff --git a/packages/react/src/experimental/OneDataCollection/components/GroupHeader/GroupHeader.tsx b/packages/react/src/experimental/OneDataCollection/components/GroupHeader/GroupHeader.tsx
new file mode 100644
index 0000000000..149bba1e32
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/components/GroupHeader/GroupHeader.tsx
@@ -0,0 +1,69 @@
+import { Await } from "@/components/Utilities/Await"
+import { Checkbox } from "@/experimental/Forms/Fields/Checkbox"
+import { Counter } from "@/experimental/Information/Counter"
+import { cn } from "@/lib/utils"
+import { ChevronToggle } from "@/ui/ChevronToggle/ChevronToggle"
+import { Skeleton } from "@/ui/skeleton"
+import { useEffect, useState } from "react"
+
+type GroupHeaderProps = {
+  label: string | Promise<string>
+  itemCount: number | Promise<number | undefined> | undefined
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  showOpenChange?: boolean
+  selectable?: boolean
+  select?: true | false | "indeterminate"
+  onSelectChange?: (selected: boolean) => void
+  className?: string
+}
+
+export const GroupHeader = ({
+  label,
+  itemCount,
+  open,
+  onOpenChange,
+  showOpenChange,
+  selectable,
+  select,
+  onSelectChange,
+  className,
+}: GroupHeaderProps) => {
+  const [isOpen, setIsOpen] = useState(open)
+
+  useEffect(() => {
+    setIsOpen(open)
+  }, [open])
+
+  const handleOpenChange = () => {
+    setIsOpen(!isOpen)
+    onOpenChange?.(!isOpen)
+  }
+
+  return (
+    <div
+      className={cn("flex items-center gap-2", className)}
+      onClick={handleOpenChange}
+    >
+      {selectable && (
+        <Checkbox
+          checked={!!select}
+          indeterminate={select === "indeterminate"}
+          title="Select all"
+          hideLabel
+          onCheckedChange={(checked) => onSelectChange?.(checked)}
+          stopPropagation
+        />
+      )}
+      <Await resolve={label} fallback={<Skeleton className="h-4 w-24" />}>
+        {(label) => (
+          <h6 className="text-sm font-semibold text-f1-foreground">{label}</h6>
+        )}
+      </Await>
+      <Await resolve={itemCount} fallback={<Skeleton className="h-4 w-5" />}>
+        {(count) => count !== undefined && <Counter value={count} />}
+      </Await>
+      {showOpenChange && <ChevronToggle open={isOpen} />}
+    </div>
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/components/GroupHeader/__tests__/GroupHeader.test.tsx b/packages/react/src/experimental/OneDataCollection/components/GroupHeader/__tests__/GroupHeader.test.tsx
new file mode 100644
index 0000000000..df662e699c
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/components/GroupHeader/__tests__/GroupHeader.test.tsx
@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { GroupHeader } from "../GroupHeader"
+
+describe("GroupHeader", () => {
+  it("renders with basic props", () => {
+    render(<GroupHeader label="Test Group" itemCount={5} />)
+
+    expect(screen.getByText("Test Group")).toBeInTheDocument()
+    expect(screen.getByText("5")).toBeInTheDocument()
+  })
+
+  it("renders with async label and itemCount", async () => {
+    const labelPromise = Promise.resolve("Async Group")
+    const countPromise = Promise.resolve(10)
+
+    render(<GroupHeader label={labelPromise} itemCount={countPromise} />)
+
+    // Initially shows skeletons
+    const skeletons = screen.getAllByTestId("skeleton")
+    expect(skeletons).toHaveLength(2)
+
+    // Wait for promises to resolve and verify content
+    await vi.waitFor(() => {
+      expect(screen.queryAllByTestId("skeleton")).toHaveLength(0)
+    })
+    expect(screen.getByText("Async Group")).toBeInTheDocument()
+    expect(screen.getByText("10")).toBeInTheDocument()
+  })
+
+  it("handles open/close state", () => {
+    const onOpenChange = vi.fn()
+    render(
+      <GroupHeader
+        label="Test Group"
+        itemCount={5}
+        open={false}
+        onOpenChange={onOpenChange}
+        showOpenChange
+      />
+    )
+
+    const header = screen.getByText("Test Group").closest("div")
+    fireEvent.click(header!)
+
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+  })
+
+  it("handles selection state", () => {
+    const onSelectChange = vi.fn()
+    render(
+      <GroupHeader
+        label="Test Group"
+        itemCount={5}
+        selectable
+        select={false}
+        onSelectChange={onSelectChange}
+      />
+    )
+
+    const checkbox = screen.getByRole("checkbox")
+    fireEvent.click(checkbox)
+
+    expect(onSelectChange).toHaveBeenCalledWith(true)
+  })
+
+  it("applies custom className", () => {
+    render(
+      <GroupHeader label="Test Group" itemCount={5} className="custom-class" />
+    )
+
+    const header = screen.getByText("Test Group").closest("div")
+    expect(header).toHaveClass("custom-class")
+  })
+
+  it("doesn't show counter when itemCount is undefined", async () => {
+    const countPromise = Promise.resolve(undefined)
+    render(<GroupHeader label="Test Group" itemCount={countPromise} />)
+
+    // Wait for promise to resolve
+    await vi.waitFor(() => {
+      expect(screen.queryByRole("status")).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/packages/react/src/experimental/OneDataCollection/components/GroupHeader/index.tsx b/packages/react/src/experimental/OneDataCollection/components/GroupHeader/index.tsx
new file mode 100644
index 0000000000..27e14bcb3d
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/components/GroupHeader/index.tsx
@@ -0,0 +1 @@
+export * from "./GroupHeader"
diff --git a/packages/react/src/experimental/OneDataCollection/grouping.ts b/packages/react/src/experimental/OneDataCollection/grouping.ts
new file mode 100644
index 0000000000..67a4f6b683
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/grouping.ts
@@ -0,0 +1,52 @@
+import { FiltersDefinition, FiltersState } from "./Filters/types"
+import { SortOrder } from "./sortings"
+import { RecordType } from "./types"
+
+/**
+ * Defines the structure and configuration of a grouping options for a data source.
+ * @template RecordType - The type of records in the collection
+ */
+export type GroupingDefinition<R extends RecordType> = {
+  /** Whether grouping is mandatory or the user can chose not to group */
+  mandatory?: boolean
+  groupBy: {
+    [K in keyof R]?: {
+      /** The label for the grouping */
+      name: string
+      /** The item count for the grouping */
+      label: (
+        groupId: R[K],
+        filters: FiltersState<FiltersDefinition>
+      ) => string | Promise<string>
+      itemCount?: (
+        groupId: R[K],
+        filters: FiltersState<FiltersDefinition>
+      ) => number | undefined | Promise<number | undefined>
+    }
+  }
+} & (
+  | {
+      /** Whether the grouping is non collapsible */
+      collapsible: true
+      /** The initial open groups */
+      defaultOpenGroups?: boolean | string[]
+    }
+  | {
+      collapsible?: false
+      defaultOpenGroups?: never
+    }
+)
+
+/**
+ * The selected the grouping state
+ * @template Grouping - The grouping definition
+ */
+export type GroupingState<
+  R extends RecordType,
+  Grouping extends GroupingDefinition<R>,
+> =
+  | {
+      field: keyof Grouping["groupBy"]
+      order: SortOrder
+    }
+  | undefined
diff --git a/packages/react/src/experimental/OneDataCollection/index.tsx b/packages/react/src/experimental/OneDataCollection/index.tsx
index 1a134fd8f1..bad3a101a5 100644
--- a/packages/react/src/experimental/OneDataCollection/index.tsx
+++ b/packages/react/src/experimental/OneDataCollection/index.tsx
@@ -21,12 +21,15 @@ import {
   NavigationFiltersState,
 } from "./navigationFilters/types"
 import { Search } from "./search"
+import { Settings } from "./Settings"
 import { SortingsDefinition, SortingsState } from "./sortings"
 import type {
   BulkActionDefinition,
   CollectionSearchOptions,
   DataSource,
   DataSourceDefinition,
+  GroupingDefinition,
+  GroupingState,
   OnBulkActionCallback,
   OnLoadDataCallback,
   OnSelectItemsCallback,
@@ -34,9 +37,9 @@ import type {
 } from "./types"
 import { DataError } from "./useData"
 import { CustomEmptyStates, useEmptyState } from "./useEmptyState"
-import type { Visualization } from "./visualizations"
-import { VisualizationRenderer, VisualizationSelector } from "./visualizations"
 
+import type { Visualization } from "./visualizations/collection"
+import { VisualizationRenderer } from "./visualizations/collection"
 /**
  * A hook that manages data source state and filtering capabilities for a collection.
  * It creates and returns a reusable data source that can be shared across different
@@ -77,21 +80,25 @@ export const useDataSource = <
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 >(
   {
     currentFilters: initialCurrentFilters = {},
+    currentGrouping: initialCurrentGrouping,
     filters,
     navigationFilters,
     search,
     defaultSorting,
     dataAdapter,
+    grouping,
     ...rest
   }: DataSourceDefinition<
     Record,
     FiltersSchema,
     Sortings,
     ItemActions,
-    NavigationFilters
+    NavigationFilters,
+    Grouping
   >,
   deps: ReadonlyArray<unknown> = []
 ): DataSource<
@@ -99,7 +106,8 @@ export const useDataSource = <
   FiltersSchema,
   Sortings,
   ItemActions,
-  NavigationFilters
+  NavigationFilters,
+  Grouping
 > => {
   const [currentFilters, setCurrentFilters] = useState<
     FiltersState<FiltersSchema>
@@ -153,6 +161,24 @@ export const useDataSource = <
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const memoizedDataAdapter = useMemo(() => dataAdapter, deps)
 
+  const defaultGrouping = grouping?.mandatory
+    ? {
+        field: Object.keys(
+          grouping.groupBy
+        )[0] as keyof typeof grouping.groupBy,
+        order: "asc" as const,
+      }
+    : undefined
+
+  const [currentGrouping, setCurrentGrouping] = useState<
+    GroupingState<Record, Grouping>
+  >(initialCurrentGrouping ?? defaultGrouping)
+
+  // For mandatory grouping, ensure we have a valid grouping state
+  if (grouping?.mandatory && !currentGrouping?.field) {
+    throw new Error("Grouping is mandatory but no grouping state is set")
+  }
+
   return {
     filters: memoizedFilters,
     currentFilters,
@@ -169,6 +195,9 @@ export const useDataSource = <
     navigationFilters,
     currentNavigationFilters,
     setCurrentNavigationFilters,
+    setCurrentGrouping,
+    currentGrouping,
+    grouping,
     ...rest,
   }
 }
@@ -203,6 +232,7 @@ export const OneDataCollection = <
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 >({
   source,
   visualizations,
@@ -210,13 +240,28 @@ export const OneDataCollection = <
   onBulkAction,
   emptyStates,
 }: {
-  source: DataSource<Record, Filters, Sortings, ItemActions, NavigationFilters>
+  source: DataSource<
+    Record,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
   visualizations: ReadonlyArray<
-    Visualization<Record, Filters, Sortings, ItemActions, NavigationFilters>
+    Visualization<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
   >
   onSelectItems?: OnSelectItemsCallback<Record, Filters>
   onBulkAction?: OnBulkActionCallback<Record, Filters>
   emptyStates?: CustomEmptyStates
+  onTotalItemsChange?: (totalItems: number) => void
 }): JSX.Element => {
   const {
     // Filters
@@ -242,6 +287,9 @@ export const OneDataCollection = <
       totalItems === undefined
         ? `${totalItems} ${i18n.collections.itemsCount}`
         : null,
+    currentGrouping,
+    setCurrentGrouping,
+    grouping,
   } = source
   const [currentVisualization, setCurrentVisualization] = useState(0)
 
@@ -479,13 +527,14 @@ export const OneDataCollection = <
               {search && (
                 <Search onChange={setCurrentSearch} value={currentSearch} />
               )}
-              {visualizations && visualizations.length > 1 && (
-                <VisualizationSelector
-                  visualizations={visualizations}
-                  currentVisualization={currentVisualization}
-                  onVisualizationChange={setCurrentVisualization}
-                />
-              )}
+              <Settings
+                visualizations={visualizations}
+                currentVisualization={currentVisualization}
+                onVisualizationChange={setCurrentVisualization}
+                grouping={grouping}
+                currentGrouping={currentGrouping}
+                onGroupingChange={setCurrentGrouping}
+              ></Settings>
               {hasCollectionsActions && (
                 <>
                   {elementsRightActions && (
diff --git a/packages/react/src/experimental/OneDataCollection/item-actions.tsx b/packages/react/src/experimental/OneDataCollection/item-actions.tsx
index 499ca62ffe..4ede6b323b 100644
--- a/packages/react/src/experimental/OneDataCollection/item-actions.tsx
+++ b/packages/react/src/experimental/OneDataCollection/item-actions.tsx
@@ -5,16 +5,17 @@ import {
 
 import { RecordType } from "./types"
 
-export type ItemActionsDefinition<T extends RecordType> = (item: T) =>
-  | Array<
-      | DropdownItemSeparator
-      | (Omit<DropdownItemObject, "type" | "onClick"> & {
-          onClick: () => void
-          enabled?: boolean
-          type?: "primary" | "secondary" | "other"
-        })
-    >
-  | undefined
+export type ActionDefinition =
+  | DropdownItemSeparator
+  | (Omit<DropdownItemObject, "type" | "onClick"> & {
+      onClick: () => void
+      enabled?: boolean
+      type?: "primary" | "secondary" | "other"
+    })
+
+export type ItemActionsDefinition<T extends RecordType> = (
+  item: T
+) => ActionDefinition[] | undefined
 
 /**
  * Filters the actions based on the enabled property
@@ -23,10 +24,10 @@ export type ItemActionsDefinition<T extends RecordType> = (item: T) =>
  * @returns An array of filtered actions
  */
 export const filterItemActions = <T extends RecordType>(
-  actions: ItemActionsDefinition<T>,
+  actions: ItemActionsDefinition<T> | undefined,
   item: T
 ) =>
-  (actions(item) || []).filter(
+  ((actions && actions(item)) || []).filter(
     (action) =>
       action.type === "separator" ||
       action.enabled === undefined ||
diff --git a/packages/react/src/experimental/OneDataCollection/property-render.ts b/packages/react/src/experimental/OneDataCollection/property-render.ts
index 2684493b0e..cf98aa344f 100644
--- a/packages/react/src/experimental/OneDataCollection/property-render.ts
+++ b/packages/react/src/experimental/OneDataCollection/property-render.ts
@@ -1,5 +1,6 @@
 import { ReactNode } from "react"
-import { VisualizationType } from "./visualizations"
+import { RecordType } from "./types"
+import { VisualizationType } from "./visualizations/collection/types"
 import {
   PropertyRendererMetadata,
   propertyRenderers,
@@ -53,9 +54,9 @@ const renderIsRendererDefinition = (
 ): renderDef is RendererDefinition => {
   return renderDef !== undefined && typeof renderDef === "object"
 }
-export const renderProperty = <RecordType>(
-  item: RecordType,
-  property: PropertyDefinition<RecordType>,
+export const renderProperty = <R extends RecordType>(
+  item: R,
+  property: PropertyDefinition<R>,
   visualization: VisualizationType
 ): ReactNode => {
   const renderDefinition = property.render(item)
@@ -70,7 +71,7 @@ export const renderProperty = <RecordType>(
   // Type assertion to ensure the renderer function is typed correctly as typescript can't infer the type correctly
   const renderer = propertyRenderers[type] as (
     arg: Parameters<(typeof propertyRenderers)[typeof type]>[0],
-    meta: PropertyRendererMetadata<RecordType>
+    meta: PropertyRendererMetadata<R>
   ) => ReactNode
 
   if (!renderer) {
diff --git a/packages/react/src/experimental/OneDataCollection/sortings.ts b/packages/react/src/experimental/OneDataCollection/sortings.ts
index a4403d3d6f..18a53b1729 100644
--- a/packages/react/src/experimental/OneDataCollection/sortings.ts
+++ b/packages/react/src/experimental/OneDataCollection/sortings.ts
@@ -17,3 +17,11 @@ export type SortingsState<Definition extends SortingsDefinition> = {
  */
 export type SortingKey<Definition extends SortingsDefinition> =
   Definition extends readonly string[] ? Definition[number] : keyof Definition
+
+/**
+ * Type helper to create a multiple sortings state (the main sorting and the grouping sorting)
+ */
+export type SortingsStateMultiple = {
+  field: string
+  order: "asc" | "desc"
+}[]
diff --git a/packages/react/src/experimental/OneDataCollection/types.ts b/packages/react/src/experimental/OneDataCollection/types.ts
index 169398bb7f..62e5198012 100644
--- a/packages/react/src/experimental/OneDataCollection/types.ts
+++ b/packages/react/src/experimental/OneDataCollection/types.ts
@@ -3,13 +3,20 @@ import { Observable } from "zen-observable-ts"
 import { PromiseState } from "../../lib/promise-to-observable"
 import { PrimaryActionsDefinition, SecondaryActionsDefinition } from "./actions"
 import type { FiltersDefinition, FiltersState } from "./Filters/types"
+import { GroupingDefinition, GroupingState } from "./grouping"
 import { ItemActionsDefinition } from "./item-actions"
 import {
   NavigationFiltersDefinition,
   NavigationFiltersState,
 } from "./navigationFilters/types"
-import { SortingsDefinition, SortingsState } from "./sortings"
+import {
+  SortingsDefinition,
+  SortingsState,
+  SortingsStateMultiple,
+} from "./sortings"
 import { DataError } from "./useData"
+export * from "./grouping"
+export * from "./sortings"
 
 /**
  * Defines the structure and configuration of a data source for a collection.
@@ -29,6 +36,7 @@ export type DataSourceDefinition<
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 > = {
   /** Available filter configurations */
   filters?: Filters
@@ -56,7 +64,7 @@ export type DataSourceDefinition<
   sortings?: Sortings
   defaultSorting?: SortingsState<Sortings>
   /** Data adapter responsible for fetching and managing data */
-  dataAdapter: DataAdapter<Record, Filters, Sortings, NavigationFilters>
+  dataAdapter: DataAdapter<Record, Filters, NavigationFilters>
   /** Selectable items value under the checkbox column (undefined if not selectable) */
   selectable?: (item: Record) => string | number | undefined
   /** Bulk actions that can be performed on the collection */
@@ -67,6 +75,9 @@ export type DataSourceDefinition<
     secondary?: BulkActionDefinition[]
   }
   totalItemSummary?: (totalItems: number) => string
+  /** Grouping configuration */
+  grouping?: Grouping
+  currentGrouping?: GroupingState<Record, Grouping>
 }
 
 export type CollectionSearchOptions = {
@@ -91,9 +102,20 @@ export type PresetsDefinition<Filters extends FiltersDefinition> = Array<{
 
 /**
  * Base response type for collection data
- * @template Record - The type of records in the collection
+ * @template R - The type of records in the collection
  */
-export type BaseResponse<Record> = Record[]
+export type BaseResponse<R extends RecordType, P = unknown> = {
+  records: R[]
+  properties?: P
+}
+
+/**
+ * Simple result type for non-paginated data
+ * @template R - The type of records in the collection
+ */
+export type SimpleResponse<R extends RecordType, P = unknown> =
+  | R[]
+  | BaseResponse<R, P>
 
 /**
  * Information about the current pagination state
@@ -111,12 +133,21 @@ export type PaginationInfo = {
 
 /**
  * Response type for paginated collection data
- * @template Record - The type of records in the collection
+ * @template R - The type of records in the collection
  */
-export type PaginatedResponse<Record> = {
-  /** The records for the current page */
-  records: Record[]
-} & PaginationInfo
+export type PaginatedResponse<R extends RecordType, P = unknown> = BaseResponse<
+  R,
+  P
+> &
+  PaginationInfo
+
+/**
+ * Sortings
+ */
+export type SortingsStateMultiple = {
+  field: string
+  order: "asc" | "desc"
+}[]
 
 /**
  * Base options for data fetching
@@ -124,12 +155,11 @@ export type PaginatedResponse<Record> = {
  */
 export type BaseFetchOptions<
   Filters extends FiltersDefinition,
-  Sortings extends SortingsDefinition,
   NavigationFilters extends NavigationFiltersDefinition,
 > = {
   /** Currently applied filters */
   filters: FiltersState<Filters>
-  sortings: SortingsState<Sortings>
+  sortings: SortingsStateMultiple
   search?: string
   navigationFilters?: NavigationFiltersState<NavigationFilters>
 }
@@ -140,22 +170,20 @@ export type BaseFetchOptions<
  */
 export type PaginatedFetchOptions<
   Filters extends FiltersDefinition,
-  Sortings extends SortingsDefinition,
   NavigationFilters extends NavigationFiltersDefinition,
-> = BaseFetchOptions<Filters, Sortings, NavigationFilters> & {
+> = BaseFetchOptions<Filters, NavigationFilters> & {
   /** Pagination configuration */
   pagination: { currentPage: number; perPage: number }
 }
 
 /**
  * Base data adapter configuration for non-paginated collections
- * @template Record - The type of records in the collection
+ * @template R - The type of records in the collection
  * @template Filters - The available filter configurations
  */
 export type BaseDataAdapter<
-  Record extends RecordType,
+  R extends RecordType,
   Filters extends FiltersDefinition,
-  Sortings extends SortingsDefinition,
   NavigationFilters extends NavigationFiltersDefinition,
 > = {
   /** Indicates this adapter doesn't use pagination */
@@ -166,22 +194,21 @@ export type BaseDataAdapter<
    * @returns Array of records, promise of records, or observable of records
    */
   fetchData: (
-    options: BaseFetchOptions<Filters, Sortings, NavigationFilters>
+    options: BaseFetchOptions<Filters, NavigationFilters>
   ) =>
-    | BaseResponse<Record>
-    | Promise<BaseResponse<Record>>
-    | Observable<PromiseState<BaseResponse<Record>>>
+    | SimpleResponse<R>
+    | Promise<SimpleResponse<R>>
+    | Observable<PromiseState<SimpleResponse<R>>>
 }
 
 /**
  * Paginated data adapter configuration
- * @template Record - The type of records in the collection
+ * @template R - The type of records in the collection
  * @template Filters - The available filter configurations
  */
 export type PaginatedDataAdapter<
-  Record extends RecordType,
+  R extends RecordType,
   Filters extends FiltersDefinition,
-  Sortings extends SortingsDefinition,
   NavigationFilters extends NavigationFiltersDefinition,
 > = {
   /** Indicates this adapter uses page-based pagination */
@@ -194,26 +221,25 @@ export type PaginatedDataAdapter<
    * @returns Paginated response with records and pagination info
    */
   fetchData: (
-    options: PaginatedFetchOptions<Filters, Sortings, NavigationFilters>
+    options: PaginatedFetchOptions<Filters, NavigationFilters>
   ) =>
-    | PaginatedResponse<Record>
-    | Promise<PaginatedResponse<Record>>
-    | Observable<PromiseState<PaginatedResponse<Record>>>
+    | PaginatedResponse<R>
+    | Promise<PaginatedResponse<R>>
+    | Observable<PromiseState<PaginatedResponse<R>>>
 }
 
 /**
  * Combined type for all possible data adapter configurations
- * @template Record - The type of records in the collection
+ * @template R - The type of records in the collection
  * @template Filters - The available filter configurations
  */
 export type DataAdapter<
-  Record extends RecordType,
+  R extends RecordType,
   Filters extends FiltersDefinition,
-  Sortings extends SortingsDefinition,
   NavigationFilters extends NavigationFiltersDefinition,
 > =
-  | BaseDataAdapter<Record, Filters, Sortings, NavigationFilters>
-  | PaginatedDataAdapter<Record, Filters, Sortings, NavigationFilters>
+  | BaseDataAdapter<R, Filters, NavigationFilters>
+  | PaginatedDataAdapter<R, Filters, NavigationFilters>
 
 /**
  * Represents a collection of selected items.
@@ -249,12 +275,13 @@ export type BulkActionDefinition = {
 export type ExtractPropertyKeys<RecordType> = keyof RecordType
 
 export type OnSelectItemsCallback<
-  Record extends RecordType,
+  R extends RecordType,
   Filters extends FiltersDefinition,
 > = (
   selectedItems: {
     allSelected: boolean | "indeterminate"
-    itemsStatus: ReadonlyArray<{ item: Record; checked: boolean }>
+    itemsStatus: ReadonlyArray<{ item: R; checked: boolean }>
+    groupsStatus: Record<string, boolean>
     filters: FiltersState<Filters>
     selectedCount: number
   },
@@ -296,10 +323,18 @@ export type CollectionProps<
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
   VisualizationOptions extends object,
 > = {
   /** The data source configuration and state */
-  source: DataSource<Record, Filters, Sortings, ItemActions, NavigationFilters>
+  source: DataSource<
+    Record,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
   /** Function to handle item selection */
   onSelectItems: OnSelectItemsCallback<Record, Filters>
   /** Function to handle data load */
@@ -320,12 +355,14 @@ export type DataSource<
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 > = DataSourceDefinition<
   Record,
   Filters,
   Sortings,
   ItemActions,
-  NavigationFilters
+  NavigationFilters,
+  Grouping
 > & {
   /** Current state of applied filters */
   currentFilters: FiltersState<Filters>
@@ -346,7 +383,16 @@ export type DataSource<
   setCurrentNavigationFilters: React.Dispatch<
     React.SetStateAction<NavigationFiltersState<NavigationFilters>>
   >
+  /** Current state of applied grouping */
+  currentGrouping?: Grouping["mandatory"] extends true
+    ? Exclude<GroupingState<Record, Grouping>, undefined>
+    : GroupingState<Record, Grouping>
+  /** Function to update the current grouping state */
+  setCurrentGrouping: React.Dispatch<
+    React.SetStateAction<GroupingState<Record, Grouping>>
+  >
 }
+
 /**
  * Utility type for handling both Promise and Observable return types.
  * @template T - The type of the value being promised or observed
diff --git a/packages/react/src/experimental/OneDataCollection/useData.spec.tsx b/packages/react/src/experimental/OneDataCollection/useData.spec.tsx
index e2daaceb96..f712575963 100644
--- a/packages/react/src/experimental/OneDataCollection/useData.spec.tsx
+++ b/packages/react/src/experimental/OneDataCollection/useData.spec.tsx
@@ -4,6 +4,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest"
 import { Observable } from "zen-observable-ts"
 import type { PromiseState } from "../../lib/promise-to-observable"
 import type { FiltersState } from "./Filters/types"
+import { GroupingDefinition } from "./grouping"
 import { ItemActionsDefinition } from "./item-actions"
 import { SortingsDefinition } from "./sortings"
 import type {
@@ -15,7 +16,7 @@ import type {
   PaginatedResponse,
   RecordType,
 } from "./types"
-import { useData } from "./useData"
+import { GROUP_ID_SYMBOL, useData, WithGroupId } from "./useData"
 interface TestRecord extends RecordType {
   id: number
   name: string
@@ -29,9 +30,9 @@ type TestFilters = {
   }
 }
 
-const mockData: TestRecord[] = [
-  { id: 1, name: "Test 1" },
-  { id: 2, name: "Test 2" },
+const mockData: WithGroupId<TestRecord>[] = [
+  { id: 1, name: "Test 1", [GROUP_ID_SYMBOL]: undefined },
+  { id: 2, name: "Test 2", [GROUP_ID_SYMBOL]: undefined },
 ]
 
 type TestSource = DataSource<
@@ -39,16 +40,13 @@ type TestSource = DataSource<
   TestFilters,
   SortingsDefinition,
   ItemActionsDefinition<TestRecord>,
-  NavigationFiltersDefinition
+  NavigationFiltersDefinition,
+  GroupingDefinition<TestRecord>
 >
 
 const createMockDataSource = (
   fetchData: (
-    options: BaseFetchOptions<
-      TestFilters,
-      SortingsDefinition,
-      NavigationFiltersDefinition
-    >
+    options: BaseFetchOptions<TestFilters, NavigationFiltersDefinition>
   ) =>
     | BaseResponse<TestRecord>
     | Promise<BaseResponse<TestRecord>>
@@ -58,7 +56,6 @@ const createMockDataSource = (
   const baseAdapter: BaseDataAdapter<
     TestRecord,
     TestFilters,
-    SortingsDefinition,
     NavigationFiltersDefinition
   > = {
     fetchData,
@@ -67,7 +64,6 @@ const createMockDataSource = (
   const paginatedAdapter: PaginatedDataAdapter<
     TestRecord,
     TestFilters,
-    SortingsDefinition,
     NavigationFiltersDefinition
   > = {
     fetchData: async (options) => {
@@ -101,6 +97,8 @@ const createMockDataSource = (
     currentNavigationFilters: {},
     setCurrentNavigationFilters: vi.fn(),
     navigationFilters: undefined,
+    currentGrouping: undefined,
+    setCurrentGrouping: vi.fn(),
   }
 }
 
@@ -115,7 +113,10 @@ describe("useData", () => {
 
       const { result } = renderHook(() => useData(source))
 
-      expect(result.current.data).toEqual(mockData)
+      expect(result.current.data).toMatchObject({
+        records: mockData,
+        type: "flat",
+      })
       expect(result.current.isLoading).toBe(false)
       expect(result.current.isInitialLoading).toBe(false)
       expect(result.current.error).toBe(null)
@@ -130,7 +131,10 @@ describe("useData", () => {
         await new Promise((resolve) => setTimeout(resolve, 0))
       })
 
-      expect(result.current.data).toEqual(mockData)
+      expect(result.current.data).toMatchObject({
+        records: mockData,
+        type: "flat",
+      })
       expect(result.current.paginationInfo).toEqual({
         total: 2,
         currentPage: 1,
@@ -155,7 +159,10 @@ describe("useData", () => {
         await new Promise((resolve) => setTimeout(resolve, 0))
       })
 
-      expect(result.current.data).toEqual(mockData)
+      expect(result.current.data).toMatchObject({
+        records: mockData,
+        type: "flat",
+      })
       expect(result.current.isInitialLoading).toBe(false)
     })
 
@@ -198,7 +205,10 @@ describe("useData", () => {
         await new Promise((resolve) => setTimeout(resolve, 0))
       })
 
-      expect(result.current.data).toEqual(mockData)
+      expect(result.current.data).toMatchObject({
+        records: mockData,
+        type: "flat",
+      })
       expect(result.current.isInitialLoading).toBe(false)
     })
 
@@ -241,7 +251,10 @@ describe("useData", () => {
 
       const { result } = renderHook(() => useData(source, { filters }))
 
-      expect(result.current.data).toEqual([mockData[0]])
+      expect(result.current.data).toMatchObject({
+        records: [mockData[0]],
+        type: "flat",
+      })
     })
 
     it("should apply filters to synchronous data", () => {
@@ -257,7 +270,10 @@ describe("useData", () => {
 
       const { result } = renderHook(() => useData(source, { filters }))
 
-      expect(result.current.data).toEqual([mockData[0]])
+      expect(result.current.data).toMatchObject({
+        records: [mockData[0]],
+        type: "flat",
+      })
     })
   })
 
@@ -380,6 +396,8 @@ describe("useData", () => {
         currentNavigationFilters: {},
         setCurrentNavigationFilters: vi.fn(),
         navigationFilters: undefined,
+        currentGrouping: undefined,
+        setCurrentGrouping: vi.fn(),
       }
 
       // Render the hook
diff --git a/packages/react/src/experimental/OneDataCollection/useData.ts b/packages/react/src/experimental/OneDataCollection/useData.ts
index d10e7fdb01..b4f5f05d27 100644
--- a/packages/react/src/experimental/OneDataCollection/useData.ts
+++ b/packages/react/src/experimental/OneDataCollection/useData.ts
@@ -1,3 +1,4 @@
+import { groupBy } from "lodash"
 import {
   useCallback,
   useDeferredValue,
@@ -21,9 +22,12 @@ import { SortingsDefinition } from "./sortings"
 import {
   BaseFetchOptions,
   DataSource,
+  GroupingDefinition,
   PaginatedResponse,
   PromiseOrObservable,
   RecordType,
+  SimpleResponse,
+  SortingsStateMultiple,
 } from "./types"
 
 /**
@@ -34,11 +38,6 @@ export interface DataError {
   cause?: unknown
 }
 
-/**
- * Response structure for non-paginated data
- */
-type SimpleResult<T> = T[]
-
 /**
  * Hook options for useData
  */
@@ -57,28 +56,57 @@ interface PaginationInfo {
   pagesCount: number
 }
 
+/**
+ * Symbol used to identify the groupId in the data
+ */
+export const GROUP_ID_SYMBOL = Symbol("groupId")
+export type WithGroupId<RecordType> = RecordType & {
+  [GROUP_ID_SYMBOL]: unknown | undefined
+}
+
 /**
  * Hook return type for useData
  */
-interface UseDataReturn<Record> {
-  data: Array<Record>
+interface UseDataReturn<R> {
+  data: Data<R>
   isInitialLoading: boolean
   isLoading: boolean
   error: DataError | null
   paginationInfo: PaginationInfo | null
   setPage: (page: number) => void
   totalItems: number | undefined
+  properties: Record<string, unknown> | undefined
 }
 
 type DataType<T> = PromiseState<T>
 
+export type GroupRecord<RecordType> = {
+  key: string
+  label: string | Promise<string>
+  itemCount: number | undefined | Promise<number | undefined>
+  records: RecordType[]
+}
+
+export type Data<RecordType> = {
+  records: WithGroupId<RecordType>[]
+} & (
+  | {
+      type: "grouped"
+      groups: GroupRecord<WithGroupId<RecordType>>[]
+    }
+  | {
+      type: "flat"
+    }
+)
+
 /**
  * Custom hook for handling data fetching state
  */
-function useDataFetchState<Record>() {
+function useDataFetchState<R>() {
   const [isInitialLoading, setIsInitialLoading] = useState(true)
-  const [data, setData] = useState<Array<Record>>([])
+  const [data, setData] = useState<R[]>([])
   const [error, setError] = useState<DataError | null>(null)
+  const [properties, setProperties] = useState<unknown | undefined>(undefined)
 
   return {
     isInitialLoading,
@@ -87,6 +115,8 @@ function useDataFetchState<Record>() {
     setData,
     error,
     setError,
+    properties,
+    setProperties,
   }
 }
 
@@ -152,13 +182,13 @@ function usePaginationState() {
  * }
  * ```
  *
- * @template Record - The type of records in the collection
+ * @template R - The type of records in the collection
  * @template Filters - The filters type extending FiltersDefinition
  *
  * @param source - The data source object containing dataAdapter and filter state
  * @param options - Optional configuration including filter overrides
  *
- * @returns {UseDataReturn<Record>} An object containing:
+ * @returns {UseDataReturn<R>} An object containing:
  * - data: The current collection records
  * - isInitialLoading: Whether this is the first data load
  * - isLoading: Whether any data fetch is in progress
@@ -167,20 +197,22 @@ function usePaginationState() {
  * - setPage: Function to navigate to a specific page
  */
 export function useData<
-  Record extends RecordType,
+  R extends RecordType,
   Filters extends FiltersDefinition,
   Sortings extends SortingsDefinition,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
 >(
   source: DataSource<
-    Record,
+    R,
     Filters,
     Sortings,
-    ItemActionsDefinition<Record>,
-    NavigationFilters
+    ItemActionsDefinition<R>,
+    NavigationFilters,
+    Grouping
   >,
   { filters, onError }: UseDataOptions<Filters> = {}
-): UseDataReturn<Record> {
+): UseDataReturn<R> {
   const {
     dataAdapter,
     currentFilters,
@@ -190,17 +222,21 @@ export function useData<
     isLoading,
     setIsLoading,
     currentNavigationFilters,
+    currentGrouping,
+    grouping,
   } = source
   const cleanup = useRef<(() => void) | undefined>()
 
   const {
     isInitialLoading,
     setIsInitialLoading,
-    data,
-    setData,
+    data: rawData,
+    setData: setRawData,
     error,
     setError,
-  } = useDataFetchState<Record>()
+    properties,
+    setProperties,
+  } = useDataFetchState<R>()
 
   const { paginationInfo, setPaginationInfo } = usePaginationState()
 
@@ -220,9 +256,12 @@ export function useData<
       : deferredSearch
 
   const handleFetchSuccess = useCallback(
-    (result: PaginatedResponse<Record> | SimpleResult<Record>) => {
-      if ("records" in result) {
-        setData(result.records)
+    (result: PaginatedResponse<R> | SimpleResponse<R>) => {
+      const records: R[] = "records" in result ? result.records : result
+      const responseProperties =
+        "properties" in result ? result.properties : undefined
+
+      if ("total" in result) {
         setPaginationInfo({
           total: result.total,
           currentPage: result.currentPage,
@@ -231,16 +270,69 @@ export function useData<
         })
         setTotalItems(result.total)
       } else {
-        setData(result)
-        setTotalItems?.(result.length)
+        setTotalItems?.(records.length)
       }
+
+      setRawData(records)
+      setProperties(responseProperties)
+
       setError(null)
       setIsInitialLoading(false)
       setIsLoading(false)
     },
-    [setData, setError, setPaginationInfo, setIsInitialLoading, setIsLoading]
+    [
+      setRawData,
+      setError,
+      setPaginationInfo,
+      setIsInitialLoading,
+      setIsLoading,
+      setProperties,
+    ]
   )
 
+  const data = useMemo(() => {
+    // Add the groupId to the data if grouping is enabled
+    const data: WithGroupId<R>[] = rawData.map((record) => ({
+      ...record,
+      [GROUP_ID_SYMBOL]:
+        (currentGrouping?.field && record[currentGrouping.field as keyof R]) ||
+        undefined,
+    }))
+
+    /**
+     * Grouped data
+     */
+    if (
+      currentGrouping &&
+      currentGrouping.field &&
+      grouping &&
+      grouping.groupBy[currentGrouping.field as keyof R]
+    ) {
+      const groupedData = groupBy(data, GROUP_ID_SYMBOL)
+
+      return {
+        type: "grouped" as const,
+        records: data,
+        groups: Object.entries(groupedData).map(([key, value]) => ({
+          key,
+          label: grouping.groupBy[currentGrouping.field as keyof R]!.label(
+            key as R[keyof R],
+            mergedFilters
+          ),
+          itemCount: grouping.groupBy[
+            currentGrouping.field as keyof R
+          ]?.itemCount?.(key as R[keyof R], mergedFilters),
+          records: value,
+        })),
+      }
+    }
+
+    /**
+     * Flat data
+     */
+    return { type: "flat" as const, records: data }
+  }, [rawData, currentGrouping, grouping, mergedFilters])
+
   const handleFetchError = useCallback(
     (error: unknown) => {
       setError({
@@ -260,7 +352,7 @@ export function useData<
     [setError, setIsInitialLoading, setIsLoading]
   )
 
-  type ResultType = PaginatedResponse<Record> | SimpleResult<Record>
+  type ResultType = PaginatedResponse<R> | SimpleResponse<R>
 
   const fetchDataAndUpdate = useCallback(
     async (
@@ -275,14 +367,29 @@ export function useData<
           cleanup.current = undefined
         }
 
-        const baseFetchOptions: BaseFetchOptions<
-          Filters,
-          Sortings,
-          NavigationFilters
-        > = {
+        const sortings: SortingsStateMultiple = [
+          ...(currentSortings
+            ? [
+                {
+                  field: currentSortings.field as string,
+                  order: currentSortings.order,
+                },
+              ]
+            : []),
+          ...(currentGrouping
+            ? [
+                {
+                  field: currentGrouping.field as string,
+                  order: currentGrouping.order,
+                },
+              ]
+            : []),
+        ]
+
+        const baseFetchOptions: BaseFetchOptions<Filters, NavigationFilters> = {
           filters,
           search: searchValue,
-          sortings: currentSortings,
+          sortings,
           navigationFilters,
         }
 
@@ -334,6 +441,7 @@ export function useData<
       handleFetchError,
       dataAdapter,
       currentSortings,
+      currentGrouping,
       searchValue,
       handleFetchSuccess,
       setIsLoading,
@@ -382,5 +490,6 @@ export function useData<
     paginationInfo,
     setPage,
     totalItems,
+    properties,
   }
 }
diff --git a/packages/react/src/experimental/OneDataCollection/useGroups.ts b/packages/react/src/experimental/OneDataCollection/useGroups.ts
new file mode 100644
index 0000000000..f753dd6099
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/useGroups.ts
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react"
+import { RecordType } from "./types"
+import { GroupRecord } from "./useData"
+
+export const useGroups = <R extends RecordType>(
+  groups: GroupRecord<R>[],
+  defaultOpenGroups: boolean | GroupRecord<R>["key"][] = []
+) => {
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    const defaultValue = groups.reduce(
+      (acc, group) => {
+        acc[group.key] =
+          typeof defaultOpenGroups === "boolean"
+            ? defaultOpenGroups
+            : defaultOpenGroups.includes(group.key)
+        return acc
+      },
+      {} as Record<string, boolean>
+    )
+    if (Object.values(defaultOpenGroups).length > 0) {
+      setOpenGroups(defaultValue)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groups])
+
+  const setGroupOpen = (key: string, open: boolean) => {
+    setOpenGroups((prev) => ({ ...prev, [key]: open }))
+  }
+
+  return { openGroups, setGroupOpen }
+}
+
+type AnimationVariantsOptions = {
+  delay?: number
+  duration?: number
+  maxDelay?: number
+}
+
+const DEFAULT_ANIMATION_OPTIONS: Required<AnimationVariantsOptions> = {
+  delay: 0.03,
+  duration: 0.03,
+  maxDelay: 20,
+}
+export const getAnimationVariants = (options?: AnimationVariantsOptions) => {
+  const { delay, duration, maxDelay } = {
+    ...DEFAULT_ANIMATION_OPTIONS,
+    ...options,
+  }
+
+  return {
+    hidden: { opacity: 0, y: -10 }, // Start position for the animation
+    visible: (i: number) => {
+      return {
+        opacity: 1,
+        y: 0,
+        transition: {
+          delay: Math.min(i * delay, maxDelay), // Delay each row based on its index
+          duration, // Duration of the animation
+          type: "spring", // Use a spring type animation for a bounce effect
+          stiffness: 100, // Spring stiffness, adjust for more/less bounce
+          damping: 10, // Spring damping, adjust to change how the bounce behaves
+        },
+      }
+    },
+  }
+}
diff --git a/packages/react/src/experimental/OneDataCollection/useSelectable.ts b/packages/react/src/experimental/OneDataCollection/useSelectable.ts
index 846932f5a6..f60ff4655b 100644
--- a/packages/react/src/experimental/OneDataCollection/useSelectable.ts
+++ b/packages/react/src/experimental/OneDataCollection/useSelectable.ts
@@ -5,36 +5,70 @@ import { NavigationFiltersDefinition } from "./navigationFilters/types"
 import type { SortingsDefinition } from "./sortings"
 import {
   DataSource,
+  GroupingDefinition,
   OnSelectItemsCallback,
   PaginationInfo,
   RecordType,
 } from "./types"
+import { Data, GROUP_ID_SYMBOL, GroupRecord, WithGroupId } from "./useData"
 
-type UseSelectable<Record extends RecordType> = {
+export type AllSelectionStatus = {
+  checked: boolean
+  indeterminate: boolean
+  selectedCount: number
+  unselectedCount: number
+}
+
+type UseSelectable<R extends RecordType> = {
   isAllSelected: boolean
-  selectedItems: Map<number | string, Record>
+  selectedItems: Map<number | string, R>
+  selectedGroups: Map<string, GroupRecord<R>>
   isPartiallySelected: boolean
-  handleSelectItemChange: (item: Record, checked: boolean) => void
+  handleSelectItemChange: (item: R, checked: boolean) => void
   handleSelectAll: (checked: boolean) => void
+  handleSelectGroupChange: (group: GroupRecord<R>, checked: boolean) => void
+  groupAllSelectedStatus: Record<string, AllSelectionStatus>
+  allSelectedStatus: AllSelectionStatus
 }
 
 export function useSelectable<
-  Record extends RecordType,
+  R extends RecordType,
   Filters extends FiltersDefinition,
   Sortings extends SortingsDefinition,
-  ItemActions extends ItemActionsDefinition<Record>,
+  ItemActions extends ItemActionsDefinition<R>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
 >(
-  data: ReadonlyArray<Record>,
+  data: Data<R>,
   paginationInfo: PaginationInfo | null,
-  source: DataSource<Record, Filters, Sortings, ItemActions, NavigationFilters>,
-  onSelectItems?: OnSelectItemsCallback<Record, Filters>
-): UseSelectable<Record> {
+  source: DataSource<
+    R,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >,
+  onSelectItems?: OnSelectItemsCallback<R, Filters>
+): UseSelectable<R> {
+  const isGrouped = data.type === "grouped"
+  const isPaginated = paginationInfo !== null
+  /**
+   * Items state and list of selected and unselected items
+   */
   // itemsState is the state of the selected items
-  const [itemsState, setItemsState] = useState<
-    Map<number | string, { item: Record; checked: boolean }>
-  >(new Map())
+  type ItemState = {
+    item: WithGroupId<R>
+    groupId?: unknown
+    checked: boolean
+  }
+  const [itemsState, setItemsState] = useState<Map<number | string, ItemState>>(
+    new Map()
+  )
 
+  /**
+   * Get the list of selected and unselected items from the itemsState for performance reasons
+   */
   const [selectedItems, unselectedItems] = useMemo(() => {
     const selected = new Map()
     const unselected = new Map()
@@ -48,75 +82,254 @@ export function useSelectable<
     return [selected, unselected]
   }, [itemsState])
 
+  /**
+   * Groups state and list of selected and unselected groups
+   */
+  const [groupsState, setGroupsState] = useState<
+    Map<string, { group: GroupRecord<R>; checked: boolean }>
+  >(new Map())
+
+  const [selectedGroups] = useMemo(() => {
+    const selected = new Map()
+    const unselected = new Map()
+
+    groupsState.forEach((value, id) => {
+      if (value.checked) {
+        selected.set(id, value.group)
+      } else {
+        unselected.set(id, value.group)
+      }
+    })
+    return [selected, unselected]
+  }, [groupsState])
+
+  /**
+   * Handle the change of the selected groups
+   */
+  const handleSelectGroupChange = (
+    group: GroupRecord<R> | GroupRecord<R>[],
+    checked: boolean
+  ) => {
+    if (!isGrouped) {
+      return
+    }
+
+    const groups = Array.isArray(group) ? group : [group]
+
+    // Select/deselect all items in the group
+    const groupItems = [
+      ...groups.flatMap((group) => group.records),
+      ...Array.from(itemsState.values())
+        .filter(
+          (item) =>
+            item.item[GROUP_ID_SYMBOL] &&
+            groups.some((group) => group.key === item.item[GROUP_ID_SYMBOL])
+        )
+        .map((item) => item.item),
+    ]
+    handleSelectItemChange(groupItems, checked)
+
+    setGroupsState((current) => {
+      const newState = new Map(current)
+      groups.forEach((group) => {
+        newState.set(group.key, { group, checked })
+      })
+      return newState
+    })
+  }
+
+  const clearSelectedItems = useCallback(() => {
+    handleSelectAll(false)
+    setItemsState(new Map())
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- handleSelectAll is a stable function
+  }, [])
+
+  /**
+   * Get the allSelectedCheck and isPartiallySelected status for each group
+   */
+  const [groupAllSelectedStatus, setGroupAllSelectedStatus] = useState<
+    Record<string, AllSelectionStatus>
+  >({})
+
+  useEffect(() => {
+    const getGroupAllSelectedStatus = async () => {
+      if (!isGrouped) {
+        return {}
+      }
+
+      const groupsStatuses = Object.fromEntries(
+        await Promise.all(
+          data.groups.map(async (group) => {
+            const groupStatus = groupsState.get(group.key)
+
+            const groupItemsStatus = Array.from(itemsState.values()).filter(
+              (item) => item.item[GROUP_ID_SYMBOL] === group.key
+            )
+
+            const knownItemsCount = isPaginated
+              ? (await group.itemCount) || groupItemsStatus.length
+              : group.records.length
+
+            const groupSelectedItemCount = groupItemsStatus.filter(
+              (item) => item.checked
+            ).length
+
+            const groupUnselectedItemCount = groupItemsStatus.filter(
+              (item) => !item.checked
+            ).length
+
+            const areAllKnownGroupItemsSelected =
+              knownItemsCount ===
+              groupSelectedItemCount - groupUnselectedItemCount
+
+            const isGroupAllItemsSelected =
+              (groupStatus?.checked || areAllKnownGroupItemsSelected) &&
+              groupSelectedItemCount > 0
+
+            const isGroupPartiallySelected =
+              (groupSelectedItemCount > 0 && !isGroupAllItemsSelected) ||
+              (isGroupAllItemsSelected && groupUnselectedItemCount > 0)
+
+            return [
+              group.key,
+              {
+                checked: isGroupAllItemsSelected || isGroupPartiallySelected,
+                indeterminate: isGroupPartiallySelected,
+                selectedCount:
+                  isGroupAllItemsSelected && !isGroupPartiallySelected
+                    ? knownItemsCount
+                    : knownItemsCount - groupUnselectedItemCount,
+                unselectedCount: groupUnselectedItemCount,
+              },
+            ] as const
+          })
+        )
+      )
+
+      setGroupAllSelectedStatus(groupsStatuses)
+    }
+
+    getGroupAllSelectedStatus()
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isGrouped, isGrouped && data.groups, groupsState, itemsState])
+
+  /**
+   * Selected items count
+   */
   const selectedCount = selectedItems.size
   const unselectedCount = unselectedItems.size
 
+  /**
+   * All selected check
+   */
   const [allSelectedCheck, setAllSelectedCheck] = useState(false)
 
-  const clearSelectedItems = useCallback(() => {
+  const clearSelected = useCallback(() => {
     handleSelectAll(false)
+    setGroupsState(new Map())
     setItemsState(new Map())
     // eslint-disable-next-line react-hooks/exhaustive-deps -- handleSelectAll is a stable function
   }, [])
 
-  const handleItemStateChange = (
-    item: Record | readonly Record[],
-    checked: boolean
+  const handleSelectItemChange = (
+    item: R | readonly R[],
+    checked: boolean,
+    // Only applies the checked state if the item has no state set yet
+    onlyIfNotSelected: boolean = false
   ) => {
     const items = Array.isArray(item) ? item : [item]
 
+    let updated = 0
     items.forEach((item) => {
       const id = source.selectable && source.selectable(item)
       if (id === undefined) {
         return
       }
+
+      // If the item is already selected, we don't need to update the state if onlyIfNotSelected is true
+      if (onlyIfNotSelected && itemsState.has(id)) {
+        return
+      }
+
+      updated++
       itemsState.set(id, { item, checked })
     })
 
-    setItemsState((current) => new Map(current))
+    if (updated > 0) {
+      setItemsState((current) => new Map(current))
+    }
   }
 
   const handleSelectAll = (checked: boolean) => {
     setAllSelectedCheck(checked)
-    if (checked) {
-      handleItemStateChange(data, true)
+    if (isGrouped) {
+      handleSelectGroupChange(
+        Array.from(groupsState.values()).map(({ group }) => group),
+        checked
+      )
     } else {
-      setItemsState(new Map())
+      handleSelectItemChange(
+        Array.from(itemsState.values()).map(({ item }) => item),
+        checked
+      )
     }
   }
 
   // Try to determine if all items are selected when we select one by one
   // If there is pagination, we need to check if the selected items are less than the total number of items
   // If there is no pagination, we need to check if the selected items are less than the total number of items
-  const areAllKnownItemsSelected =
-    (paginationInfo && selectedCount === paginationInfo.total) ||
-    (!paginationInfo && selectedCount === data.length)
+  const areAllKnownItemsSelected = useMemo(
+    () =>
+      (paginationInfo && selectedCount === paginationInfo.total) ||
+      (!paginationInfo && selectedCount === data.records?.length),
+    [paginationInfo, selectedCount, data.records?.length]
+  )
 
-  const isAllSelected =
-    (allSelectedCheck || areAllKnownItemsSelected) && selectedCount > 0
+  const isAllSelected = useMemo(
+    () => (allSelectedCheck || areAllKnownItemsSelected) && selectedCount > 0,
+    [allSelectedCheck, areAllKnownItemsSelected, selectedCount]
+  )
 
-  const isPartiallySelected =
-    selectedCount > 0 || (isAllSelected && unselectedCount > 0)
+  const isPartiallySelected = useMemo(
+    () =>
+      (selectedCount > 0 && !isAllSelected) ||
+      (isAllSelected && unselectedCount > 0),
+    [selectedCount, isAllSelected, unselectedCount]
+  )
 
   // If the filters change, we need to reset the selected items
   useEffect(() => {
-    clearSelectedItems()
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- clearSelectedItems is a stable function
+    clearSelected()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- clearSelected is a stable function
   }, [source.currentFilters])
 
-  // If the data changes, we need to update new items that are added to the data
+  /**
+   * Handle the data changes to update the selected items status
+   */
   useEffect(() => {
-    if (isAllSelected) {
-      data.forEach((item) => {
-        const id = source.selectable && source.selectable(item)
-        // If the item was loaded before, we can't change the state
-        if (id !== undefined && !itemsState.has(id)) {
-          handleItemStateChange(item, true)
+    if (isGrouped) {
+      data.groups.forEach((group) => {
+        // If the group was loaded before, we can't change the state
+        const groupChecked =
+          groupAllSelectedStatus[group.key]?.checked || isAllSelected
+        if (!groupsState.has(group.key)) {
+          setGroupsState((current) => {
+            const newState = new Map(current)
+            newState.set(group.key, { group, checked: groupChecked })
+            return newState
+          })
         }
+
+        // Apply the status to the new loaded group items
+        handleSelectItemChange(group.records, groupChecked, true)
       })
+    } else {
+      // For the flattened data, we need to check if the item was loaded before
+      handleSelectItemChange(data.records, isAllSelected, true)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- handleItemStateChange is a stable function
-  }, [data, isAllSelected])
+  }, [data, isAllSelected, isGrouped])
 
   // Control the allSelectedCheck state
   // If all items are selected, we need to set the allSelectedCheck state to true
@@ -134,12 +347,18 @@ export function useSelectable<
 
   useEffect(() => {
     // Notify the parent component about the selected items
-
-    const totalItems = paginationInfo?.total ?? data.length
+    const totalItems = paginationInfo?.total ?? (data.records?.length || 0)
 
     const selectedItemsCount = allSelectedCheck
       ? totalItems - unselectedCount
-      : selectedCount
+      : isGrouped
+        ? Array.from(groupsState.values()).reduce((acc, { group, checked }) => {
+            return (
+              acc +
+              (checked ? groupAllSelectedStatus[group.key]?.selectedCount : 0)
+            )
+          }, 0)
+        : selectedCount
 
     onSelectItems?.(
       {
@@ -150,19 +369,41 @@ export function useSelectable<
               ? "indeterminate"
               : false,
         itemsStatus: Array.from(itemsState.values()),
+        groupsStatus: Object.fromEntries(
+          Array.from(groupsState.values()).map(({ group, checked }) => [
+            group.key,
+            !!checked,
+          ])
+        ),
         filters: source.currentFilters,
         selectedCount: selectedItemsCount,
       },
       clearSelectedItems
     )
     // eslint-disable-next-line react-hooks/exhaustive-deps  --  We intentionally omit clearSelectedItems, onSelectItems, selectedCount, source.currentFilters, and unselectedCount
-  }, [allSelectedCheck, itemsState, paginationInfo?.total, data.length])
+  }, [
+    allSelectedCheck,
+    itemsState,
+    groupsState,
+    groupAllSelectedStatus,
+    paginationInfo?.total,
+    data.records?.length,
+  ])
 
   return {
     selectedItems,
+    selectedGroups,
+    allSelectedStatus: {
+      checked: allSelectedCheck || isPartiallySelected,
+      indeterminate: isPartiallySelected,
+      selectedCount,
+      unselectedCount,
+    },
     isAllSelected,
     isPartiallySelected,
-    handleSelectItemChange: handleItemStateChange,
+    handleSelectItemChange,
     handleSelectAll,
+    handleSelectGroupChange,
+    groupAllSelectedStatus,
   }
 }
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations.tsx b/packages/react/src/experimental/OneDataCollection/visualizations.tsx
index ebe999f243..44fe220447 100644
--- a/packages/react/src/experimental/OneDataCollection/visualizations.tsx
+++ b/packages/react/src/experimental/OneDataCollection/visualizations.tsx
@@ -11,6 +11,7 @@ import { NavigationFiltersDefinition } from "./navigationFilters/types"
 import { SortingsDefinition } from "./sortings"
 import type {
   DataSource,
+  GroupingDefinition,
   OnLoadDataCallback,
   OnLoadErrorCallback,
   OnSelectItemsCallback,
@@ -35,6 +36,7 @@ export type Visualization<
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 > =
   | {
       /** Card-based visualization type */
@@ -64,7 +66,8 @@ export type Visualization<
           Filters,
           Sortings,
           ItemActions,
-          NavigationFilters
+          NavigationFilters,
+          Grouping
         >
       }) => JSX.Element
     }
@@ -89,10 +92,18 @@ export type VisualizationProps<
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 > = {
   /** Array of available visualization configurations */
   visualizations?: ReadonlyArray<
-    Visualization<Record, Filters, Sortings, ItemActions, NavigationFilters>
+    Visualization<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
   >
 }
 
@@ -116,13 +127,21 @@ export const VisualizationSelector = <
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 >({
   visualizations,
   currentVisualization,
   onVisualizationChange,
 }: {
   visualizations: ReadonlyArray<
-    Visualization<Record, Filters, Sortings, ItemActions, NavigationFilters>
+    Visualization<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
   >
   currentVisualization: number
   onVisualizationChange: (index: number) => void
@@ -213,6 +232,7 @@ export const VisualizationRenderer = <
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 >({
   visualization,
   source,
@@ -225,9 +245,17 @@ export const VisualizationRenderer = <
     Filters,
     Sortings,
     ItemActions,
-    NavigationFilters
+    NavigationFilters,
+    Grouping
+  >
+  source: DataSource<
+    Record,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
   >
-  source: DataSource<Record, Filters, Sortings, ItemActions, NavigationFilters>
   onSelectItems: OnSelectItemsCallback<Record, Filters>
   onLoadData: OnLoadDataCallback<Record, Filters>
   onLoadError: OnLoadErrorCallback
@@ -235,13 +263,15 @@ export const VisualizationRenderer = <
 }): JSX.Element => {
   switch (visualization.type) {
     case "table":
+      console.log("source", source.currentSortings)
       return (
         <TableCollection<
           Record,
           Filters,
           Sortings,
           ItemActions,
-          NavigationFilters
+          NavigationFilters,
+          Grouping
         >
           source={source}
           {...visualization.options}
@@ -257,7 +287,8 @@ export const VisualizationRenderer = <
           Filters,
           Sortings,
           ItemActions,
-          NavigationFilters
+          NavigationFilters,
+          Grouping
         >
           source={source}
           {...visualization.options}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.spec.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.spec.tsx
index ce33352602..15460271eb 100644
--- a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.spec.tsx
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.spec.tsx
@@ -7,7 +7,7 @@ import { defaultTranslations } from "../../../../../lib/providers/i18n/i18n-prov
 import type { FiltersDefinition } from "../../../Filters/types"
 import { ItemActionsDefinition } from "../../../item-actions"
 import { SortingsDefinition } from "../../../sortings"
-import type { DataSource } from "../../../types"
+import type { DataSource, GroupingDefinition } from "../../../types"
 import { useData } from "../../../useData"
 import { CardCollection } from "./index"
 
@@ -51,7 +51,8 @@ const createTestSource = (
   FiltersDefinition,
   SortingsDefinition,
   ItemActionsDefinition<Person>,
-  NavigationFiltersDefinition
+  NavigationFiltersDefinition,
+  GroupingDefinition<Person>
 > => ({
   currentFilters: {},
   setCurrentFilters: vi.fn(),
@@ -71,6 +72,8 @@ const createTestSource = (
   currentNavigationFilters: {},
   setCurrentNavigationFilters: vi.fn(),
   navigationFilters: undefined,
+  currentGrouping: undefined,
+  setCurrentGrouping: vi.fn(),
 })
 
 describe("CardCollection", () => {
@@ -83,7 +86,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={[
@@ -111,7 +115,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={testCardProperties}
@@ -146,7 +151,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={testCardProperties}
@@ -177,7 +183,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={testCardProperties}
@@ -233,7 +240,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={propertiesWithCustomRender}
@@ -262,7 +270,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={testCardProperties}
@@ -291,7 +300,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={testCardProperties}
@@ -341,6 +351,8 @@ describe("CardCollection", () => {
         currentNavigationFilters: {},
         setCurrentNavigationFilters: vi.fn(),
         navigationFilters: undefined,
+        currentGrouping: undefined,
+        setCurrentGrouping: vi.fn(),
         dataAdapter: {
           paginationType: "pages" as const,
           perPage: 10,
@@ -361,7 +373,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={testCardProperties}
@@ -404,6 +417,8 @@ describe("CardCollection", () => {
         currentNavigationFilters: {},
         setCurrentNavigationFilters: vi.fn(),
         navigationFilters: undefined,
+        currentGrouping: undefined,
+        setCurrentGrouping: vi.fn(),
         dataAdapter: {
           paginationType: "pages" as const,
           fetchData: async () => ({
@@ -423,7 +438,8 @@ describe("CardCollection", () => {
             FiltersDefinition,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            NavigationFiltersDefinition
+            NavigationFiltersDefinition,
+            GroupingDefinition<Person>
           >
             title={(item) => item.name}
             cardProperties={testCardProperties}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.tsx
index 365a8b9b44..9d92ccfb1e 100644
--- a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.tsx
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.tsx
@@ -1,9 +1,15 @@
 import { AvatarVariant } from "@/experimental/Information/Avatars/Avatar"
 import { OneCard } from "@/experimental/OneCard"
+import { GroupHeader } from "@/experimental/OneDataCollection/components/GroupHeader/GroupHeader"
 import { NavigationFiltersDefinition } from "@/experimental/OneDataCollection/navigationFilters/types"
+import {
+  getAnimationVariants,
+  useGroups,
+} from "@/experimental/OneDataCollection/useGroups"
 import { useSelectable } from "@/experimental/OneDataCollection/useSelectable"
 import { Card, CardContent, CardHeader, CardTitle } from "@/ui/Card"
 import { Skeleton } from "@/ui/skeleton"
+import { AnimatePresence, motion } from "framer-motion"
 import { useEffect, useMemo } from "react"
 import { useI18n } from "../../../../../lib/providers/i18n"
 import { OnePagination } from "../../../../OnePagination"
@@ -11,7 +17,12 @@ import type { FiltersDefinition } from "../../../Filters/types"
 import { ItemActionsDefinition } from "../../../item-actions"
 import { PropertyDefinition, renderProperty } from "../../../property-render"
 import { SortingsDefinition } from "../../../sortings"
-import { CollectionProps, RecordType } from "../../../types"
+import {
+  CollectionProps,
+  DataSource,
+  GroupingDefinition,
+  RecordType,
+} from "../../../types"
 import { useData } from "../../../useData"
 
 export type CardPropertyDefinition<T> = PropertyDefinition<T>
@@ -34,12 +45,177 @@ const findNextMultiple = (n: number): number => {
   return Math.ceil(n / lcm) * lcm
 }
 
+const CardGrid = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Group Cards: Renders
+ */
+
+export type CardCollectionProps<
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+> = CollectionProps<
+  Record,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping,
+  CardVisualizationOptions<Record, Filters, Sortings>
+>
+
+/**
+ * Group Cards: Renders the cards for a group
+ */
+
+type GroupCardsProps<
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+> = {
+  source: DataSource<
+    Record,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
+  items: Record[]
+  selectedItems: Map<number | string, Record>
+  handleSelectItemChange: (item: Record, checked: boolean) => void
+  cardProperties: ReadonlyArray<CardPropertyDefinition<Record>>
+  title: (record: Record) => string
+  description?: (record: Record) => string
+  avatar?: (record: Record) => AvatarVariant
+}
+
+const GroupCards = <
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+>({
+  source,
+  items,
+  selectedItems,
+  handleSelectItemChange,
+  cardProperties,
+  title,
+  description,
+  avatar,
+}: GroupCardsProps<
+  Record,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping
+>) => {
+  const renderValue = (
+    item: Record,
+    property: CardPropertyDefinition<Record>
+  ) => {
+    return renderProperty(item, property, "card")
+  }
+
+  return (
+    <CardGrid>
+      {items.map((item, index) => {
+        const id = source.selectable ? source.selectable(item) : undefined
+        const itemHref = source.itemUrl ? source.itemUrl(item) : undefined
+        const itemOnClick = source.itemOnClick
+          ? source.itemOnClick(item)
+          : undefined
+
+        const itemActions = (
+          source.itemActions ? source.itemActions(item) || [] : []
+        ).filter((action) => action.type !== "separator")
+
+        const otherActions = (
+          itemActions.filter(
+            (action) => action.type === "other" || !action.type
+          ) || []
+        ).map((action) => ({
+          ...action,
+          // Reconverts the type to DropdownItemObject
+          type: "item" as const,
+        }))
+
+        const primaryAction =
+          itemActions.find((action) => action.type === "primary") || undefined
+        const secondaryActions =
+          itemActions.filter((action) => action.type === "secondary") || []
+
+        const selectable = !!source.selectable && id !== undefined
+
+        return (
+          <motion.div
+            key={index}
+            layout
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            custom={index}
+            variants={getAnimationVariants({
+              delay: 0.02,
+              duration: 0.3,
+            })}
+          >
+            <OneCard
+              key={index}
+              title={title(item)}
+              selectable={selectable}
+              description={description ? description(item) : undefined}
+              avatar={avatar ? avatar(item) : undefined}
+              selected={selectable && selectedItems.has(id)}
+              onSelect={(selected) => handleSelectItemChange(item, selected)}
+              secondaryActions={secondaryActions}
+              primaryAction={primaryAction}
+              otherActions={otherActions}
+              onClick={itemOnClick}
+              link={itemHref}
+            >
+              <div className="flex flex-col gap-2">
+                {cardProperties.map((property) => (
+                  <div key={String(property.label)}>
+                    <div className="text-muted-foreground text-sm font-medium">
+                      {property.label}
+                    </div>
+                    <div className="text-sm">{renderValue(item, property)}</div>
+                  </div>
+                ))}
+              </div>
+            </OneCard>
+          </motion.div>
+        )
+      })}
+    </CardGrid>
+  )
+}
+
 export const CardCollection = <
   Record extends RecordType,
   Filters extends FiltersDefinition,
   Sortings extends SortingsDefinition,
   ItemActions extends ItemActionsDefinition<Record>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
 >({
   cardProperties,
   title,
@@ -55,6 +231,7 @@ export const CardCollection = <
   Sortings,
   ItemActions,
   NavigationFilters,
+  Grouping,
   CardVisualizationOptions<Record, Filters, Sortings>
 >) => {
   const t = useI18n()
@@ -78,7 +255,8 @@ export const CardCollection = <
     Record,
     Filters,
     Sortings,
-    NavigationFilters
+    NavigationFilters,
+    Grouping
   >(
     {
       ...source,
@@ -93,119 +271,114 @@ export const CardCollection = <
 
   useEffect(() => {
     onLoadData({
-      totalItems: paginationInfo?.total || data.length,
+      totalItems: paginationInfo?.total || data.records.length,
       filters: source.currentFilters,
       search: source.currentSearch,
       isInitialLoading,
-      data,
+      data: data.records,
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps --  we don't want to re-run this effect when the filters change, just when the data changes
-  }, [paginationInfo?.total, data])
+  }, [paginationInfo?.total, data.records])
 
   /**
    * Item selection
    */
-
   const {
     selectedItems,
+    groupAllSelectedStatus,
     handleSelectItemChange,
-    // TODO Add all selection logic
-    // isAllSelected,
-    // isPartiallySelected,
-    // handleSelectAll,
+    handleSelectGroupChange,
   } = useSelectable(data, paginationInfo, source, onSelectItems)
 
-  const renderValue = (
-    item: Record,
-    property: CardPropertyDefinition<Record>
-  ) => {
-    return renderProperty(item, property, "card")
-  }
+  /**
+   * Groups
+   */
+  const collapsible = source.grouping?.collapsible
+  const defaultOpenGroups = source.grouping?.defaultOpenGroups
+  const { openGroups, setGroupOpen } = useGroups(
+    data?.type === "grouped" ? data.groups : [],
+    defaultOpenGroups
+  )
 
   return (
     <>
-      <div className="grid grid-cols-1 gap-4 px-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {isInitialLoading
-          ? Array.from({ length: 8 }).map((_, i) => (
-              <Card key={i}>
-                <CardHeader>
-                  <CardTitle>
-                    <Skeleton className="h-4 w-3/4" />
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-2">
-                  {cardProperties.map((property) => (
-                    <div key={String(property.label)} className="space-y-1">
-                      <Skeleton className="h-3 w-1/4" />
-                      <Skeleton className="h-3 w-1/2" />
-                    </div>
-                  ))}
-                </CardContent>
-              </Card>
-            ))
-          : data.map((item, index) => {
-              const id = source.selectable ? source.selectable(item) : undefined
-              const itemHref = source.itemUrl ? source.itemUrl(item) : undefined
-              const itemOnClick = source.itemOnClick
-                ? source.itemOnClick(item)
-                : undefined
-
-              const itemActions = (
-                source.itemActions ? source.itemActions(item) || [] : []
-              ).filter((action) => action.type !== "separator")
-
-              const otherActions = (
-                itemActions.filter(
-                  (action) => action.type === "other" || !action.type
-                ) || []
-              ).map((action) => ({
-                ...action,
-                // Reconverts the type to DropdownItemObject
-                type: "item" as const,
-              }))
-
-              const primaryAction =
-                itemActions.find((action) => action.type === "primary") ||
-                undefined
-              const secondaryActions =
-                itemActions.filter((action) => action.type === "secondary") ||
-                []
-
-              const selectable = !!source.selectable && id !== undefined
-
-              return (
-                <OneCard
-                  key={index}
-                  title={title(item)}
-                  selectable={selectable}
-                  description={description ? description(item) : undefined}
-                  avatar={avatar ? avatar(item) : undefined}
-                  selected={selectable && selectedItems.has(id)}
-                  onSelect={(selected) =>
-                    handleSelectItemChange(item, selected)
-                  }
-                  secondaryActions={secondaryActions}
-                  primaryAction={primaryAction}
-                  otherActions={otherActions}
-                  onClick={itemOnClick}
-                  link={itemHref}
-                >
-                  <div className="flex flex-col gap-2">
-                    {cardProperties.map((property) => (
-                      <div key={String(property.label)}>
-                        <div className="text-muted-foreground text-sm font-medium">
-                          {property.label}
-                        </div>
-                        <div className="text-sm">
-                          {renderValue(item, property)}
-                        </div>
-                      </div>
-                    ))}
+      {isInitialLoading ? (
+        <CardGrid>
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Card key={i}>
+              <CardHeader>
+                <CardTitle aria-label="Loading card">
+                  <Skeleton className="h-4 w-3/4" />
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {cardProperties.map((property) => (
+                  <div key={String(property.label)} className="space-y-1">
+                    <Skeleton className="h-3 w-1/4" />
+                    <Skeleton className="h-3 w-1/2" />
                   </div>
-                </OneCard>
+                ))}
+              </CardContent>
+            </Card>
+          ))}
+        </CardGrid>
+      ) : (
+        <>
+          {data?.type === "grouped" &&
+            data.groups.map((group) => {
+              return (
+                <>
+                  <GroupHeader
+                    label={group.label}
+                    itemCount={group.itemCount}
+                    onOpenChange={(open) => setGroupOpen(group.key, open)}
+                    open={openGroups[group.key]}
+                    selectable={!!source.selectable}
+                    showOpenChange={collapsible}
+                    select={
+                      groupAllSelectedStatus[group.key]?.checked
+                        ? true
+                        : groupAllSelectedStatus[group.key]?.indeterminate
+                          ? "indeterminate"
+                          : false
+                    }
+                    onSelectChange={(checked) =>
+                      handleSelectGroupChange(group, checked)
+                    }
+                  />
+                  <AnimatePresence>
+                    {openGroups[group.key] && (
+                      <GroupCards
+                        key={group.key}
+                        source={source}
+                        items={group.records}
+                        selectedItems={selectedItems}
+                        handleSelectItemChange={handleSelectItemChange}
+                        title={title}
+                        cardProperties={cardProperties}
+                        description={description}
+                        avatar={avatar}
+                      />
+                    )}
+                  </AnimatePresence>
+                </>
               )
             })}
-      </div>
+
+          {data?.type === "flat" && (
+            <GroupCards
+              source={source}
+              items={data.records}
+              selectedItems={selectedItems}
+              handleSelectItemChange={handleSelectItemChange}
+              title={title}
+              cardProperties={cardProperties}
+              description={description}
+              avatar={avatar}
+            />
+          )}
+        </>
+      )}
       {paginationInfo && (
         <div className="flex w-full items-center justify-between px-6">
           <span className="shrink-0 text-f1-foreground-secondary">
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/ItemTeaser.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/ItemTeaser.tsx
new file mode 100644
index 0000000000..a73802d1b6
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/ItemTeaser.tsx
@@ -0,0 +1,43 @@
+import {
+  Avatar,
+  AvatarVariant,
+} from "@/experimental/Information/Avatars/Avatar"
+import { cn } from "@/lib/utils"
+
+export type ItemTeaserProps = {
+  title: string
+  avatar?: AvatarVariant
+  description?: string
+  metadata?: string
+  className?: string
+}
+
+export const ItemTeaser = ({
+  title,
+  avatar,
+  description,
+  metadata,
+  className,
+}: ItemTeaserProps) => {
+  return (
+    <article className={cn("flex items-center gap-2", className)}>
+      {avatar && <Avatar avatar={avatar} size="medium" />}
+      <div>
+        <header>
+          <h3 className="text-base font-medium text-f1-foreground">{title}</h3>
+        </header>
+        <aside className="font-regular flex flex-row gap-1 text-base text-f1-foreground-secondary">
+          {description && (
+            <h6 className="font-regular text-base">{description}</h6>
+          )}
+          {metadata && (
+            <>
+              {" • "}
+              <h6 className="font-regular text-base">{metadata}</h6>
+            </>
+          )}
+        </aside>
+      </div>
+    </article>
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/ListGroup.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/ListGroup.tsx
new file mode 100644
index 0000000000..cbb171d886
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/ListGroup.tsx
@@ -0,0 +1,68 @@
+import { FiltersDefinition } from "../../../../Filters/types"
+import { ItemActionsDefinition } from "../../../../item-actions"
+import { NavigationFiltersDefinition } from "../../../../navigationFilters/types"
+import { SortingsDefinition } from "../../../../sortings"
+import { DataSource, GroupingDefinition, RecordType } from "../../../../types"
+import { ItemDefinition, ListPropertyDefinition } from "../types"
+import { Row } from "./Row"
+
+type ListGroupProps<
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+> = {
+  source: DataSource<
+    R,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
+  items: R[]
+  selectedItems: Map<number | string, R>
+  handleSelectItemChange: (item: R, checked: boolean) => void
+  fields: ReadonlyArray<ListPropertyDefinition<R, Sortings>>
+  itemDefinition: (record: R) => ItemDefinition
+}
+
+/**
+ * Group List: Renders the list for a group
+ */
+export const ListGroup = <
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+>({
+  source,
+  items,
+  selectedItems,
+  handleSelectItemChange,
+  fields,
+  itemDefinition,
+}: ListGroupProps<
+  Record,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping
+>) => {
+  return items.map((item, index) => (
+    <Row
+      key={`row-${index}`}
+      source={source}
+      item={item}
+      selectedItems={selectedItems}
+      handleSelectItemChange={handleSelectItemChange}
+      fields={fields}
+      itemDefinition={itemDefinition}
+    />
+  ))
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/Row.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/Row.tsx
new file mode 100644
index 0000000000..3c358068c2
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/Row.tsx
@@ -0,0 +1,190 @@
+import { Button } from "@/components/Actions/Button"
+import { Link } from "@/components/Actions/Link"
+import { Checkbox } from "@/experimental/Forms/Fields/Checkbox"
+import { DropdownItemSeparator } from "@/experimental/Navigation/Dropdown/internal"
+import { useI18n } from "@/lib/providers/i18n"
+import { cn } from "@/lib/utils"
+import { useState } from "react"
+import { FiltersDefinition } from "../../../../Filters/types"
+import {
+  ActionDefinition,
+  filterItemActions,
+  ItemActionsDefinition,
+} from "../../../../item-actions"
+import { ItemActionsDropdown } from "../../../../ItemActions/ItemActionsDropdown"
+import { NavigationFiltersDefinition } from "../../../../navigationFilters/types"
+import { renderProperty } from "../../../../property-render"
+import { SortingsDefinition } from "../../../../sortings"
+import { DataSource, GroupingDefinition, RecordType } from "../../../../types"
+import { actionsToDropdownItems } from "../../utils"
+import { ItemDefinition, ListPropertyDefinition } from "../types"
+import { ItemTeaser } from "./ItemTeaser"
+
+type RowProps<
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+> = {
+  source: DataSource<
+    R,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
+  item: R
+  selectedItems: Map<number | string, R>
+  handleSelectItemChange: (item: R, checked: boolean) => void
+  fields: ReadonlyArray<ListPropertyDefinition<R, Sortings>>
+  itemDefinition: (record: R) => ItemDefinition
+}
+
+/**
+ * Group List: Renders the list for a group
+ */
+export const Row = <
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+>({
+  source,
+  item,
+  selectedItems,
+  handleSelectItemChange,
+  fields,
+  itemDefinition,
+}: RowProps<
+  Record,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping
+>) => {
+  const renderCell = (
+    item: Record,
+    property: ListPropertyDefinition<Record, Sortings>
+  ) => {
+    return renderProperty(item, property, "table")
+  }
+
+  const { actions } = useI18n()
+
+  const itemHref = source.itemUrl ? source.itemUrl(item) : undefined
+  const itemOnClick = source.itemOnClick ? source.itemOnClick(item) : undefined
+  const id = source.selectable ? source.selectable(item) : undefined
+  const itemDef = itemDefinition(item)
+
+  const itemActions = filterItemActions(source.itemActions, item)
+
+  // gets the primary item actions (max 2)
+  const primaryItemActions = itemActions
+    .filter(
+      (action): action is Exclude<ActionDefinition, DropdownItemSeparator> =>
+        action.type === "primary"
+    )
+    .slice(0, 2)
+
+  // the rest of the actions go to the dropdown
+  const dropdownItemActions = actionsToDropdownItems(
+    itemActions.filter(
+      (action) =>
+        action.type === "separator" || !primaryItemActions.includes(action)
+    )
+  )
+
+  const [dropDownOpen, setDropDownOpen] = useState(false)
+
+  const [dropDownOpenTimeout, setDropDownOpenTimeout] =
+    useState<NodeJS.Timeout | null>(null)
+  const handleDropDownOpenChange = (open: boolean) => {
+    // When the dropdown is closed, we wait 100ms before closing it to avoid losing the reference element to position the dropdown
+    if (!open) {
+      setDropDownOpenTimeout(
+        setTimeout(() => {
+          setDropDownOpen(false)
+        }, 100)
+      )
+      return
+    }
+
+    if (dropDownOpenTimeout) {
+      clearTimeout(dropDownOpenTimeout)
+      setDropDownOpenTimeout(null)
+    }
+    setDropDownOpen(true)
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative flex w-full flex-row gap-2 p-2 pl-4",
+        "group hover:bg-f1-background-hover"
+      )}
+    >
+      {source.selectable && id !== undefined && (
+        <div className="flex items-center justify-end">
+          <Checkbox
+            checked={selectedItems.has(id)}
+            onCheckedChange={(checked) => handleSelectItemChange(item, checked)}
+            title={`Select ${source.selectable(item)}`}
+            hideLabel
+          />
+        </div>
+      )}
+      {itemHref && (
+        <Link href={itemHref} className="absolute inset-0 block" tabIndex={0}>
+          <span className="sr-only">{actions.view}</span>
+        </Link>
+      )}
+      <ItemTeaser
+        className="min-w-40 flex-1"
+        title={itemDef.title}
+        avatar={itemDef.avatar}
+        description={itemDef.description}
+        metadata={itemDef.metadata}
+      />
+      <div className="flex flex-1 flex-row items-center justify-end gap-2">
+        {(fields || []).map((field) => (
+          <div key={String(field.label)} onClick={itemOnClick}>
+            <div className={cn()}>{renderCell(item, field)}</div>
+          </div>
+        ))}
+      </div>
+      {source.itemActions && (
+        <aside
+          className={cn(
+            "absolute bottom-0 right-0 top-0 items-center justify-end gap-1 p-2 pl-20 group-hover:flex",
+            "bg-gradient-to-l from-[#f00] from-0%",
+            "via-[#f00] via-60%",
+            "to-transparent to-100%",
+            dropDownOpen ? "flex" : "hidden"
+          )}
+        >
+          {primaryItemActions.map((action) => (
+            <Button
+              key={action.label}
+              label={action.label}
+              variant="outline"
+              onClick={action.onClick}
+              icon={action.icon}
+            />
+          ))}
+
+          <ItemActionsDropdown
+            align="end"
+            items={dropdownItemActions}
+            onOpenChange={handleDropDownOpenChange}
+          />
+        </aside>
+      )}
+    </div>
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/SortingSelector.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/SortingSelector.tsx
new file mode 100644
index 0000000000..cb1746af0a
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/SortingSelector.tsx
@@ -0,0 +1,96 @@
+import { Button } from "@/components/Actions/Button"
+import { Select } from "@/experimental/Forms/Fields/Select"
+import { FiltersDefinition } from "@/experimental/OneDataCollection/Filters/types"
+import { ItemActionsDefinition } from "@/experimental/OneDataCollection/item-actions"
+import { NavigationFiltersDefinition } from "@/experimental/OneDataCollection/navigationFilters/types"
+import { ArrowDown, ArrowUp } from "@/icons/app"
+import { useEffect, useState } from "react"
+import {
+  SortingKey,
+  SortingsDefinition,
+  SortingsState,
+} from "../../../../sortings"
+import { DataSource, GroupingDefinition, RecordType } from "../../../../types"
+
+export const EmptySortingValue = "__no-sorting__"
+
+export const SortingSelector = <
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+>({
+  source,
+  currentSortings,
+  onChange,
+}: {
+  source: DataSource<
+    R,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
+  currentSortings: SortingsState<Sortings> | null
+  onChange: (sorting: SortingsState<Sortings>) => void
+}) => {
+  const sortingOptions = [
+    {
+      label: "{TODO} No sorting",
+      value: EmptySortingValue,
+    },
+    ...Object.entries(source.sortings || {}).map(([key, value]) => ({
+      label: value.label,
+      value: key,
+    })),
+  ]
+
+  const [localSortings, setLocalSortings] =
+    useState<SortingsState<Sortings> | null>(currentSortings)
+
+  useEffect(() => {
+    if (!currentSortings) {
+      setLocalSortings({
+        field: EmptySortingValue,
+        order: "asc",
+      })
+    } else {
+      setLocalSortings(currentSortings)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- we are deep comparing the currentSortings
+  }, [JSON.stringify(currentSortings)])
+
+  return (
+    <div className="flex flex-row gap-2">
+      <Select
+        options={sortingOptions}
+        value={localSortings?.field as string}
+        onChange={(value) => {
+          if (value) {
+            onChange({
+              field: value as SortingKey<Sortings>,
+              order: localSortings?.order ?? "asc",
+            })
+          }
+        }}
+      />
+      {localSortings?.field !== EmptySortingValue && (
+        <Button
+          hideLabel
+          label="Toggle sort direction"
+          variant="outline"
+          icon={localSortings?.order === "asc" ? ArrowUp : ArrowDown}
+          onClick={() =>
+            onChange({
+              field: localSortings?.field as SortingKey<Sortings>,
+              order: localSortings?.order === "asc" ? "desc" : "asc",
+            })
+          }
+        />
+      )}
+    </div>
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/index.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/index.tsx
new file mode 100644
index 0000000000..94409df266
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/index.tsx
@@ -0,0 +1,236 @@
+import { NavigationFiltersDefinition } from "@/experimental/OneDataCollection/navigationFilters/types"
+import { OnePagination } from "@/experimental/OnePagination"
+
+import { GroupHeader } from "@/experimental/OneDataCollection/components/GroupHeader/GroupHeader"
+import { useGroups } from "@/experimental/OneDataCollection/useGroups"
+
+import { useI18n } from "@/lib/providers/i18n"
+import { cn } from "@/lib/utils"
+import { Checkbox } from "@/ui/checkbox"
+import { Skeleton } from "@/ui/skeleton"
+import { useEffect } from "react"
+import type { FiltersDefinition } from "../../../Filters/types"
+import { ItemActionsDefinition } from "../../../item-actions"
+import { SortingsDefinition } from "../../../sortings"
+import { CollectionProps, GroupingDefinition, RecordType } from "../../../types"
+import { useData } from "../../../useData"
+import { useSelectable } from "../../../useSelectable"
+import { ListGroup } from "./components/ListGroup"
+import { SortingSelector } from "./components/SortingSelector"
+import { ListVisualizationOptions } from "./types"
+
+/**
+ * Group List: Renders the list for a group
+ */
+export type ListCollectionProps<
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+> = CollectionProps<
+  Record,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping,
+  ListVisualizationOptions<Record, Filters, Sortings>
+>
+
+export const ListCollection = <
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+>({
+  fields,
+  itemDefinition,
+  source,
+  onSelectItems,
+  onLoadData,
+  onLoadError,
+}: ListCollectionProps<
+  Record,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping
+>) => {
+  const t = useI18n()
+
+  const { data, paginationInfo, setPage, isInitialLoading } = useData<
+    Record,
+    Filters,
+    Sortings,
+    NavigationFilters,
+    Grouping
+  >(source, {
+    onError: (error) => {
+      onLoadError(error)
+    },
+  })
+
+  useEffect(() => {
+    onLoadData({
+      totalItems: paginationInfo?.total || data.records.length,
+      filters: source.currentFilters,
+      search: source.currentSearch,
+      isInitialLoading,
+      data: data.records,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps --  we don't want to re-run this effect when the filters change, just when the data changes
+  }, [paginationInfo?.total, data.records])
+
+  const { currentSortings, setCurrentSortings, isLoading } = source
+
+  /**
+   * Item selection
+   */
+  /**
+   * Item selection
+   */
+  const {
+    selectedItems,
+    allSelectedStatus,
+    groupAllSelectedStatus,
+    handleSelectItemChange,
+    handleSelectAll,
+    handleSelectGroupChange,
+  } = useSelectable(data, paginationInfo, source, onSelectItems)
+
+  /*
+   * Groups
+   */
+  const collapsible = source.grouping?.collapsible
+  const defaultOpenGroups = source.grouping?.defaultOpenGroups
+  const { openGroups, setGroupOpen } = useGroups(
+    data?.type === "grouped" ? data.groups : [],
+    defaultOpenGroups
+  )
+
+  if (isInitialLoading) {
+    return (
+      <div className="flex flex-col gap-4">
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Skeleton key={index} className="h-10 w-full" />
+        ))}
+      </div>
+    )
+  }
+
+  // Enforce that sorting is only used when sortings are defined
+  if (!source.sortings) {
+    fields.forEach((field) => {
+      if (field.sorting) {
+        console.warn(
+          "Sorting is defined on a property but no sortings are provided in the data source"
+        )
+      }
+    })
+  }
+
+  return (
+    <>
+      <div className="flex flex-row items-center gap-2 px-4 py-2">
+        {source.selectable && (
+          <Checkbox
+            checked={allSelectedStatus.checked}
+            indeterminate={allSelectedStatus.indeterminate}
+            onCheckedChange={handleSelectAll}
+            disabled={isLoading}
+            title="[TODO] Select all"
+          />
+        )}
+
+        <div className="flex flex-row gap-2 px-4 py-2">
+          <SortingSelector
+            source={source}
+            onChange={setCurrentSortings}
+            currentSortings={currentSortings}
+          />
+        </div>
+      </div>
+      <div
+        className={cn(isLoading && "select-none opacity-50 transition-opacity")}
+        aria-live={isLoading ? "polite" : undefined}
+        aria-busy={isLoading ? "true" : undefined}
+      >
+        {data.type === "grouped" &&
+          data.groups.map((group) => {
+            const itemCount = group.itemCount
+            return (
+              <>
+                <GroupHeader
+                  key={`group-header-${group.key}`}
+                  className="px-4"
+                  selectable={!!source.selectable}
+                  select={
+                    groupAllSelectedStatus[group.key]?.checked
+                      ? true
+                      : groupAllSelectedStatus[group.key]?.indeterminate
+                        ? "indeterminate"
+                        : false
+                  }
+                  onSelectChange={(checked) =>
+                    handleSelectGroupChange(group, checked)
+                  }
+                  showOpenChange={collapsible}
+                  label={group.label}
+                  itemCount={itemCount}
+                  open={openGroups[group.key]}
+                  onOpenChange={(open) => setGroupOpen(group.key, open)}
+                />
+                {openGroups[group.key] && (
+                  <ListGroup
+                    key={`list-group-${group.key}`}
+                    source={source}
+                    items={group.records}
+                    selectedItems={selectedItems}
+                    handleSelectItemChange={handleSelectItemChange}
+                    fields={fields}
+                    itemDefinition={itemDefinition}
+                  />
+                )}
+              </>
+            )
+          })}
+
+        {data?.type === "flat" && (
+          <ListGroup
+            source={source}
+            items={data.records}
+            selectedItems={selectedItems}
+            handleSelectItemChange={handleSelectItemChange}
+            fields={fields}
+            itemDefinition={itemDefinition}
+          />
+        )}
+
+        {paginationInfo && (
+          <div className="flex w-full items-center justify-between px-6">
+            <span className="shrink-0 text-f1-foreground-secondary">
+              {paginationInfo.total > 0 &&
+                `${(paginationInfo.currentPage - 1) * paginationInfo.perPage + 1}-${Math.min(
+                  paginationInfo.currentPage * paginationInfo.perPage,
+                  paginationInfo.total
+                )} ${t.collections.visualizations.pagination.of} ${paginationInfo.total}`}
+            </span>
+            <div className="flex items-center">
+              <OnePagination
+                totalPages={paginationInfo.pagesCount}
+                currentPage={paginationInfo.currentPage}
+                onPageChange={setPage}
+                disabled={paginationInfo.pagesCount <= 1}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/types.ts b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/types.ts
new file mode 100644
index 0000000000..693d8ae2f5
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/List/types.ts
@@ -0,0 +1,36 @@
+import { AvatarVariant } from "@/experimental/Information/Avatars/Avatar"
+import { FiltersDefinition } from "@/experimental/OneDataCollection/Filters/types"
+import {
+  SortingKey,
+  SortingsDefinition,
+} from "@/experimental/OneDataCollection/sortings"
+import { PropertyDefinition } from "../../../property-render"
+import { RecordType } from "../../../types"
+
+export type WithOptionalSorting<
+  Record,
+  Sortings extends SortingsDefinition,
+> = PropertyDefinition<Record> & {
+  sorting?: SortingKey<Sortings>
+}
+
+export type ItemDefinition = {
+  title: string
+  description?: string
+  avatar?: AvatarVariant
+  metadata?: string
+}
+
+export type ListPropertyDefinition<
+  R,
+  Sortings extends SortingsDefinition,
+> = WithOptionalSorting<R, Sortings> & PropertyDefinition<R>
+
+export type ListVisualizationOptions<
+  R extends RecordType,
+  _Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+> = {
+  itemDefinition: (record: R) => ItemDefinition
+  fields: ReadonlyArray<ListPropertyDefinition<R, Sortings>>
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/components/Row.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/components/Row.tsx
new file mode 100644
index 0000000000..e5611d4ce3
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/components/Row.tsx
@@ -0,0 +1,163 @@
+import { ItemActionsDropdown } from "@/experimental/OneDataCollection/ItemActions/ItemActionsDropdown"
+import { forwardRef } from "react"
+
+import { FiltersDefinition } from "@/experimental/OneDataCollection/Filters/types"
+import {
+  filterItemActions,
+  ItemActionsDefinition,
+} from "@/experimental/OneDataCollection/item-actions"
+import { NavigationFiltersDefinition } from "@/experimental/OneDataCollection/navigationFilters/types"
+import { renderProperty } from "@/experimental/OneDataCollection/property-render"
+import { SortingsDefinition } from "@/experimental/OneDataCollection/sortings"
+import {
+  DataSource,
+  GroupingDefinition,
+  RecordType,
+} from "@/experimental/OneDataCollection/types"
+import { TableCell, TableRow } from "@/experimental/OneTable"
+import { cn } from "@/lib/utils"
+import { Checkbox } from "@/ui/checkbox"
+import { TableColumnDefinition } from ".."
+import { actionsToDropdownItems } from "../../utils"
+
+export type RowProps<
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+> = {
+  source: DataSource<
+    R,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
+  item: R
+  index: number
+  groupIndex: number
+  onCheckedChange: (checked: boolean) => void
+  selectedItems: Map<string | number, R>
+  columns: ReadonlyArray<TableColumnDefinition<R, Sortings>>
+  frozenColumnsLeft: number
+  checkColumnWidth: number
+}
+
+const RowComponentInner = <
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+>(
+  {
+    source,
+    item,
+    onCheckedChange,
+    selectedItems,
+    columns,
+    frozenColumnsLeft,
+    checkColumnWidth,
+    index,
+    groupIndex,
+  }: RowProps<R, Filters, Sortings, ItemActions, NavigationFilters, Grouping>,
+  ref: React.ForwardedRef<HTMLTableRowElement>
+) => {
+  const itemHref = source.itemUrl ? source.itemUrl(item) : undefined
+  const itemOnClick = source.itemOnClick ? source.itemOnClick(item) : undefined
+  const id = source.selectable ? source.selectable(item) : undefined
+
+  const renderCell = (item: R, column: TableColumnDefinition<R, Sortings>) => {
+    return renderProperty(item, column, "table")
+  }
+
+  const key = `table-row-${groupIndex}-${index}`
+
+  const itemActions = filterItemActions(source.itemActions, item)
+
+  return (
+    <TableRow ref={ref} key={key}>
+      {source.selectable && (
+        <TableCell width={checkColumnWidth} sticky={{ left: 0 }}>
+          {id !== undefined && (
+            <div className="flex items-center justify-end">
+              <Checkbox
+                checked={selectedItems.has(id)}
+                onCheckedChange={onCheckedChange}
+                title={`Select ${source.selectable(item)}`}
+                hideLabel
+              />
+            </div>
+          )}
+        </TableCell>
+      )}
+      {columns.map((column, cellIndex) => (
+        <TableCell
+          key={`table-cell-${groupIndex}-${index}-${cellIndex}`}
+          firstCell={cellIndex === 0}
+          href={itemHref}
+          onClick={itemOnClick}
+          width={column.width}
+          sticky={
+            cellIndex < frozenColumnsLeft
+              ? {
+                  left: columns
+                    .slice(0, Math.max(0, cellIndex))
+                    .reduce(
+                      (acc, column) => acc + (column.width ?? 0),
+                      checkColumnWidth
+                    ),
+                }
+              : undefined
+          }
+        >
+          <div
+            className={cn(
+              column.align === "right" ? "justify-end" : "",
+              "flex"
+            )}
+          >
+            {renderCell(item, column)}
+          </div>
+        </TableCell>
+      ))}
+      {source.itemActions && (
+        <TableCell
+          key={`table-cell-${groupIndex}-${index}-actions`}
+          width={68}
+          sticky={{
+            right: 0,
+          }}
+          href={itemHref}
+          onClick={itemOnClick}
+        >
+          <ItemActionsDropdown items={actionsToDropdownItems(itemActions)} />
+        </TableCell>
+      )}
+    </TableRow>
+  )
+}
+
+const Row = forwardRef(RowComponentInner) as <
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+>(
+  props: RowProps<
+    R,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  > & { ref?: React.ForwardedRef<HTMLTableRowElement> }
+) => ReturnType<typeof RowComponentInner>
+
+export { Row }
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.spec.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.spec.tsx
index 53c71d9392..203c2f47e9 100644
--- a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.spec.tsx
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.spec.tsx
@@ -16,7 +16,7 @@ import {
 import type { FiltersDefinition } from "../../../Filters/types"
 import { ItemActionsDefinition } from "../../../item-actions"
 import { SortingsDefinition } from "../../../sortings"
-import type { DataSource } from "../../../types"
+import type { DataSource, GroupingDefinition } from "../../../types"
 import { useData } from "../../../useData"
 import { TableCollection } from "./index"
 
@@ -57,7 +57,8 @@ const createTestSource = (
   TestFilters,
   SortingsDefinition,
   ItemActionsDefinition<Person>,
-  TestNavigationFilters
+  TestNavigationFilters,
+  GroupingDefinition<Person>
 > => ({
   currentFilters: {},
   setCurrentFilters: vi.fn(),
@@ -77,6 +78,8 @@ const createTestSource = (
       return data
     },
   },
+  currentGrouping: undefined,
+  setCurrentGrouping: vi.fn(),
 })
 
 // Test wrapper component that provides I18nProvider
@@ -94,7 +97,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createTestSource()}
@@ -125,7 +129,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createTestSource()}
@@ -171,7 +176,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={columnsWithCustomRender}
             source={createTestSource()}
@@ -199,7 +205,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createTestSource([])}
@@ -231,7 +238,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createTestSource([], error)}
@@ -276,7 +284,8 @@ describe("TableCollection", () => {
       TestFilters,
       SortingsDefinition,
       ItemActionsDefinition<Person>,
-      TestNavigationFilters
+      TestNavigationFilters,
+      GroupingDefinition<Person>
     > => ({
       currentFilters: {},
       setCurrentFilters: vi.fn(),
@@ -290,6 +299,8 @@ describe("TableCollection", () => {
       setCurrentNavigationFilters: vi.fn(),
       navigationFilters: undefined,
       currentNavigationFilters: {},
+      currentGrouping: undefined,
+      setCurrentGrouping: vi.fn(),
       dataAdapter: {
         paginationType: "pages",
         perPage: itemsPerPage,
@@ -324,7 +335,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createPaginatedTestSource()}
@@ -351,7 +363,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createPaginatedTestSource()}
@@ -385,7 +398,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createPaginatedTestSource()}
@@ -421,7 +435,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createPaginatedTestSource(5, 10)}
@@ -446,7 +461,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={testColumns}
             source={createPaginatedTestSource(0, 10)}
@@ -498,7 +514,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={columnsWithSorting}
             source={sortableSource}
@@ -543,7 +560,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={[
               {
@@ -618,7 +636,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={[
               {
@@ -696,7 +715,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={[
               {
@@ -768,7 +788,8 @@ describe("TableCollection", () => {
             TestFilters,
             SortingsDefinition,
             ItemActionsDefinition<Person>,
-            TestNavigationFilters
+            TestNavigationFilters,
+            GroupingDefinition<Person>
           >
             columns={columnsWithSorting}
             source={createTestSource()} // No sortings defined
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.tsx
index 4cdf5ab85a..4a26deb4c9 100644
--- a/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.tsx
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/index.tsx
@@ -1,5 +1,10 @@
 import { Checkbox } from "@/experimental/Forms/Fields/Checkbox"
+import { GroupHeader } from "@/experimental/OneDataCollection/components/GroupHeader"
 import { NavigationFiltersDefinition } from "@/experimental/OneDataCollection/navigationFilters/types"
+import {
+  getAnimationVariants,
+  useGroups,
+} from "@/experimental/OneDataCollection/useGroups"
 import { OnePagination } from "@/experimental/OnePagination"
 import {
   OneTable,
@@ -10,25 +15,26 @@ import {
   TableRow,
 } from "@/experimental/OneTable"
 import { useI18n } from "@/lib/providers/i18n"
-import { cn } from "@/lib/utils"
-import { ComponentProps, useEffect, useMemo } from "react"
+import { AnimatePresence, motion } from "framer-motion"
+import { ComponentProps, Fragment, useEffect, useMemo, useState } from "react"
 import type { FiltersDefinition } from "../../../Filters/types"
 import { ItemActionsDefinition } from "../../../item-actions"
-import { ActionsDropdown } from "../../../ItemActions/Dropdown"
-import { PropertyDefinition, renderProperty } from "../../../property-render"
+import { PropertyDefinition } from "../../../property-render"
 import {
   SortingKey,
   SortingsDefinition,
   SortingsState,
 } from "../../../sortings"
-import { CollectionProps, RecordType } from "../../../types"
+import { CollectionProps, GroupingDefinition, RecordType } from "../../../types"
 import { useData } from "../../../useData"
 import { useSelectable } from "../../../useSelectable"
+import { statusToChecked } from "../utils"
+import { Row } from "./components/Row"
 
 export type WithOptionalSorting<
-  Record,
+  R extends RecordType,
   Sortings extends SortingsDefinition,
-> = PropertyDefinition<Record> & {
+> = PropertyDefinition<R> & {
   sorting?: SortingKey<Sortings>
 
   /**
@@ -43,26 +49,49 @@ export type WithOptionalSorting<
 }
 
 export type TableColumnDefinition<
-  Record,
+  R extends RecordType,
   Sortings extends SortingsDefinition,
-> = WithOptionalSorting<Record, Sortings> &
+> = WithOptionalSorting<R, Sortings> &
   Pick<ComponentProps<typeof TableHead>, "hidden" | "info" | "sticky" | "width">
 
 export type TableVisualizationOptions<
-  Record extends RecordType,
+  R extends RecordType,
   _Filters extends FiltersDefinition,
   Sortings extends SortingsDefinition,
 > = {
-  columns: ReadonlyArray<TableColumnDefinition<Record, Sortings>>
+  columns:
+    | ReadonlyArray<TableColumnDefinition<R, Sortings>>
+    | ((
+        properties: unknown
+      ) => ReadonlyArray<TableColumnDefinition<R, Sortings>>)
+
   frozenColumns?: 0 | 1 | 2
 }
 
+export type TableCollectionProps<
+  R extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<R>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
+> = CollectionProps<
+  R,
+  Filters,
+  Sortings,
+  ItemActions,
+  NavigationFilters,
+  Grouping,
+  TableVisualizationOptions<R, Filters, Sortings>
+>
+
 export const TableCollection = <
-  Record extends RecordType,
+  R extends RecordType,
   Filters extends FiltersDefinition,
   Sortings extends SortingsDefinition,
-  ItemActions extends ItemActionsDefinition<Record>,
+  ItemActions extends ItemActionsDefinition<R>,
   NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<R>,
 >({
   columns,
   source,
@@ -71,36 +100,45 @@ export const TableCollection = <
   onLoadData,
   onLoadError,
 }: CollectionProps<
-  Record,
+  R,
   Filters,
   Sortings,
   ItemActions,
   NavigationFilters,
-  TableVisualizationOptions<Record, Filters, Sortings>
+  Grouping,
+  TableVisualizationOptions<R, Filters, Sortings>
 >) => {
   const t = useI18n()
+  // Created a motion component for the row
+  const [MotionRow] = useState(() =>
+    motion.create(
+      Row<R, Filters, Sortings, ItemActions, NavigationFilters, Grouping>
+    )
+  )
+
+
+  const { data, paginationInfo, setPage, isInitialLoading, properties } =
+    useData<R, Filters, Sortings, NavigationFilters, Grouping>(source)
+
+  const localColumns: ReadonlyArray<TableColumnDefinition<R, Sortings>> =
+    useMemo(() => {
+      if (typeof columns === "function") {
+        return columns(properties)
+      }
+      return columns
+    }, [columns, properties])
 
-  const { data, paginationInfo, setPage, isInitialLoading } = useData<
-    Record,
-    Filters,
-    Sortings,
-    NavigationFilters
-  >(source, {
-    onError: (error) => {
-      onLoadError(error)
-    },
-  })
 
   useEffect(() => {
     onLoadData({
-      totalItems: paginationInfo?.total || data.length,
+      totalItems: paginationInfo?.total || data.records.length,
       filters: source.currentFilters,
       search: source.currentSearch,
       isInitialLoading,
-      data,
+      data: data.records,
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps --  we don't want to re-run this effect when the filters change, just when the data changes
-  }, [paginationInfo?.total, data])
+  }, [paginationInfo?.total, data.records])
 
   const { currentSortings, setCurrentSortings, isLoading } = source
 
@@ -109,13 +147,13 @@ export const TableCollection = <
   /**
    * Item selection
    */
-
   const {
     selectedItems,
-    isAllSelected,
-    isPartiallySelected,
+    allSelectedStatus,
+    groupAllSelectedStatus,
     handleSelectItemChange,
     handleSelectAll,
+    handleSelectGroupChange,
   } = useSelectable(data, paginationInfo, source, onSelectItems)
 
   /**
@@ -160,17 +198,31 @@ export const TableCollection = <
     })
   }
 
+  /*
+   * Groups
+   */
+
+  const collapsible = source.grouping?.collapsible
+  const defaultOpenGroups = source.grouping?.defaultOpenGroups
+  const { openGroups, setGroupOpen } = useGroups(
+    data?.type === "grouped" ? data.groups : [],
+    defaultOpenGroups
+  )
+
+  /*
+   * Initial loading
+   */
   if (isInitialLoading) {
     return (
       <OneTable.Skeleton
-        columns={columns.length + (source.itemActions ? 1 : 0)}
+        columns={localColumns.length + (source.itemActions ? 1 : 0)}
       />
     )
   }
 
   // Enforce that sorting is only used when sortings are defined
   if (!source.sortings) {
-    columns.forEach((column) => {
+    localColumns.forEach((column) => {
       if (column.sorting) {
         console.warn(
           "Sorting is defined on a column but no sortings are provided in the data source"
@@ -179,13 +231,6 @@ export const TableCollection = <
     })
   }
 
-  const renderCell = (
-    item: Record,
-    column: TableColumnDefinition<Record, Sortings>
-  ) => {
-    return renderProperty(item, column, "table")
-  }
-
   const checkColumnWidth = source.selectable ? 52 : 0
 
   return (
@@ -199,19 +244,21 @@ export const TableCollection = <
                 sticky={{ left: 0 }}
                 align="right"
               >
-                <Checkbox
-                  checked={isAllSelected || isPartiallySelected}
-                  indeterminate={isPartiallySelected}
-                  onCheckedChange={handleSelectAll}
-                  title="Select all"
-                  hideLabel
-                  disabled={data.length === 0}
-                />
+                <div className="flex w-full items-center justify-end">
+                  <Checkbox
+                    checked={allSelectedStatus.checked}
+                    indeterminate={allSelectedStatus.indeterminate}
+                    onCheckedChange={handleSelectAll}
+                    title="Select all"
+                    hideLabel
+                    disabled={data?.records.length === 0}
+                  />
+                </div>
               </TableHead>
             )}
-            {columns.map(({ sorting, label, ...column }, index) => (
+            {localColumns.map(({ sorting, label, ...column }, index) => (
               <TableHead
-                key={String(label)}
+                key={`table-head-${index}`}
                 sortState={getColumnSortState(
                   sorting,
                   source.sortings,
@@ -222,7 +269,7 @@ export const TableCollection = <
                 sticky={
                   index < frozenColumnsLeft
                     ? {
-                        left: columns
+                        left: localColumns
                           .slice(0, Math.max(0, index))
                           .reduce(
                             (acc, column) => acc + (column.width ?? 0),
@@ -259,79 +306,83 @@ export const TableCollection = <
           </TableRow>
         </TableHeader>
         <TableBody>
-          {data.map((item, index) => {
-            const itemHref = source.itemUrl ? source.itemUrl(item) : undefined
-            const itemOnClick = source.itemOnClick
-              ? source.itemOnClick(item)
-              : undefined
-            const id = source.selectable ? source.selectable(item) : undefined
-            return (
-              <TableRow
-                key={`row-${index}`}
-                selected={!!id && selectedItems.has(id)}
-              >
-                {source.selectable && (
-                  <TableCell width={checkColumnWidth} sticky={{ left: 0 }}>
-                    {id !== undefined && (
-                      <div className="flex items-center justify-end">
-                        <Checkbox
-                          checked={selectedItems.has(id)}
-                          onCheckedChange={(checked) =>
-                            handleSelectItemChange(item, checked)
-                          }
-                          title={`Select ${source.selectable(item)}`}
-                          hideLabel
-                        />
-                      </div>
-                    )}
-                  </TableCell>
-                )}
-                {columns.map((column, cellIndex) => (
-                  <TableCell
-                    key={String(column.label)}
-                    firstCell={cellIndex === 0}
-                    href={itemHref}
-                    onClick={itemOnClick}
-                    width={column.width}
-                    sticky={
-                      cellIndex < frozenColumnsLeft
-                        ? {
-                            left: columns
-                              .slice(0, Math.max(0, cellIndex))
-                              .reduce(
-                                (acc, column) => acc + (column.width ?? 0),
-                                checkColumnWidth
-                              ),
-                          }
-                        : undefined
-                    }
-                  >
-                    <div
-                      className={cn(
-                        column.align === "right" ? "justify-end" : "",
-                        "flex"
-                      )}
+          {data?.type === "grouped" &&
+            data.groups.map((group, groupIndex) => {
+              const itemCount = group.itemCount
+              return (
+                <Fragment key={`group-${group.key}`}>
+                  <TableRow key={`group-header-${group.key}`}>
+                    <TableCell
+                      colSpan={columns.length + (source.selectable ? 1 : 0)}
                     >
-                      {renderCell(item, column)}
-                    </div>
-                  </TableCell>
-                ))}
-                {source.itemActions && (
-                  <TableCell
-                    key="actions"
-                    width={68}
-                    sticky={{
-                      right: 0,
-                    }}
-                    href={itemHref}
-                    onClick={itemOnClick}
-                  >
-                    <ActionsDropdown item={item} actions={source.itemActions} />
-                  </TableCell>
-                )}
-              </TableRow>
-            )
-          })}
+                      <GroupHeader
+                        className="px-4"
+                        selectable={!!source.selectable}
+                        select={statusToChecked(
+                          groupAllSelectedStatus[group.key]
+                        )}
+                        onSelectChange={(checked) =>
+                          handleSelectGroupChange(group, checked)
+                        }
+                        showOpenChange={collapsible}
+                        label={group.label}
+                        itemCount={itemCount}
+                        open={openGroups[group.key]}
+                        onOpenChange={(open) => setGroupOpen(group.key, open)}
+                      />
+                    </TableCell>
+                  </TableRow>
+
+                  <AnimatePresence key={`group-animate-${groupIndex}`}>
+                    {MotionRow &&
+                      (!collapsible || openGroups[group.key]) &&
+                      group.records.map((item, index) => {
+                        return (
+                          <MotionRow
+                            variants={getAnimationVariants()}
+                            initial={collapsible ? "hidden" : "visible"}
+                            animate="visible"
+                            exit="hidden"
+                            custom={index}
+                            key={`row-${groupIndex}-${index}`}
+                            layout
+                            source={source}
+                            item={item}
+                            index={index}
+                            groupIndex={groupIndex}
+                            onCheckedChange={(checked) =>
+                              handleSelectItemChange(item, checked)
+                            }
+                            selectedItems={selectedItems}
+                            columns={localColumns}
+                            frozenColumnsLeft={frozenColumnsLeft}
+                            checkColumnWidth={checkColumnWidth}
+                          />
+                        )
+                      })}
+                  </AnimatePresence>
+                </Fragment>
+              )
+            })}
+          {data?.type === "flat" &&
+            data.records.map((item, index) => {
+              return (
+                <Row
+                  key={`row-${index}`}
+                  groupIndex={0}
+                  source={source}
+                  item={item}
+                  index={index}
+                  onCheckedChange={(checked) =>
+                    handleSelectItemChange(item, checked)
+                  }
+                  selectedItems={selectedItems}
+                  columns={localColumns}
+                  frozenColumnsLeft={frozenColumnsLeft}
+                  checkColumnWidth={checkColumnWidth}
+                />
+              )
+            })}
         </TableBody>
       </OneTable>
       {paginationInfo && (
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/VisualizationRenderer.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/VisualizationRenderer.tsx
new file mode 100644
index 0000000000..56293a1956
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/VisualizationRenderer.tsx
@@ -0,0 +1,103 @@
+import {
+  CollectionProps,
+  OnLoadDataCallback,
+  OnLoadErrorCallback,
+  OnSelectItemsCallback,
+} from "../../types"
+
+import { FiltersDefinition } from "../../Filters/types"
+import { GroupingDefinition } from "../../grouping"
+import { ItemActionsDefinition } from "../../item-actions"
+import { NavigationFiltersDefinition } from "../../navigationFilters/types"
+import { DataSource, RecordType, SortingsDefinition } from "../../types"
+import {
+  collectionVisualizations,
+  VisualizacionTypeDefinition,
+} from "./collectionViewRegistry"
+import { Visualization } from "./types"
+
+/**
+ * A component that renders the selected visualization for a collection.
+ * Handles switching between different visualization types (table, card, or custom view)
+ * and passes appropriate props to the specific visualization component.
+ *
+ * @template Record - The type of records in the collection
+ * @template Filters - The filters type extending FiltersDefinition
+ * @template ItemActions - The item actions type extending Item ActionsDefinition
+ *
+ * @param visualization - The configuration for the current visualization
+ * @param source - The data source to visualize
+ *
+ * @returns The rendered visualization component (TableCollection, CardCollection, or custom component)
+ */
+
+export const VisualizationRenderer = <
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+>({
+  visualization,
+  source,
+  onSelectItems,
+  onLoadData,
+  onLoadError,
+}: {
+  visualization: Visualization<
+    Record,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
+  source: DataSource<
+    Record,
+    Filters,
+    Sortings,
+    ItemActions,
+    NavigationFilters,
+    Grouping
+  >
+  onSelectItems: OnSelectItemsCallback<Record, Filters>
+  onLoadData: OnLoadDataCallback<Record, Filters>
+  onLoadError: OnLoadErrorCallback
+  clearSelectedItems?: () => void
+}): JSX.Element => {
+  if (visualization.type === "custom") {
+    return visualization.component({
+      source,
+      onLoadData,
+      onLoadError,
+      onSelectItems,
+    })
+  }
+
+  const visualizationType = collectionVisualizations[
+    visualization.type
+  ] as VisualizacionTypeDefinition<
+    CollectionProps<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping,
+      object
+    >
+  >
+
+  if (!visualizationType) {
+    throw new Error(`Visualization type ${visualization.type} not found`)
+  }
+
+  return visualizationType.render({
+    source,
+    ...visualization.options,
+    onSelectItems,
+    onLoadData,
+    onLoadError,
+  })
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/collectionViewRegistry.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/collectionViewRegistry.tsx
new file mode 100644
index 0000000000..5f4ad35418
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/collectionViewRegistry.tsx
@@ -0,0 +1,170 @@
+import { IconType } from "@/components/Utilities/Icon"
+import { Kanban, List, Table } from "@/icons/app"
+import {
+  FiltersDefinition,
+  ItemActionsDefinition,
+  NavigationFiltersDefinition,
+  SortingsDefinition,
+} from "../../exports"
+import { GroupingDefinition, RecordType } from "../../types"
+import { CardCollection, CardCollectionProps } from "./Card"
+import { ListCollection, ListCollectionProps } from "./List"
+import { TableCollection, TableCollectionProps } from "./Table"
+
+export type VisualizacionTypeDefinition<Props> = {
+  render: (props: Props) => JSX.Element
+  name: string
+  icon: IconType
+}
+
+type CollectionVisualizations<
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+> = {
+  table: VisualizacionTypeDefinition<
+    TableCollectionProps<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
+  >
+  list: VisualizacionTypeDefinition<
+    ListCollectionProps<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
+  >
+  card: VisualizacionTypeDefinition<
+    CardCollectionProps<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
+  >
+}
+
+export const collectionVisualizations: CollectionVisualizations<
+  RecordType,
+  FiltersDefinition,
+  SortingsDefinition,
+  ItemActionsDefinition<RecordType>,
+  NavigationFiltersDefinition,
+  GroupingDefinition<RecordType>
+> = {
+  table: {
+    name: "Table",
+    icon: Table,
+    render: <
+      Record extends RecordType,
+      Filters extends FiltersDefinition,
+      Sortings extends SortingsDefinition,
+      ItemActions extends ItemActionsDefinition<Record>,
+      NavigationFilters extends NavigationFiltersDefinition,
+      Grouping extends GroupingDefinition<Record>,
+    >(
+      props: TableCollectionProps<
+        Record,
+        Filters,
+        Sortings,
+        ItemActions,
+        NavigationFilters,
+        Grouping
+      >
+    ) => {
+      return (
+        <TableCollection<
+          Record,
+          Filters,
+          Sortings,
+          ItemActions,
+          NavigationFilters,
+          Grouping
+        >
+          {...props}
+        />
+      )
+    },
+  },
+  list: {
+    name: "List",
+    icon: List,
+    render: <
+      Record extends RecordType,
+      Filters extends FiltersDefinition,
+      Sortings extends SortingsDefinition,
+      ItemActions extends ItemActionsDefinition<Record>,
+      NavigationFilters extends NavigationFiltersDefinition,
+      Grouping extends GroupingDefinition<Record>,
+    >(
+      props: ListCollectionProps<
+        Record,
+        Filters,
+        Sortings,
+        ItemActions,
+        NavigationFilters,
+        Grouping
+      >
+    ) => {
+      return (
+        <ListCollection<
+          Record,
+          Filters,
+          Sortings,
+          ItemActions,
+          NavigationFilters,
+          Grouping
+        >
+          {...props}
+        />
+      )
+    },
+  },
+  card: {
+    name: "Card",
+    icon: Kanban,
+    render: <
+      Record extends RecordType,
+      Filters extends FiltersDefinition,
+      Sortings extends SortingsDefinition,
+      ItemActions extends ItemActionsDefinition<Record>,
+      NavigationFilters extends NavigationFiltersDefinition,
+      Grouping extends GroupingDefinition<Record>,
+    >(
+      props: CardCollectionProps<
+        Record,
+        Filters,
+        Sortings,
+        ItemActions,
+        NavigationFilters,
+        Grouping
+      >
+    ) => {
+      return (
+        <CardCollection<
+          Record,
+          Filters,
+          Sortings,
+          ItemActions,
+          NavigationFilters,
+          Grouping
+        >
+          {...props}
+        />
+      )
+    },
+  },
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/index.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/collection/index.tsx
new file mode 100644
index 0000000000..2200aac7e2
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/index.tsx
@@ -0,0 +1,3 @@
+export * from "./collectionViewRegistry"
+export * from "./types"
+export * from "./VisualizationRenderer"
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/types.ts b/packages/react/src/experimental/OneDataCollection/visualizations/collection/types.ts
new file mode 100644
index 0000000000..077c8a548d
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/types.ts
@@ -0,0 +1,116 @@
+import { IconType } from "../../../../components/Utilities/Icon"
+import type { FiltersDefinition } from "../../Filters/types"
+import { ItemActionsDefinition } from "../../item-actions"
+import { NavigationFiltersDefinition } from "../../navigationFilters/types"
+import { SortingsDefinition } from "../../sortings"
+import type {
+  DataSource,
+  GroupingDefinition,
+  OnLoadDataCallback,
+  OnLoadErrorCallback,
+  OnSelectItemsCallback,
+  RecordType,
+} from "../../types"
+import type { CardVisualizationOptions } from "../../visualizations/collection/Card"
+import type { TableVisualizationOptions } from "../../visualizations/collection/Table"
+import { ListVisualizationOptions } from "./List/types"
+
+/**
+ * Represents a visualization configuration for displaying collection data.
+ * Supports different visualization types (card, table, or custom) with their respective options.
+ *
+ * @template Record - The type of records in the collection
+ * @template Filters - The filters type extending FiltersDefinition
+ * @template ItemActions - The actions type extending Item ActionsDefinition
+ */
+export type Visualization<
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+> =
+  | {
+      /** Card-based visualization type */
+      type: "card"
+      /** Configuration options for card visualization */
+      options: CardVisualizationOptions<Record, Filters, Sortings>
+    }
+  | {
+      /** Table-based visualization type */
+      type: "table"
+      /** Configuration options for table visualization */
+      options: TableVisualizationOptions<Record, Filters, Sortings>
+    }
+  | {
+      /** List-based visualization type */
+      type: "list"
+      /** Configuration options for list visualization */
+      options: ListVisualizationOptions<Record, Filters, Sortings>
+    }
+  | {
+      /** Human-readable label for the visualization */
+      label: string
+      /** Icon to represent the visualization in UI */
+      icon: IconType
+      /** Custom visualization type */
+      type: "custom"
+      /** Custom component to render the visualization */
+      component: (props: {
+        onSelectItems: OnSelectItemsCallback<Record, Filters>
+        onLoadData: OnLoadDataCallback<Record, Filters>
+        onLoadError: OnLoadErrorCallback
+        source: DataSource<
+          Record,
+          Filters,
+          Sortings,
+          ItemActions,
+          NavigationFilters,
+          Grouping
+        >
+      }) => JSX.Element
+    }
+
+/**
+ * Represents the type of visualization.
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type VisualizationType = Visualization<
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+>["type"]
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+/**
+ * Props interface for components that support multiple visualizations.
+ * Used to configure how data can be displayed in different formats.
+ *
+ * @template Record - The type of records in the collection
+ * @template Filters - The filters type extending FiltersDefinition
+ * @template Actions - The actions type extending ActionsDefinition
+ */
+export type VisualizationProps<
+  Record extends RecordType,
+  Filters extends FiltersDefinition,
+  Sortings extends SortingsDefinition,
+  ItemActions extends ItemActionsDefinition<Record>,
+  NavigationFilters extends NavigationFiltersDefinition,
+  Grouping extends GroupingDefinition<Record>,
+> = {
+  /** Array of available visualization configurations */
+  visualizations?: ReadonlyArray<
+    Visualization<
+      Record,
+      Filters,
+      Sortings,
+      ItemActions,
+      NavigationFilters,
+      Grouping
+    >
+  >
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/collection/utils.ts b/packages/react/src/experimental/OneDataCollection/visualizations/collection/utils.ts
new file mode 100644
index 0000000000..2d62fb1bf8
--- /dev/null
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/collection/utils.ts
@@ -0,0 +1,36 @@
+import { ActionDefinition } from "../../item-actions"
+
+export const statusToChecked = <
+  T extends { checked: boolean; indeterminate: boolean },
+>(
+  status: T | undefined
+): boolean | "indeterminate" => {
+  if (!status) {
+    return false
+  }
+
+  return status.checked
+    ? status.indeterminate
+      ? "indeterminate"
+      : true
+    : false
+}
+
+/**
+ * Converts the item actions definition to dropdown items
+ * @param actions - The item actions definition to convert
+ * @param item - The item to convert the actions for
+ * @returns An array of dropdown items
+ */
+export const actionsToDropdownItems = (
+  actions: ActionDefinition[] | undefined
+) => {
+  return (actions || []).map((action) => {
+    return action.type === "separator"
+      ? action
+      : {
+          ...action,
+          type: "item" as const,
+        }
+  })
+}
diff --git a/packages/react/src/experimental/OneDataCollection/visualizations/property/index.tsx b/packages/react/src/experimental/OneDataCollection/visualizations/property/index.tsx
index 1c0e238bf8..9de47f87e5 100644
--- a/packages/react/src/experimental/OneDataCollection/visualizations/property/index.tsx
+++ b/packages/react/src/experimental/OneDataCollection/visualizations/property/index.tsx
@@ -16,7 +16,7 @@ import { TagVariant } from "@/experimental/Information/Tags/Tag"
 import { cn } from "@/lib/utils"
 import { ReactNode } from "react"
 import { PropertyDefinition } from "../../property-render"
-import { VisualizationType } from "../../visualizations"
+import { VisualizationType } from "../collection/types"
 import {
   formatDateValue,
   isShowingPlaceholder,
diff --git a/packages/react/src/experimental/OneTable/TableCell/index.tsx b/packages/react/src/experimental/OneTable/TableCell/index.tsx
index 1fc859566e..c7df81faae 100644
--- a/packages/react/src/experimental/OneTable/TableCell/index.tsx
+++ b/packages/react/src/experimental/OneTable/TableCell/index.tsx
@@ -35,6 +35,11 @@ interface TableCellProps {
    * @default undefined
    */
   sticky?: { left?: number; right?: never } | { left?: never; right?: number }
+
+  /**
+   * The number of columns the cell should span
+   */
+  colSpan?: number
 }
 
 export function TableCell({
@@ -44,6 +49,7 @@ export function TableCell({
   width = "auto",
   firstCell = false,
   sticky,
+  colSpan,
 }: TableCellProps) {
   const { isScrolled, isScrolledRight } = useTable()
   const { actions } = useI18n()
@@ -58,6 +64,7 @@ export function TableCell({
 
   return (
     <TableCellRoot
+      colSpan={colSpan}
       className={cn(
         firstCell && "peer font-medium",
         isSticky &&
diff --git a/packages/react/src/experimental/OneTable/TableRow/index.tsx b/packages/react/src/experimental/OneTable/TableRow/index.tsx
index 29e90c7a4c..7551694d14 100644
--- a/packages/react/src/experimental/OneTable/TableRow/index.tsx
+++ b/packages/react/src/experimental/OneTable/TableRow/index.tsx
@@ -1,25 +1,32 @@
 import { cn } from "../../../lib/utils"
 
 import { TableRow as TableRowRoot } from "@/ui/table"
-
+import { forwardRef } from "react"
 interface TableRowProps {
   children: React.ReactNode
   selected?: boolean
   className?: string
 }
 
-export function TableRow({ children, selected, className }: TableRowProps) {
-  return (
-    <TableRowRoot
-      className={cn(
-        selected && "bg-f1-background-selected hover:bg-f1-background-selected",
-        className,
-        "relative before:pointer-events-none before:absolute before:inset-0 before:z-10 before:content-['']",
-        "[&:has(.table-cell-action-button:focus)]:before:rounded-sm [&:has(.table-cell-action-button:focus)]:before:ring-1 [&:has(.table-cell-action-button:focus)]:before:ring-inset [&:has(.table-cell-action-button:focus)]:before:ring-f1-ring",
-        "[&:has(a:focus)]:before:rounded-sm [&:has(a:focus)]:before:ring-1 [&:has(a:focus)]:before:ring-inset [&:has(a:focus)]:before:ring-f1-ring"
-      )}
-    >
-      {children}
-    </TableRowRoot>
-  )
-}
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ children, selected, className }, ref) => {
+    return (
+      <TableRowRoot
+        ref={ref}
+        className={cn(
+          selected &&
+            "bg-f1-background-selected hover:bg-f1-background-selected",
+          className,
+          "relative before:pointer-events-none before:absolute before:inset-0 before:z-10 before:content-['']",
+          "[&:has(.table-cell-action-button:focus)]:before:rounded-sm [&:has(.table-cell-action-button:focus)]:before:ring-1 [&:has(.table-cell-action-button:focus)]:before:ring-inset [&:has(.table-cell-action-button:focus)]:before:ring-f1-ring",
+          "[&:has(a:focus)]:before:rounded-sm [&:has(a:focus)]:before:ring-1 [&:has(a:focus)]:before:ring-inset [&:has(a:focus)]:before:ring-f1-ring"
+        )}
+      >
+        {children}
+      </TableRowRoot>
+    )
+  }
+)
+
+TableRow.displayName = "TableRow"
+export { TableRow }
diff --git a/packages/react/src/lib/exports.ts b/packages/react/src/lib/exports.ts
index 9a15148cc0..8f0f2efc4b 100644
--- a/packages/react/src/lib/exports.ts
+++ b/packages/react/src/lib/exports.ts
@@ -1,3 +1,4 @@
+export { Await } from "../components/Utilities/Await/Await"
 export * from "./a11y"
 export * from "./emojis"
 export { PrivacyModeProvider, usePrivacyMode } from "./privacyMode"
diff --git a/packages/react/src/lib/providers/i18n/i18n-provider-defaults.ts b/packages/react/src/lib/providers/i18n/i18n-provider-defaults.ts
index 34391bf459..9ef10a570f 100644
--- a/packages/react/src/lib/providers/i18n/i18n-provider-defaults.ts
+++ b/packages/react/src/lib/providers/i18n/i18n-provider-defaults.ts
@@ -39,6 +39,7 @@ export const defaultTranslations = {
     visualizations: {
       table: "Table view",
       card: "Card view",
+      list: "List view",
       pagination: {
         of: "of",
       },
diff --git a/packages/react/src/ui/ChevronToggle/ChevronToggle.tsx b/packages/react/src/ui/ChevronToggle/ChevronToggle.tsx
new file mode 100644
index 0000000000..ac06b56e86
--- /dev/null
+++ b/packages/react/src/ui/ChevronToggle/ChevronToggle.tsx
@@ -0,0 +1,34 @@
+import { Icon } from "@/components/Utilities/Icon"
+import { ChevronDown } from "@/icons/app"
+import { cn } from "@/lib/utils"
+import { motion } from "framer-motion"
+
+export type ChevronToggleProps = {
+  open?: boolean
+  className?: string
+  onClick?: () => void
+  disabled?: boolean
+}
+
+export const ChevronToggle = ({
+  open,
+  className,
+  onClick,
+  disabled,
+}: ChevronToggleProps) => {
+  return (
+    <motion.div
+      animate={{ rotate: open ? 180 : 0 }}
+      transition={{ duration: 0.2 }}
+      className={cn(
+        "flex h-3 w-3 shrink-0 items-center justify-center text-f1-icon-bold",
+        disabled && "cursor-not-allowed opacity-50",
+
+        className
+      )}
+      onClick={onClick}
+    >
+      <Icon icon={ChevronDown} size="xs" role="button" />
+    </motion.div>
+  )
+}
diff --git a/packages/react/src/ui/ChevronToggle/__stories__/ChevronToggle.stories.tsx b/packages/react/src/ui/ChevronToggle/__stories__/ChevronToggle.stories.tsx
new file mode 100644
index 0000000000..b61c21d09f
--- /dev/null
+++ b/packages/react/src/ui/ChevronToggle/__stories__/ChevronToggle.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { ChevronToggle } from "../ChevronToggle"
+
+const meta = {
+  title: "Components/ChevronToggle",
+  component: ChevronToggle,
+  parameters: {
+    layout: "centered",
+    chromatic: { disableSnapshot: true },
+  },
+  tags: ["autodocs", "internal"],
+} satisfies Meta<typeof ChevronToggle>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: false,
+  },
+}
+
+export const Open: Story = {
+  args: {
+    open: true,
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <ChevronToggle
+          open={isOpen}
+          className="cursor-pointer"
+          onClick={() => setIsOpen(!isOpen)}
+        />
+        <button
+          className="bg-blue-500 text-white rounded px-4 py-2"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          Toggle Chevron
+        </button>
+      </div>
+    )
+  },
+}
+
+export const WithCustomSize: Story = {
+  args: {
+    open: false,
+    className: "h-6 w-6",
+  },
+}
diff --git a/packages/react/src/ui/ChevronToggle/index.tsx b/packages/react/src/ui/ChevronToggle/index.tsx
new file mode 100644
index 0000000000..aeab7a01ef
--- /dev/null
+++ b/packages/react/src/ui/ChevronToggle/index.tsx
@@ -0,0 +1 @@
+export * from "./ChevronToggle"
diff --git a/packages/react/src/ui/skeleton.tsx b/packages/react/src/ui/skeleton.tsx
index a0abcd6194..a71e0c7f0f 100644
--- a/packages/react/src/ui/skeleton.tsx
+++ b/packages/react/src/ui/skeleton.tsx
@@ -6,6 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
+      data-testid="skeleton"
       className={cn(
         "animate-pulse rounded-xs bg-f1-background-secondary",
         className
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 783edce536..a156df24e4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -263,7 +263,7 @@ importers:
         version: 1.1.0
       zod:
         specifier: ^3.23.8
-        version: 3.24.4
+        version: 3.24.1
     optionalDependencies:
       '@rollup/rollup-linux-x64-gnu':
         specifier: ^4.34
@@ -343,7 +343,7 @@ importers:
         version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.5.2))(typescript@5.7.3)
       '@storybook/react-vite':
         specifier: ^8.6.14
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@8.6.14(prettier@3.5.2))(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))
+        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@8.6.14(prettier@3.5.2))(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
       '@storybook/test':
         specifier: ^8.6.14
         version: 8.6.14(storybook@8.6.14(prettier@3.5.2))
@@ -391,7 +391,7 @@ importers:
         version: 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.7.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.3.4(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))
+        version: 4.3.4(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.3)
@@ -484,16 +484,16 @@ importers:
         version: 0.4.2
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+        version: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
       vite-plugin-dts:
         specifier: 4.3.0
-        version: 4.3.0(@types/node@22.13.9)(rollup@4.40.2)(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))
+        version: 4.3.0(@types/node@22.13.9)(rollup@4.40.2)(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
       vite-plugin-lib-inject-css:
         specifier: ^2.2.1
-        version: 2.2.1(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))
+        version: 2.2.1(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
       vitest:
         specifier: ^3.0.7
-        version: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+        version: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
 
   packages/react-native:
     dependencies:
@@ -518,7 +518,7 @@ importers:
         version: 8.1.0(typescript@5.7.3)
       '@testing-library/react-native':
         specifier: ^12.9.0
-        version: 12.9.0(jest@29.7.0(@types/node@22.15.18))(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 12.9.0(jest@29.7.0(@types/node@22.15.21))(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/jest':
         specifier: ^29.5.14
         version: 29.5.14
@@ -527,7 +527,7 @@ importers:
         version: 18.3.18
       '@types/react-native':
         specifier: ^0.73.0
-        version: 0.73.0(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1)
+        version: 0.73.0(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1)
       '@types/twemoji-parser':
         specifier: ^13.1.4
         version: 13.1.4
@@ -536,7 +536,7 @@ importers:
         version: 16.0.0
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@22.15.18)
+        version: 29.7.0(@types/node@22.15.21)
       nativewind:
         specifier: ^4.1.23
         version: 4.1.23(react-native-reanimated@3.16.7(@babel/core@7.26.10)(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1))(react@18.3.1))(react-native-svg@15.8.0(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1))(react@18.3.1))(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)(tailwindcss@3.3.5)
@@ -2097,8 +2097,8 @@ packages:
     resolution: {integrity: sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.2.2':
-    resolution: {integrity: sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==}
+  '@eslint/config-helpers@0.2.1':
+    resolution: {integrity: sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/core@0.14.0':
@@ -2273,8 +2273,8 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
-  '@humanwhocodes/retry@0.4.3':
-    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+  '@humanwhocodes/retry@0.4.2':
+    resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
     engines: {node: '>=18.18'}
 
   '@isaacs/cliui@8.0.2':
@@ -4504,9 +4504,6 @@ packages:
   '@types/node@22.13.9':
     resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==}
 
-  '@types/node@22.15.18':
-    resolution: {integrity: sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==}
-
   '@types/node@22.15.21':
     resolution: {integrity: sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==}
 
@@ -5267,8 +5264,8 @@ packages:
   caniuse-lite@1.0.30001707:
     resolution: {integrity: sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==}
 
-  caniuse-lite@1.0.30001718:
-    resolution: {integrity: sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==}
+  caniuse-lite@1.0.30001717:
+    resolution: {integrity: sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw==}
 
   canvas-confetti@1.9.3:
     resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
@@ -5752,15 +5749,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   decamelize@1.2.0:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
@@ -5948,8 +5936,8 @@ packages:
   electron-to-chromium@1.5.123:
     resolution: {integrity: sha512-refir3NlutEZqlKaBLK0tzlVLe5P2wDKS7UQt/3SpibizgsRAPOsqQC3ffw1nlv3ze5gjRQZYHoPymgVZkplFA==}
 
-  electron-to-chromium@1.5.155:
-    resolution: {integrity: sha512-ps5KcGGmwL8VaeJlvlDlu4fORQpv3+GIcF5I3f9tUKUlJ/wsysh6HU8P5L1XWRYeXfA0oJd4PyM8ds8zTFf6Ng==}
+  electron-to-chromium@1.5.150:
+    resolution: {integrity: sha512-rOOkP2ZUMx1yL4fCxXQKDHQ8ZXwisb2OycOQVKHgvB3ZI4CvehOd4y2tfnnLDieJ3Zs1RL1Dlp3cMkyIn7nnXA==}
 
   embla-carousel-autoplay@8.5.2:
     resolution: {integrity: sha512-27emJ0px3q/c0kCHCjwRrEbYcyYUPfGO3g5IBWF1i7714TTzE6L9P81V6PHLoSMAKJ1aHoT2e7YFOsuFKCbyag==}
@@ -9341,11 +9329,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   send@0.19.0:
     resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
@@ -9785,11 +9768,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  terser@5.39.2:
-    resolution: {integrity: sha512-yEPUmWve+VA78bI71BW70Dh0TuV4HHd+I5SHOAfS1+QBOmvmCiiffgjR8ryyEd3KIfvPGFqoADt8LdQ6XpXIvg==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
@@ -10546,8 +10524,8 @@ packages:
   zen-observable@0.8.15:
     resolution: {integrity: sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==}
 
-  zod@3.24.4:
-    resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==}
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
 
   zustand@4.5.6:
     resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
@@ -10651,7 +10629,7 @@ snapshots:
       '@babel/traverse': 7.27.1
       '@babel/types': 7.27.1
       convert-source-map: 2.0.0
-      debug: 4.4.1
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -10735,7 +10713,7 @@ snapshots:
       '@babel/core': 7.26.10
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
-      debug: 4.4.1
+      debug: 4.4.0
       lodash.debounce: 4.0.8
       resolve: 1.22.10
     transitivePeerDependencies:
@@ -11673,7 +11651,7 @@ snapshots:
       '@babel/parser': 7.27.2
       '@babel/template': 7.27.2
       '@babel/types': 7.27.1
-      debug: 4.4.1
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -11685,7 +11663,7 @@ snapshots:
       '@babel/parser': 7.27.2
       '@babel/template': 7.27.2
       '@babel/types': 7.27.1
-      debug: 4.4.1
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -11770,7 +11748,7 @@ snapshots:
   '@commitlint/is-ignored@19.8.0':
     dependencies:
       '@commitlint/types': 19.8.0
-      semver: 7.7.2
+      semver: 7.7.1
 
   '@commitlint/lint@19.8.0':
     dependencies:
@@ -12055,12 +12033,12 @@ snapshots:
   '@eslint/config-array@0.20.0':
     dependencies:
       '@eslint/object-schema': 2.1.6
-      debug: 4.4.1
+      debug: 4.4.0
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.2.2': {}
+  '@eslint/config-helpers@0.2.1': {}
 
   '@eslint/core@0.14.0':
     dependencies:
@@ -12126,7 +12104,7 @@ snapshots:
       ci-info: 3.9.0
       compression: 1.8.0
       connect: 3.7.0
-      debug: 4.4.1
+      debug: 4.4.0
       env-editor: 0.4.2
       fast-glob: 3.3.3
       form-data: 3.0.3
@@ -12153,7 +12131,7 @@ snapshots:
       resolve: 1.22.10
       resolve-from: 5.0.0
       resolve.exports: 2.0.3
-      semver: 7.7.2
+      semver: 7.7.1
       send: 0.19.0
       slugify: 1.6.6
       source-map-support: 0.5.21
@@ -12186,11 +12164,11 @@ snapshots:
       '@expo/plist': 0.2.2
       '@expo/sdk-runtime-versions': 1.0.0
       chalk: 4.1.2
-      debug: 4.4.1
+      debug: 4.4.0
       getenv: 1.0.0
       glob: 10.4.5
       resolve-from: 5.0.0
-      semver: 7.7.2
+      semver: 7.7.1
       slash: 3.0.0
       slugify: 1.6.6
       xcode: 3.0.1
@@ -12212,7 +12190,7 @@ snapshots:
       require-from-string: 2.0.2
       resolve-from: 5.0.0
       resolve-workspace-root: 2.0.0
-      semver: 7.7.2
+      semver: 7.7.1
       slugify: 1.6.6
       sucrase: 3.35.0
     transitivePeerDependencies:
@@ -12238,7 +12216,7 @@ snapshots:
   '@expo/env@0.4.2':
     dependencies:
       chalk: 4.1.2
-      debug: 4.4.1
+      debug: 4.4.0
       dotenv: 16.4.7
       dotenv-expand: 11.0.7
       getenv: 1.0.0
@@ -12250,13 +12228,13 @@ snapshots:
       '@expo/spawn-async': 1.7.2
       arg: 5.0.2
       chalk: 4.1.2
-      debug: 4.4.1
+      debug: 4.4.0
       find-up: 5.0.0
       getenv: 1.0.0
       minimatch: 3.1.2
       p-limit: 3.1.0
       resolve-from: 5.0.0
-      semver: 7.7.2
+      semver: 7.7.1
     transitivePeerDependencies:
       - supports-color
 
@@ -12269,7 +12247,7 @@ snapshots:
       jimp-compact: 0.16.1
       parse-png: 2.1.0
       resolve-from: 5.0.0
-      semver: 7.7.2
+      semver: 7.7.1
       temp-dir: 2.0.0
       unique-string: 2.0.0
 
@@ -12290,7 +12268,7 @@ snapshots:
       '@expo/json-file': 9.0.2
       '@expo/spawn-async': 1.7.2
       chalk: 4.1.2
-      debug: 4.4.1
+      debug: 4.4.0
       fs-extra: 9.1.0
       getenv: 1.0.0
       glob: 10.4.5
@@ -12340,10 +12318,10 @@ snapshots:
       '@expo/image-utils': 0.6.5
       '@expo/json-file': 9.0.2
       '@react-native/normalize-colors': 0.76.9
-      debug: 4.4.1
+      debug: 4.4.0
       fs-extra: 9.1.0
       resolve-from: 5.0.0
-      semver: 7.7.2
+      semver: 7.7.1
       xml2js: 0.6.0
     transitivePeerDependencies:
       - supports-color
@@ -12365,7 +12343,7 @@ snapshots:
   '@expo/server@0.5.3':
     dependencies:
       abort-controller: 3.0.0
-      debug: 4.4.1
+      debug: 4.4.0
       source-map-support: 0.5.21
       undici: 6.21.2
     transitivePeerDependencies:
@@ -12451,7 +12429,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.1': {}
 
-  '@humanwhocodes/retry@0.4.3': {}
+  '@humanwhocodes/retry@0.4.2': {}
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -12490,14 +12468,14 @@ snapshots:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 22.15.18
+      '@types/node': 22.15.21
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.9.0
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@22.15.18)
+      jest-config: 29.7.0(@types/node@22.15.21)
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -12566,7 +12544,7 @@ snapshots:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.25
-      '@types/node': 22.15.18
+      '@types/node': 22.15.21
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
@@ -12649,12 +12627,12 @@ snapshots:
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       glob: 10.4.5
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.7.3)
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       typescript: 5.7.3
 
@@ -12763,7 +12741,7 @@ snapshots:
 
   '@npmcli/fs@3.1.1':
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.1
 
   '@number-flow/react@0.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -13498,7 +13476,7 @@ snapshots:
       node-fetch: 2.7.0
       open: 6.4.0
       ora: 5.4.1
-      semver: 7.7.2
+      semver: 7.7.1
       shell-quote: 1.8.2
       sudo-prompt: 9.2.1
     transitivePeerDependencies:
@@ -13637,7 +13615,7 @@ snapshots:
 
   '@react-native/codegen@0.76.6(@babel/preset-env@7.26.9(@babel/core@7.26.10))':
     dependencies:
-      '@babel/parser': 7.27.0
+      '@babel/parser': 7.27.2
       '@babel/preset-env': 7.26.9(@babel/core@7.26.10)
       glob: 7.2.3
       hermes-parser: 0.23.1
@@ -13698,7 +13676,7 @@ snapshots:
       metro-core: 0.81.3
       node-fetch: 2.7.0
       readline: 1.3.0
-      semver: 7.7.2
+      semver: 7.7.1
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/preset-env'
@@ -13793,16 +13771,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@react-native/virtualized-lists@0.76.6(@types/react@18.3.18)(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      invariant: 2.2.4
-      nullthrows: 1.1.1
-      react: 18.3.1
-      react-native: 0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.18
-    optional: true
-
   '@react-native/virtualized-lists@0.76.9(@types/react@18.3.18)(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
     dependencies:
       invariant: 2.2.4
@@ -14362,13 +14330,13 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.6.14(storybook@8.6.14(prettier@3.5.2))(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))':
+  '@storybook/builder-vite@8.6.14(storybook@8.6.14(prettier@3.5.2))(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.5.2))
       browser-assert: 1.2.1
       storybook: 8.6.14(prettier@3.5.2)
       ts-dedent: 2.2.0
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
 
   '@storybook/components@8.6.14(storybook@8.6.14(prettier@2.8.8))':
     dependencies:
@@ -14396,7 +14364,7 @@ snapshots:
       jsdoc-type-pratt-parser: 4.1.0
       process: 0.11.10
       recast: 0.23.11
-      semver: 7.7.2
+      semver: 7.7.1
       util: 0.12.5
       ws: 8.18.1
     optionalDependencies:
@@ -14417,7 +14385,7 @@ snapshots:
       jsdoc-type-pratt-parser: 4.1.0
       process: 0.11.10
       recast: 0.23.11
-      semver: 7.7.2
+      semver: 7.7.1
       util: 0.12.5
       ws: 8.18.1
     optionalDependencies:
@@ -14438,7 +14406,7 @@ snapshots:
       jsdoc-type-pratt-parser: 4.1.0
       process: 0.11.10
       recast: 0.23.11
-      semver: 7.7.2
+      semver: 7.7.1
       util: 0.12.5
       ws: 8.18.1
     optionalDependencies:
@@ -14578,11 +14546,11 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@8.6.14(prettier@3.5.2))(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))':
+  '@storybook/react-vite@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@8.6.14(prettier@3.5.2))(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      '@storybook/builder-vite': 8.6.14(storybook@8.6.14(prettier@3.5.2))(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))
+      '@storybook/builder-vite': 8.6.14(storybook@8.6.14(prettier@3.5.2))(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
       '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.5.2))(typescript@5.7.3)
       find-up: 5.0.0
       magic-string: 0.30.17
@@ -14592,7 +14560,7 @@ snapshots:
       resolve: 1.22.10
       storybook: 8.6.14(prettier@3.5.2)
       tsconfig-paths: 4.2.0
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
     optionalDependencies:
       '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.5.2))
     transitivePeerDependencies:
@@ -14903,7 +14871,7 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react-native@12.9.0(jest@29.7.0(@types/node@22.15.18))(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react-native@12.9.0(jest@29.7.0(@types/node@22.15.21))(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       jest-matcher-utils: 29.7.0
       pretty-format: 29.7.0
@@ -14912,7 +14880,7 @@ snapshots:
       react-test-renderer: 18.3.1(react@18.3.1)
       redent: 3.0.0
     optionalDependencies:
-      jest: 29.7.0(@types/node@22.15.18)
+      jest: 29.7.0(@types/node@22.15.21)
 
   '@testing-library/react@16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -15274,10 +15242,6 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
-  '@types/node@22.15.18':
-    dependencies:
-      undici-types: 6.21.0
-
   '@types/node@22.15.21':
     dependencies:
       undici-types: 6.21.0
@@ -15288,34 +15252,19 @@ snapshots:
     dependencies:
       '@types/react': 18.3.18
 
-  '@types/react-native@0.73.0(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1)':
-    dependencies:
-      react-native: 0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@babel/preset-env'
-      - '@react-native-community/cli-server-api'
-      - '@types/react'
-      - bufferutil
-      - encoding
-      - react
-      - supports-color
-      - utf-8-validate
-
   '@types/react-native@0.73.0(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      react-native: 0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1)
+      react-native: 0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1)
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/preset-env'
-      - '@react-native-community/cli-server-api'
+      - '@react-native-community/cli'
       - '@types/react'
       - bufferutil
       - encoding
       - react
       - supports-color
       - utf-8-validate
-    optional: true
 
   '@types/react@18.3.18':
     dependencies:
@@ -15374,7 +15323,7 @@ snapshots:
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.7.3)
       '@typescript-eslint/visitor-keys': 8.32.1
-      debug: 4.4.1
+      debug: 4.4.0
       eslint: 9.27.0(jiti@2.4.2)
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -15394,7 +15343,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.7.3)
       '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.7.3)
-      debug: 4.4.1
+      debug: 4.4.0
       eslint: 9.27.0(jiti@2.4.2)
       ts-api-utils: 2.1.0(typescript@5.7.3)
       typescript: 5.7.3
@@ -15409,11 +15358,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.28.0
       '@typescript-eslint/visitor-keys': 8.28.0
-      debug: 4.4.1
+      debug: 4.4.0
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.1
       ts-api-utils: 2.1.0(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -15423,11 +15372,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.28.0
       '@typescript-eslint/visitor-keys': 8.28.0
-      debug: 4.4.1
+      debug: 4.4.0
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.1
       ts-api-utils: 2.1.0(typescript@5.8.2)
       typescript: 5.8.2
     transitivePeerDependencies:
@@ -15437,11 +15386,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/visitor-keys': 8.32.1
-      debug: 4.4.1
+      debug: 4.4.0
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.1
       ts-api-utils: 2.1.0(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -15502,14 +15451,14 @@ snapshots:
       '@urql/core': 5.1.1
       wonka: 6.3.5
 
-  '@vitejs/plugin-react@4.3.4(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))':
+  '@vitejs/plugin-react@4.3.4(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@babel/core': 7.26.10
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -15527,13 +15476,13 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.7(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))':
+  '@vitest/mocker@3.0.7(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.0.7
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -15599,7 +15548,7 @@ snapshots:
 
   '@vue/compiler-core@3.5.13':
     dependencies:
-      '@babel/parser': 7.27.2
+      '@babel/parser': 7.27.0
       '@vue/shared': 3.5.13
       entities: 4.5.0
       estree-walker: 2.0.2
@@ -16015,8 +15964,8 @@ snapshots:
 
   babel-plugin-jest-hoist@29.6.3:
     dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.27.1
+      '@babel/template': 7.27.0
+      '@babel/types': 7.27.0
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.20.7
 
@@ -16168,8 +16117,8 @@ snapshots:
 
   browserslist@4.24.5:
     dependencies:
-      caniuse-lite: 1.0.30001718
-      electron-to-chromium: 1.5.155
+      caniuse-lite: 1.0.30001717
+      electron-to-chromium: 1.5.150
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.5)
 
@@ -16263,7 +16212,7 @@ snapshots:
 
   caniuse-lite@1.0.30001707: {}
 
-  caniuse-lite@1.0.30001718: {}
+  caniuse-lite@1.0.30001717: {}
 
   canvas-confetti@1.9.3: {}
 
@@ -16585,13 +16534,13 @@ snapshots:
       - supports-color
       - ts-node
 
-  create-jest@29.7.0(@types/node@22.15.18):
+  create-jest@29.7.0(@types/node@22.15.21):
     dependencies:
       '@jest/types': 29.6.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@22.15.18)
+      jest-config: 29.7.0(@types/node@22.15.21)
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -16770,10 +16719,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  debug@4.4.1:
-    dependencies:
-      ms: 2.1.3
-
   decamelize@1.2.0: {}
 
   decimal.js-light@2.5.1: {}
@@ -16947,7 +16892,7 @@ snapshots:
 
   electron-to-chromium@1.5.123: {}
 
-  electron-to-chromium@1.5.155: {}
+  electron-to-chromium@1.5.150: {}
 
   embla-carousel-autoplay@8.5.2(embla-carousel@8.6.0):
     dependencies:
@@ -17127,7 +17072,7 @@ snapshots:
 
   esbuild-register@3.6.0(esbuild@0.25.4):
     dependencies:
-      debug: 4.4.1
+      debug: 4.4.0
       esbuild: 0.25.4
     transitivePeerDependencies:
       - supports-color
@@ -17267,20 +17212,20 @@ snapshots:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.4.2))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.20.0
-      '@eslint/config-helpers': 0.2.2
+      '@eslint/config-helpers': 0.2.1
       '@eslint/core': 0.14.0
       '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.27.0
       '@eslint/plugin-kit': 0.3.1
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
+      '@humanwhocodes/retry': 0.4.2
       '@types/estree': 1.0.7
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.1
+      debug: 4.4.0
       escape-string-regexp: 4.0.0
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -18033,7 +17978,7 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.3
-      debug: 4.4.1
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -18067,7 +18012,7 @@ snapshots:
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.3
-      debug: 4.4.1
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -18366,7 +18311,7 @@ snapshots:
       '@babel/parser': 7.27.2
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
-      semver: 7.7.2
+      semver: 7.7.1
     transitivePeerDependencies:
       - supports-color
 
@@ -18387,7 +18332,7 @@ snapshots:
 
   istanbul-lib-source-maps@4.0.1:
     dependencies:
-      debug: 4.4.1
+      debug: 4.4.0
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -18464,16 +18409,16 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-cli@29.7.0(@types/node@22.15.18):
+  jest-cli@29.7.0(@types/node@22.15.21):
     dependencies:
       '@jest/core': 29.7.0
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@22.15.18)
+      create-jest: 29.7.0(@types/node@22.15.21)
       exit: 0.1.2
       import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@22.15.18)
+      jest-config: 29.7.0(@types/node@22.15.21)
       jest-util: 29.7.0
       jest-validate: 29.7.0
       yargs: 17.7.2
@@ -18513,7 +18458,7 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-config@29.7.0(@types/node@22.15.18):
+  jest-config@29.7.0(@types/node@22.15.21):
     dependencies:
       '@babel/core': 7.26.10
       '@jest/test-sequencer': 29.7.0
@@ -18538,7 +18483,7 @@ snapshots:
       slash: 3.0.0
       strip-json-comments: 3.1.1
     optionalDependencies:
-      '@types/node': 22.15.18
+      '@types/node': 22.15.21
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -18761,7 +18706,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.7.2
+      semver: 7.7.1
     transitivePeerDependencies:
       - supports-color
 
@@ -18830,12 +18775,12 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest@29.7.0(@types/node@22.15.18):
+  jest@29.7.0(@types/node@22.15.21):
     dependencies:
       '@jest/core': 29.7.0
       '@jest/types': 29.6.3
       import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.15.18)
+      jest-cli: 29.7.0(@types/node@22.15.21)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -19285,7 +19230,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.1
 
   makeerror@1.0.12:
     dependencies:
@@ -19709,7 +19654,7 @@ snapshots:
     dependencies:
       hosted-git-info: 7.0.2
       proc-log: 4.2.0
-      semver: 7.7.2
+      semver: 7.7.1
       validate-npm-package-name: 5.0.1
 
   npm-run-all@4.1.5:
@@ -20469,7 +20414,7 @@ snapshots:
       '@babel/helper-module-imports': 7.25.9
       '@babel/traverse': 7.27.0
       '@babel/types': 7.27.0
-      debug: 4.4.1
+      debug: 4.4.0
       lightningcss: 1.29.2
       react: 18.3.1
       react-native: 0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)(@types/react@18.3.18)(react@18.3.1)
@@ -20486,7 +20431,7 @@ snapshots:
       '@babel/helper-module-imports': 7.25.9
       '@babel/traverse': 7.27.0
       '@babel/types': 7.27.0
-      debug: 4.4.1
+      debug: 4.4.0
       lightningcss: 1.29.2
       react: 18.3.1
       react-native: 0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1)
@@ -20684,59 +20629,6 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1):
-    dependencies:
-      '@jest/create-cache-key-function': 29.7.0
-      '@react-native/assets-registry': 0.76.6
-      '@react-native/codegen': 0.76.6(@babel/preset-env@7.26.9(@babel/core@7.26.10))
-      '@react-native/community-cli-plugin': 0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@react-native-community/cli-server-api@13.6.9)
-      '@react-native/gradle-plugin': 0.76.6
-      '@react-native/js-polyfills': 0.76.6
-      '@react-native/normalize-colors': 0.76.6
-      '@react-native/virtualized-lists': 0.76.6(@types/react@18.3.18)(react-native@0.76.6(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)
-      abort-controller: 3.0.0
-      anser: 1.4.10
-      ansi-regex: 5.0.1
-      babel-jest: 29.7.0(@babel/core@7.26.10)
-      babel-plugin-syntax-hermes-parser: 0.23.1
-      base64-js: 1.5.1
-      chalk: 4.1.2
-      commander: 12.1.0
-      event-target-shim: 5.0.1
-      flow-enums-runtime: 0.0.6
-      glob: 7.2.3
-      invariant: 2.2.4
-      jest-environment-node: 29.7.0
-      jsc-android: 250231.0.0
-      memoize-one: 5.2.1
-      metro-runtime: 0.81.3
-      metro-source-map: 0.81.3
-      mkdirp: 0.5.6
-      nullthrows: 1.1.1
-      pretty-format: 29.7.0
-      promise: 8.3.0
-      react: 18.3.1
-      react-devtools-core: 5.3.2
-      react-refresh: 0.14.2
-      regenerator-runtime: 0.13.11
-      scheduler: 0.24.0-canary-efb381bbf-20230505
-      semver: 7.7.1
-      stacktrace-parser: 0.1.11
-      whatwg-fetch: 3.6.20
-      ws: 6.2.3
-      yargs: 17.7.2
-    optionalDependencies:
-      '@types/react': 18.3.18
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@babel/preset-env'
-      - '@react-native-community/cli-server-api'
-      - bufferutil
-      - encoding
-      - supports-color
-      - utf-8-validate
-    optional: true
-
   react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
@@ -21195,8 +21087,6 @@ snapshots:
 
   semver@7.7.1: {}
 
-  semver@7.7.2: {}
-
   send@0.19.0:
     dependencies:
       debug: 2.6.9
@@ -21737,7 +21627,7 @@ snapshots:
       jest-worker: 27.5.1
       schema-utils: 4.3.2
       serialize-javascript: 6.0.2
-      terser: 5.39.2
+      terser: 5.39.0
       webpack: 5.99.5(esbuild@0.25.4)
     optionalDependencies:
       esbuild: 0.25.4
@@ -21749,13 +21639,6 @@ snapshots:
       commander: 2.20.3
       source-map-support: 0.5.21
 
-  terser@5.39.2:
-    dependencies:
-      '@jridgewell/source-map': 0.3.6
-      acorn: 8.14.1
-      commander: 2.20.3
-      source-map-support: 0.5.21
-
   test-exclude@6.0.0:
     dependencies:
       '@istanbuljs/schema': 0.1.3
@@ -22149,13 +22032,13 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-node@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0):
+  vite-node@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.4.1
+      debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -22170,7 +22053,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-dts@4.3.0(@types/node@22.13.9)(rollup@4.40.2)(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)):
+  vite-plugin-dts@4.3.0(@types/node@22.13.9)(rollup@4.40.2)(typescript@5.7.3)(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@microsoft/api-extractor': 7.52.2(@types/node@22.13.9)
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
@@ -22183,20 +22066,20 @@ snapshots:
       magic-string: 0.30.17
       typescript: 5.7.3
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-lib-inject-css@2.2.1(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)):
+  vite-plugin-lib-inject-css@2.2.1(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)):
     dependencies:
       '@ast-grep/napi': 0.32.3
       magic-string: 0.30.17
       picocolors: 1.1.1
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
 
-  vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0):
+  vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -22209,13 +22092,13 @@ snapshots:
       fsevents: 2.3.3
       jiti: 2.4.2
       lightningcss: 1.29.2
-      terser: 5.39.2
+      terser: 5.39.0
       yaml: 2.7.0
 
-  vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0):
+  vitest@3.0.7(@types/node@22.13.9)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0):
     dependencies:
       '@vitest/expect': 3.0.7
-      '@vitest/mocker': 3.0.7(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0))
+      '@vitest/mocker': 3.0.7(vite@6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
       '@vitest/pretty-format': 3.0.7
       '@vitest/runner': 3.0.7
       '@vitest/snapshot': 3.0.7
@@ -22231,8 +22114,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.2)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.9)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.13.9
@@ -22275,7 +22158,7 @@ snapshots:
     dependencies:
       chalk: 2.4.2
       commander: 3.0.2
-      debug: 4.4.1
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -22556,7 +22439,7 @@ snapshots:
 
   zen-observable@0.8.15: {}
 
-  zod@3.24.4: {}
+  zod@3.24.1: {}
 
   zustand@4.5.6(@types/react@18.3.18)(react@18.3.1):
     dependencies: