From d5016793dbd78068db981a2934baa7afe44fcb54 Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Thu, 18 Jul 2024 14:42:01 +0100
Subject: [PATCH] feat(releases): sorting release overview table (#7159)

* feat(releases): sorting releases table with new Table component

* fix(releases): fixing sanity require for DocumentPerspectiveMenu.test

* refactor(releases): clarifying generic names; minor tidies to naming

* refactor(releases): default table data type of unknown; rename of some variables; improved types for TableProvider

* refactor(releases): default table data type of unknown; rename of some variables; improved types for TableProvider
---
 .../core/releases/ReleasesTableContext.ts     |  34 +++
 packages/sanity/src/_singletons/index.ts      |   1 +
 .../core/bundles/components/BundleBadge.tsx   |  14 +-
 .../BundleMenuButton/BundleMenuButton.tsx     |   1 +
 .../__tests__/BundleMenuButton.test.tsx       |   4 +-
 .../ReleasesTable/ReleaseHeader.tsx           |  73 -------
 .../components/ReleasesTable/ReleaseRow.tsx   |  94 ---------
 .../ReleasesTable/ReleasesTable.tsx           |  65 ------
 .../__tests__/ReleasesTable.test.tsx          | 155 --------------
 .../core/releases/components/Table/Table.tsx  | 197 ++++++++++++++++++
 .../releases/components/Table/TableHeader.tsx |  77 +++++++
 .../components/Table/TableProvider.tsx        |  24 +++
 .../core/releases/components/Table/types.ts   |  27 +++
 .../contexts/BundlesMetadataProvider.tsx      |   7 +-
 .../src/core/releases/tool/ReleasesTool.tsx   |   2 +-
 .../releases/tool/detail/ReleaseDetail.tsx    |  31 ++-
 ...ReleaseOverview.tsx => ReleaseSummary.tsx} |  90 ++++++--
 .../__tests__/ReleaseReview.test.tsx          |  21 +-
 .../detail/documentTable/DocumentActions.tsx  |  23 +-
 .../detail/documentTable/DocumentHeader.tsx   | 124 -----------
 .../tool/detail/documentTable/DocumentRow.tsx | 156 --------------
 .../detail/documentTable/DocumentTable.tsx    |  76 -------
 .../documentTable/DocumentTableColumnDefs.tsx | 130 ++++++++++++
 .../tool/detail/documentTable/index.ts        |   1 -
 .../tool/{ => overview}/ReleasesOverview.tsx  | 120 ++++++-----
 .../overview/ReleasesOverviewColumnDefs.tsx   | 125 +++++++++++
 .../__tests__/ReleasesOverview.test.tsx       | 113 ++++++++--
 27 files changed, 914 insertions(+), 871 deletions(-)
 create mode 100644 packages/sanity/src/_singletons/core/releases/ReleasesTableContext.ts
 delete mode 100644 packages/sanity/src/core/releases/components/ReleasesTable/ReleaseHeader.tsx
 delete mode 100644 packages/sanity/src/core/releases/components/ReleasesTable/ReleaseRow.tsx
 delete mode 100644 packages/sanity/src/core/releases/components/ReleasesTable/ReleasesTable.tsx
 delete mode 100644 packages/sanity/src/core/releases/components/ReleasesTable/__tests__/ReleasesTable.test.tsx
 create mode 100644 packages/sanity/src/core/releases/components/Table/Table.tsx
 create mode 100644 packages/sanity/src/core/releases/components/Table/TableHeader.tsx
 create mode 100644 packages/sanity/src/core/releases/components/Table/TableProvider.tsx
 create mode 100644 packages/sanity/src/core/releases/components/Table/types.ts
 rename packages/sanity/src/core/releases/tool/detail/{ReleaseOverview.tsx => ReleaseSummary.tsx} (56%)
 rename packages/sanity/src/core/releases/tool/{ => detail}/__tests__/ReleaseReview.test.tsx (87%)
 delete mode 100644 packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx
 delete mode 100644 packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx
 delete mode 100644 packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx
 create mode 100644 packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTableColumnDefs.tsx
 delete mode 100644 packages/sanity/src/core/releases/tool/detail/documentTable/index.ts
 rename packages/sanity/src/core/releases/tool/{ => overview}/ReleasesOverview.tsx (58%)
 create mode 100644 packages/sanity/src/core/releases/tool/overview/ReleasesOverviewColumnDefs.tsx
 rename packages/sanity/src/core/releases/tool/{ => overview}/__tests__/ReleasesOverview.test.tsx (53%)

diff --git a/packages/sanity/src/_singletons/core/releases/ReleasesTableContext.ts b/packages/sanity/src/_singletons/core/releases/ReleasesTableContext.ts
new file mode 100644
index 000000000000..919100555af1
--- /dev/null
+++ b/packages/sanity/src/_singletons/core/releases/ReleasesTableContext.ts
@@ -0,0 +1,34 @@
+import {createContext, useContext} from 'react'
+
+/**
+ * @internal
+ */
+export interface TableContextValue {
+  searchTerm: string | null
+  setSearchTerm: (searchTerm: string) => void
+  sort: {column: string; direction: 'asc' | 'desc'} | null
+  setSearchColumn: (column: string) => void
+}
+
+const DEFAULT_TABLE_CONTEXT: TableContextValue = {
+  searchTerm: null,
+  setSearchTerm: () => null,
+  sort: null,
+  setSearchColumn: () => null,
+}
+
+/**
+ * @internal
+ */
+export const TableContext = createContext<TableContextValue | null>(null)
+
+/**
+ * @internal
+ */
+export const useTableContext = (): TableContextValue => {
+  const context = useContext(TableContext)
+  if (!context) {
+    throw new Error('useTableContext must be used within a TableProvider')
+  }
+  return context || DEFAULT_TABLE_CONTEXT
+}
diff --git a/packages/sanity/src/_singletons/index.ts b/packages/sanity/src/_singletons/index.ts
index 95443cbe1f0d..550d89eb50e2 100644
--- a/packages/sanity/src/_singletons/index.ts
+++ b/packages/sanity/src/_singletons/index.ts
@@ -28,6 +28,7 @@ export * from './core/i18n/LocaleContext'
 export * from './core/presence/FormFieldPresenceContext'
 export * from './core/presence/overlay/PresenceTrackerContexts'
 export * from './core/releases/BundlesMetadataContext'
+export * from './core/releases/ReleasesTableContext'
 export * from './core/schedulePublishing/DocumentActionPropsContext'
 export * from './core/schedulePublishing/tool/ScheduledPublishingEnabledContext'
 export * from './core/schedulePublishing/tool/SchedulePublishingUpsellContext'
diff --git a/packages/sanity/src/core/bundles/components/BundleBadge.tsx b/packages/sanity/src/core/bundles/components/BundleBadge.tsx
index d2926cc58dd1..bcb6a3f763c2 100644
--- a/packages/sanity/src/core/bundles/components/BundleBadge.tsx
+++ b/packages/sanity/src/core/bundles/components/BundleBadge.tsx
@@ -1,5 +1,5 @@
-import {hues} from '@sanity/color'
-import {ChevronDownIcon, Icon} from '@sanity/icons'
+import {type ColorHueKey, hues} from '@sanity/color'
+import {ChevronDownIcon, Icon, type IconSymbol} from '@sanity/icons'
 // eslint-disable-next-line camelcase
 import {Box, Flex, rgba, Text, useTheme_v2} from '@sanity/ui'
 import {type CSSProperties} from 'react'
@@ -10,7 +10,15 @@ import {type BundleDocument} from '../../store/bundles/types'
  * @internal
  */
 export function BundleBadge(
-  props: Partial<BundleDocument> & {openButton?: boolean; padding?: number; title?: string},
+  props: Partial<
+    BundleDocument & {
+      icon: IconSymbol
+      hue: ColorHueKey
+      openButton: boolean
+      padding: number
+      title: string
+    }
+  >,
 ): JSX.Element {
   const {hue = 'gray', icon, openButton, padding = 3, title} = props
   const {color} = useTheme_v2()
diff --git a/packages/sanity/src/core/releases/components/BundleMenuButton/BundleMenuButton.tsx b/packages/sanity/src/core/releases/components/BundleMenuButton/BundleMenuButton.tsx
index 4f6bd007e3ad..6306151daf43 100644
--- a/packages/sanity/src/core/releases/components/BundleMenuButton/BundleMenuButton.tsx
+++ b/packages/sanity/src/core/releases/components/BundleMenuButton/BundleMenuButton.tsx
@@ -98,6 +98,7 @@ export const BundleMenuButton = ({bundle, documentCount}: Props) => {
           padding={bundleHasDocuments}
           footer={{
             confirmButton: {
+              text: 'Delete',
               tone: 'default',
               onClick: handleOnDeleteBundle,
               loading: discardStatus === 'discarding',
diff --git a/packages/sanity/src/core/releases/components/BundleMenuButton/__tests__/BundleMenuButton.test.tsx b/packages/sanity/src/core/releases/components/BundleMenuButton/__tests__/BundleMenuButton.test.tsx
index 79241eab7a2f..55a58497a121 100644
--- a/packages/sanity/src/core/releases/components/BundleMenuButton/__tests__/BundleMenuButton.test.tsx
+++ b/packages/sanity/src/core/releases/components/BundleMenuButton/__tests__/BundleMenuButton.test.tsx
@@ -116,7 +116,7 @@ describe('BundleMenuButton', () => {
     screen.getByText('This will also delete 2 document versions', {exact: false})
 
     await act(() => {
-      fireEvent.click(screen.getByText('Confirm'))
+      fireEvent.click(screen.getByText('Delete'))
     })
 
     expect(useBundleOperations().deleteBundle).toHaveBeenCalledWith(activeBundle)
@@ -149,7 +149,7 @@ describe('BundleMenuButton', () => {
     expect(screen.queryByTestId('confirm-delete-body')).toBeNull()
 
     await act(() => {
-      fireEvent.click(screen.getByText('Confirm'))
+      fireEvent.click(screen.getByText('Delete'))
     })
 
     expect(useBundleOperations().deleteBundle).toHaveBeenCalledWith(activeEmptyBundle)
diff --git a/packages/sanity/src/core/releases/components/ReleasesTable/ReleaseHeader.tsx b/packages/sanity/src/core/releases/components/ReleasesTable/ReleaseHeader.tsx
deleted file mode 100644
index f2189840dee0..000000000000
--- a/packages/sanity/src/core/releases/components/ReleasesTable/ReleaseHeader.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
-
-/**
- * @internal
- */
-export interface ReleaseHeaderProps {
-  searchDisabled?: boolean
-  searchTerm?: string
-  setSearchTerm: (value?: string) => void
-}
-
-export function ReleaseHeader({searchDisabled, searchTerm, setSearchTerm}: ReleaseHeaderProps) {
-  return (
-    <Card as="thead" radius={3}>
-      <Flex as="tr">
-        {/* Title */}
-        <Stack as="th" flex={1} paddingY={2} paddingRight={3}>
-          <TextInput
-            border={false}
-            fontSize={1}
-            icon={SearchIcon}
-            placeholder="Search releases"
-            radius={3}
-            value={searchTerm}
-            disabled={searchDisabled}
-            onChange={(event) => setSearchTerm(event.currentTarget.value)}
-            onClear={() => setSearchTerm('')}
-            clearButton={!!searchTerm}
-          />
-        </Stack>
-        {/* Number of documents */}
-        <Flex as="th" paddingY={3} sizing="border" style={{width: 90}}>
-          <Box padding={2}>
-            <Text muted size={1} weight="medium">
-              Documents
-            </Text>
-          </Box>
-        </Flex>
-        {/* Created */}
-        <Flex as="th" paddingY={3} sizing="border" style={{width: 120}}>
-          <Button mode="bleed" padding={2} radius={3} space={1} text="Created" />
-        </Flex>
-        {/* Edited */}
-        <Flex as="th" paddingY={3} sizing="border" style={{width: 100}}>
-          <Button mode="bleed" padding={2} radius={3} space={1} text="Edited" />
-        </Flex>
-        {/* Published */}
-        <Flex
-          as="th"
-          align="center"
-          gap={1}
-          paddingX={1}
-          paddingY={0}
-          sizing="border"
-          style={{width: 100}}
-        >
-          <Button mode="bleed" padding={1} space={1} text="Published" />
-        </Flex>
-        {/* Actions */}
-        <Flex
-          align="center"
-          gap={1}
-          as="th"
-          paddingX={2}
-          paddingY={1}
-          sizing="border"
-          style={{width: 50}}
-        />
-      </Flex>
-    </Card>
-  )
-}
diff --git a/packages/sanity/src/core/releases/components/ReleasesTable/ReleaseRow.tsx b/packages/sanity/src/core/releases/components/ReleasesTable/ReleaseRow.tsx
deleted file mode 100644
index 384981fdbfff..000000000000
--- a/packages/sanity/src/core/releases/components/ReleasesTable/ReleaseRow.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
-import {useRouter} from 'sanity/router'
-
-import {BundleBadge} from '../../../bundles/components/BundleBadge'
-import {RelativeTime, UserAvatar} from '../../../components'
-import {BundleMenuButton} from '../BundleMenuButton/BundleMenuButton'
-import {type TableBundle} from './ReleasesTable'
-
-type ReleaseRowProps = {
-  bundle: TableBundle
-}
-
-export function ReleaseRow({bundle}: ReleaseRowProps) {
-  const {documentsMetadata} = bundle
-  const router = useRouter()
-
-  return (
-    <Card data-testid="bundle-row" as="tr" border radius={3} display="flex" margin={-1}>
-      {/* Title */}
-      <Box as="td" flex={1} padding={1}>
-        <Card
-          as="a"
-          // navigate to bundle detail
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={() => router.navigate({bundleSlug: bundle.slug})}
-          padding={2}
-          radius={2}
-        >
-          <Flex align="center" gap={2}>
-            <Box flex="none">
-              <BundleBadge hue={bundle.hue} icon={bundle.icon} />
-            </Box>
-            <Stack flex={1} space={2}>
-              <Flex align="center" gap={2}>
-                <Text size={1} weight="medium">
-                  {bundle.title}
-                </Text>
-              </Flex>
-            </Stack>
-          </Flex>
-        </Card>
-      </Box>
-      {/* # of documents */}
-      <Flex as="td" align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 90}}>
-        <Text muted size={1}>
-          {documentsMetadata.documentCount}
-        </Text>
-      </Flex>
-      {/* Created */}
-      <Flex
-        as="td"
-        align="center"
-        gap={2}
-        paddingX={2}
-        paddingY={3}
-        sizing="border"
-        style={{width: 120}}
-      >
-        {bundle.authorId && <UserAvatar size={0} user={bundle.authorId} />}
-        <Text muted size={1}>
-          <RelativeTime time={bundle._createdAt} useTemporalPhrase minimal />
-        </Text>
-      </Flex>
-      {/* Edited */}
-      <Flex
-        as="td"
-        align="center"
-        gap={2}
-        paddingX={2}
-        paddingY={3}
-        sizing="border"
-        style={{width: 100}}
-      >
-        {documentsMetadata.updatedAt && (
-          <Text muted size={1}>
-            <RelativeTime time={documentsMetadata.updatedAt} useTemporalPhrase minimal />
-          </Text>
-        )}
-      </Flex>
-      {/* Published */}
-      <Flex as="td" align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 100}}>
-        {!!bundle.publishedAt && (
-          <Text muted size={1}>
-            <RelativeTime time={bundle.publishedAt} />
-          </Text>
-        )}
-      </Flex>
-      {/* Actions */}
-      <Flex as="td" align="center" flex="none" padding={3}>
-        <BundleMenuButton bundle={bundle} documentCount={bundle.documentsMetadata.documentCount} />
-      </Flex>
-    </Card>
-  )
-}
diff --git a/packages/sanity/src/core/releases/components/ReleasesTable/ReleasesTable.tsx b/packages/sanity/src/core/releases/components/ReleasesTable/ReleasesTable.tsx
deleted file mode 100644
index 47bb26346655..000000000000
--- a/packages/sanity/src/core/releases/components/ReleasesTable/ReleasesTable.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {Card, Stack, Text} from '@sanity/ui'
-import {useMemo} from 'react'
-import {styled} from 'styled-components'
-
-import {type BundleDocument} from '../../../store/bundles/types'
-import {type BundlesMetadata} from '../../tool/useBundlesMetadata'
-import {ReleaseHeader, type ReleaseHeaderProps} from './ReleaseHeader'
-import {ReleaseRow} from './ReleaseRow'
-
-const RowStack = styled(Stack)({
-  '& > *:not(:first-child)': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    marginTop: -1,
-  },
-
-  '& > *:not(:last-child)': {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-})
-
-export interface TableBundle extends BundleDocument {
-  documentsMetadata: BundlesMetadata
-}
-
-interface ReleasesTableProps extends Omit<ReleaseHeaderProps, 'searchDisabled'> {
-  bundles: TableBundle[]
-}
-
-export function ReleasesTable({bundles, searchTerm, setSearchTerm}: ReleasesTableProps) {
-  const tableContent = useMemo(() => {
-    if (bundles.length === 0) {
-      return (
-        <Card
-          as="tr"
-          border
-          radius={3}
-          display="flex"
-          padding={4}
-          style={{
-            justifyContent: 'center',
-          }}
-        >
-          <Text as="td" muted size={1}>
-            No Releases
-          </Text>
-        </Card>
-      )
-    }
-
-    return bundles.map((bundle) => <ReleaseRow key={bundle.slug} bundle={bundle} />)
-  }, [bundles])
-
-  return (
-    <Stack as="table" space={1}>
-      <ReleaseHeader
-        searchDisabled={!searchTerm && !bundles.length}
-        searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
-      />
-      <RowStack as="tbody">{tableContent}</RowStack>
-    </Stack>
-  )
-}
diff --git a/packages/sanity/src/core/releases/components/ReleasesTable/__tests__/ReleasesTable.test.tsx b/packages/sanity/src/core/releases/components/ReleasesTable/__tests__/ReleasesTable.test.tsx
deleted file mode 100644
index ef638e5adcc1..000000000000
--- a/packages/sanity/src/core/releases/components/ReleasesTable/__tests__/ReleasesTable.test.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import {describe, expect, it, jest} from '@jest/globals'
-import {fireEvent, render, screen, waitFor, within} from '@testing-library/react'
-import {useRouter} from 'sanity/router'
-
-import {createTestProvider} from '../../../../../../test/testUtils/TestProvider'
-import {useBundleOperations} from '../../../../store/bundles/useBundleOperations'
-import {ReleasesTable, type TableBundle} from '../ReleasesTable'
-
-jest.mock('sanity/router', () => ({
-  ...(jest.requireActual('sanity/router') || {}),
-  useRouter: jest.fn().mockReturnValue({state: {bundleSlug: '123'}, navigate: jest.fn()}),
-}))
-
-jest.mock('../../../../store/bundles/useBundleOperations', () => ({
-  useBundleOperations: jest.fn().mockReturnValue({deleteBundle: jest.fn()}),
-}))
-
-const mockSetSearchTerm = jest.fn()
-
-const renderReleasesTable = async (bundles: TableBundle[]) => {
-  const wrapper = await createTestProvider()
-  return render(<ReleasesTable bundles={bundles} setSearchTerm={mockSetSearchTerm} />, {wrapper})
-}
-
-describe('ReleasesTable', () => {
-  it('should render the table headers', async () => {
-    await renderReleasesTable([])
-
-    screen.getByPlaceholderText('Search releases')
-    screen.getByText('Published')
-    screen.getByText('Edited')
-    screen.getByText('Created')
-  })
-
-  it('should display "No Releases" when there are no bundles', async () => {
-    await renderReleasesTable([])
-    screen.getByText('No Releases')
-  })
-
-  it('should render a list of bundles', async () => {
-    const bundles = [
-      {
-        title: 'Bundle 1',
-        slug: 'bundle-1',
-        _createdAt: new Date().toISOString(),
-        documentsMetadata: {
-          documentCount: 1,
-        },
-      },
-      {
-        title: 'Bundle 2',
-        slug: 'bundle-2',
-        _createdAt: new Date().toISOString(),
-        documentsMetadata: {
-          documentCount: 0,
-        },
-      },
-      {
-        title: 'Bundle 3',
-        slug: 'bundle-3',
-        _createdAt: new Date().toISOString(),
-        documentsMetadata: {
-          // 24 hours ago
-          updatedAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
-          documentCount: 3,
-        },
-      },
-    ] as TableBundle[]
-
-    await renderReleasesTable(bundles)
-
-    const bundleRows = screen.getAllByTestId('bundle-row')
-    expect(bundleRows).toHaveLength(bundles.length)
-    bundles.forEach((bundle, index) => {
-      within(bundleRows[index]).getByText(bundle.title)
-      within(bundleRows[index]).getByText(bundle.documentsMetadata.documentCount.toString())
-      within(bundleRows[index]).getByText('just now')
-      if (bundle.documentsMetadata.updatedAt) {
-        within(bundleRows[index]).getByText('yesterday')
-      }
-    })
-  })
-
-  it('should disable search when no bundles in table', async () => {
-    await renderReleasesTable([])
-
-    expect(screen.getByPlaceholderText('Search releases')).toBeDisabled()
-  })
-
-  it('should enable and trigger a search when there are bundles in the table', async () => {
-    await renderReleasesTable([
-      {
-        title: 'Bundle 1',
-        slug: 'bundle-1',
-        _createdAt: new Date().toISOString(),
-        documentsMetadata: {
-          documentCount: 0,
-        },
-      },
-    ] as TableBundle[])
-
-    const searchInput = screen.getByPlaceholderText('Search releases')
-    fireEvent.change(searchInput, {target: {value: 'Bundle 1'}})
-
-    expect(mockSetSearchTerm).toHaveBeenCalledWith('Bundle 1')
-  })
-
-  describe('A release row', () => {
-    it('should navigate to the release detail when clicked', async () => {
-      const bundles = [
-        {
-          _id: '123',
-          title: 'Bundle 1',
-          slug: 'bundle-1',
-          _createdAt: new Date().toISOString(),
-          documentsMetadata: {
-            documentCount: 1,
-          },
-        },
-      ] as TableBundle[]
-      await renderReleasesTable(bundles)
-
-      const bundleRow = screen.getAllByTestId('bundle-row')[0]
-      fireEvent.click(within(bundleRow).getByText('Bundle 1'))
-
-      expect(useRouter().navigate).toHaveBeenCalledWith({bundleSlug: 'bundle-1'})
-    })
-
-    it('should delete bundle when menu button is clicked', async () => {
-      const bundles = [
-        {
-          _id: '123',
-          title: 'Bundle 1',
-          slug: 'bundle-1',
-          _createdAt: new Date().toISOString(),
-          documentsMetadata: {
-            documentCount: 1,
-          },
-        },
-      ] as TableBundle[]
-      await renderReleasesTable(bundles)
-
-      const bundleRow = screen.getAllByTestId('bundle-row')[0]
-      fireEvent.click(within(bundleRow).getByLabelText('Release menu'))
-
-      fireEvent.click(screen.getByText('Delete'))
-      fireEvent.click(screen.getByText('Confirm'))
-
-      await waitFor(() => {
-        expect(useBundleOperations().deleteBundle).toHaveBeenCalledWith(bundles[0])
-        expect(useRouter().navigate).toHaveBeenCalledWith({bundleSlug: undefined})
-      })
-    })
-  })
-})
diff --git a/packages/sanity/src/core/releases/components/Table/Table.tsx b/packages/sanity/src/core/releases/components/Table/Table.tsx
new file mode 100644
index 000000000000..b80f62535870
--- /dev/null
+++ b/packages/sanity/src/core/releases/components/Table/Table.tsx
@@ -0,0 +1,197 @@
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {get} from 'lodash'
+import {Fragment, useMemo} from 'react'
+import {useTableContext} from 'sanity/_singletons'
+import {styled} from 'styled-components'
+
+import {LoadingBlock} from '../../../components'
+import {TableHeader} from './TableHeader'
+import {TableProvider} from './TableProvider'
+import {type Column} from './types'
+
+type RowDatum<TableData, AdditionalRowTableData> = AdditionalRowTableData extends undefined
+  ? TableData
+  : TableData & AdditionalRowTableData
+
+export interface TableProps<TableData, AdditionalRowTableData> {
+  columnDefs: Column<RowDatum<TableData, AdditionalRowTableData>>[]
+  searchFilter?: (data: TableData[], searchTerm: string) => TableData[]
+  Row?: ({
+    datum,
+    children,
+  }: {
+    datum: TableData
+    children: (rowData: TableData) => JSX.Element
+  }) => JSX.Element | null
+  data: TableData[]
+  emptyState: (() => JSX.Element) | string
+  loading?: boolean
+  rowId: keyof TableData
+  rowActions?: ({
+    datum,
+  }: {
+    datum: RowDatum<TableData, AdditionalRowTableData> | unknown
+  }) => JSX.Element
+}
+
+const RowStack = styled(Stack)({
+  '& > *:not(:first-child)': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    marginTop: -1,
+  },
+
+  '& > *:not(:last-child)': {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+})
+
+const TableInner = <TableData, AdditionalRowTableData>({
+  columnDefs,
+  data,
+  emptyState,
+  searchFilter,
+  Row,
+  rowId,
+  rowActions,
+  loading = false,
+}: TableProps<TableData, AdditionalRowTableData>) => {
+  const {searchTerm, sort} = useTableContext()
+
+  const filteredData = useMemo(() => {
+    const filteredResult = searchTerm && searchFilter ? searchFilter(data, searchTerm) : data
+    if (!sort) return filteredResult
+
+    return [...filteredResult].sort((a, b) => {
+      const parseDate = (dateString: unknown) =>
+        typeof dateString === 'string' ? Date.parse(dateString) : 0
+
+      const aDate = parseDate(get(a, sort.column))
+      const bDate = parseDate(get(b, sort.column))
+
+      const order = aDate - bDate
+      if (sort.direction === 'asc') return order
+      return -order
+    })
+  }, [data, searchFilter, searchTerm, sort])
+
+  const rowActionColumnDef: Column = useMemo(
+    () => ({
+      id: 'actions',
+      sorting: false,
+      width: 50,
+      header: ({headerProps: {id}}) => (
+        <Flex as="th" id={id} paddingY={3} sizing="border" style={{width: 50}}>
+          <Box padding={2}>
+            <Text muted size={1} weight="medium">
+              &nbsp;
+            </Text>
+          </Box>
+        </Flex>
+      ),
+      cell: ({datum, cellProps: {id}}) => (
+        <Flex as="td" id={id} align="center" flex="none" padding={3}>
+          {rowActions?.({datum})}
+        </Flex>
+      ),
+    }),
+    [rowActions],
+  )
+
+  const amalgamatedColumnDefs = useMemo(
+    () => (rowActions ? [...columnDefs, rowActionColumnDef] : columnDefs),
+    [columnDefs, rowActionColumnDef, rowActions],
+  )
+
+  const renderRow = useMemo(
+    () =>
+      function TableRow(datum: TableData | (TableData & AdditionalRowTableData)) {
+        return (
+          <Card
+            key={String(datum[rowId])}
+            data-testid="table-row"
+            as="tr"
+            border
+            radius={3}
+            display="flex"
+            margin={-1}
+          >
+            {amalgamatedColumnDefs.map(({cell: Cell, width, id, sorting = false}) => (
+              <Fragment key={String(id)}>
+                <Cell
+                  datum={datum as RowDatum<TableData, AdditionalRowTableData>}
+                  cellProps={{
+                    as: 'td',
+                    id: String(id),
+                    style: {width: width || undefined},
+                  }}
+                  sorting={sorting}
+                />
+              </Fragment>
+            ))}
+          </Card>
+        )
+      },
+    [amalgamatedColumnDefs, rowId],
+  )
+
+  const tableContent = useMemo(() => {
+    if (filteredData.length === 0) {
+      if (typeof emptyState === 'string') {
+        return (
+          <Card
+            as="tr"
+            border
+            radius={3}
+            display="flex"
+            padding={4}
+            style={{
+              justifyContent: 'center',
+            }}
+          >
+            <Text as="td" muted size={1}>
+              {emptyState}
+            </Text>
+          </Card>
+        )
+      }
+      return emptyState()
+    }
+
+    return filteredData.map((datum) => {
+      if (!Row) return renderRow(datum)
+      return (
+        <Row key={String(datum[rowId])} datum={datum}>
+          {renderRow}
+        </Row>
+      )
+    })
+  }, [Row, emptyState, filteredData, renderRow, rowId])
+
+  const headers = useMemo(
+    () => amalgamatedColumnDefs.map(({cell, ...header}) => ({...header, id: String(header.id)})),
+    [amalgamatedColumnDefs],
+  )
+
+  if (loading) {
+    return <LoadingBlock fill data-testid="table-loading" />
+  }
+
+  return (
+    <Stack as="table" space={1}>
+      <TableHeader headers={headers} searchDisabled={!searchTerm && !data.length} />
+      <RowStack as="tbody">{tableContent}</RowStack>
+    </Stack>
+  )
+}
+
+export const Table = <TableData, AdditionalRowTableData = undefined>(
+  props: TableProps<TableData, AdditionalRowTableData>,
+) => {
+  return (
+    <TableProvider>
+      <TableInner<TableData, AdditionalRowTableData> {...props} />
+    </TableProvider>
+  )
+}
diff --git a/packages/sanity/src/core/releases/components/Table/TableHeader.tsx b/packages/sanity/src/core/releases/components/Table/TableHeader.tsx
new file mode 100644
index 000000000000..1dfa30c2f456
--- /dev/null
+++ b/packages/sanity/src/core/releases/components/Table/TableHeader.tsx
@@ -0,0 +1,77 @@
+import {ArrowDownIcon, ArrowUpIcon, SearchIcon} from '@sanity/icons'
+import {Button, type ButtonProps, Card, Flex, Stack, TextInput} from '@sanity/ui'
+import {useTableContext} from 'sanity/_singletons'
+
+import {type HeaderProps, type TableHeaderProps} from './types'
+
+const SortHeaderButton = ({header, text}: ButtonProps & HeaderProps) => {
+  const {sort, setSearchColumn} = useTableContext()
+  const sortIcon = sort?.direction === 'asc' ? ArrowUpIcon : ArrowDownIcon
+
+  return (
+    <Button
+      iconRight={header.sorting && sort?.column === header.id ? sortIcon : undefined}
+      onClick={() => setSearchColumn(String(header.id))}
+      mode="bleed"
+      padding={2}
+      radius={3}
+      space={1}
+      text={text}
+    />
+  )
+}
+
+const TableHeaderSearch = ({
+  headerProps,
+  searchDisabled,
+  placeholder,
+}: HeaderProps & {placeholder?: string}) => {
+  const {setSearchTerm, searchTerm} = useTableContext()
+
+  return (
+    <Stack {...headerProps} flex={1} paddingY={2} paddingRight={3}>
+      <TextInput
+        border={false}
+        fontSize={1}
+        icon={SearchIcon}
+        placeholder={placeholder || 'Search'}
+        radius={3}
+        value={searchTerm || ''}
+        disabled={searchDisabled}
+        onChange={(event) => setSearchTerm(event.currentTarget.value)}
+        onClear={() => setSearchTerm('')}
+        clearButton={!!searchTerm}
+      />
+    </Stack>
+  )
+}
+
+/**
+ *
+ * @internal
+ */
+export const TableHeader = ({headers, searchDisabled}: TableHeaderProps) => {
+  return (
+    <Card as="thead" radius={3}>
+      <Flex as="tr">
+        {headers.map(({header: Header, width, id, sorting}) => (
+          <Header
+            key={String(id)}
+            headerProps={{
+              as: 'th',
+              id: String(id),
+              style: {width: width || undefined},
+            }}
+            header={{id, sorting}}
+            searchDisabled={searchDisabled}
+          />
+        ))}
+      </Flex>
+    </Card>
+  )
+}
+
+export const Headers = {
+  SortHeaderButton,
+  TableHeaderSearch,
+}
diff --git a/packages/sanity/src/core/releases/components/Table/TableProvider.tsx b/packages/sanity/src/core/releases/components/Table/TableProvider.tsx
new file mode 100644
index 000000000000..c9942bb1f40d
--- /dev/null
+++ b/packages/sanity/src/core/releases/components/Table/TableProvider.tsx
@@ -0,0 +1,24 @@
+import {type ComponentType, type PropsWithChildren, useState} from 'react'
+import {TableContext} from 'sanity/_singletons'
+
+/**
+ * @internal
+ */
+export const TableProvider: ComponentType<PropsWithChildren> = ({children}) => {
+  const [searchTerm, setSearchTerm] = useState<string | null>(null)
+  const [sort, setSort] = useState<{column: string; direction: 'asc' | 'desc'} | null>(null)
+
+  const setSearchColumn = (newColumn: string) => {
+    setSort((s) => {
+      if (s?.column === newColumn) {
+        return {...s, direction: s.direction === 'asc' ? 'desc' : 'asc'}
+      }
+
+      return {column: String(newColumn), direction: 'desc'}
+    })
+  }
+
+  const contextValue = {searchTerm, setSearchTerm, sort, setSearchColumn}
+
+  return <TableContext.Provider value={contextValue}>{children}</TableContext.Provider>
+}
diff --git a/packages/sanity/src/core/releases/components/Table/types.ts b/packages/sanity/src/core/releases/components/Table/types.ts
new file mode 100644
index 000000000000..33cb4f318231
--- /dev/null
+++ b/packages/sanity/src/core/releases/components/Table/types.ts
@@ -0,0 +1,27 @@
+export interface InjectedTableProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  id: string
+  style: {width?: number}
+}
+
+export interface Column<TableData = unknown> {
+  header: (props: HeaderProps) => JSX.Element
+  cell: (props: {
+    datum: TableData
+    cellProps: InjectedTableProps
+    sorting: boolean
+  }) => React.ReactNode
+  id: keyof TableData | string
+  width: number | null
+  sorting?: boolean
+}
+
+export interface TableHeaderProps {
+  headers: Omit<Column, 'cell'>[]
+  searchDisabled?: boolean
+}
+
+export type HeaderProps = Omit<TableHeaderProps, 'headers'> & {
+  headerProps: InjectedTableProps
+  header: Pick<Column, 'sorting' | 'id'>
+}
diff --git a/packages/sanity/src/core/releases/contexts/BundlesMetadataProvider.tsx b/packages/sanity/src/core/releases/contexts/BundlesMetadataProvider.tsx
index 381cbe8e9151..cbd5a4dab86c 100644
--- a/packages/sanity/src/core/releases/contexts/BundlesMetadataProvider.tsx
+++ b/packages/sanity/src/core/releases/contexts/BundlesMetadataProvider.tsx
@@ -37,8 +37,11 @@ const BundlesMetadataProviderInner = ({children}: {children: React.ReactNode}) =
     [observedResult.data],
   )
 
-  const addBundleSlugsToListener = useCallback((addBundleSlugs: string[]) => {
-    setListenerBundleSlugs((prevSlugs) => [...prevSlugs, ...addBundleSlugs])
+  const addBundleSlugsToListener = useCallback((addBundleSlugs: (string | undefined)[]) => {
+    setListenerBundleSlugs((prevSlugs) => [
+      ...prevSlugs,
+      ...addBundleSlugs.filter((slug): slug is string => typeof slug === 'string'),
+    ])
   }, [])
 
   const removeBundleSlugsFromListener = useCallback((removeBundleSlugs: string[]) => {
diff --git a/packages/sanity/src/core/releases/tool/ReleasesTool.tsx b/packages/sanity/src/core/releases/tool/ReleasesTool.tsx
index f7dfe6e256ae..704887403cb7 100644
--- a/packages/sanity/src/core/releases/tool/ReleasesTool.tsx
+++ b/packages/sanity/src/core/releases/tool/ReleasesTool.tsx
@@ -2,7 +2,7 @@ import {useRouter} from 'sanity/router'
 
 import {ReleaseDetail} from './detail/ReleaseDetail'
 import {MigrateBundlesSlug} from './Migrate'
-import {ReleasesOverview} from './ReleasesOverview'
+import {ReleasesOverview} from './overview/ReleasesOverview'
 
 export function ReleasesTool() {
   const router = useRouter()
diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseDetail.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseDetail.tsx
index 43593f8a7b9b..6fe26638ec5d 100644
--- a/packages/sanity/src/core/releases/tool/detail/ReleaseDetail.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/ReleaseDetail.tsx
@@ -11,10 +11,10 @@ import {API_VERSION} from '../../../tasks/constants'
 import {BundleMenuButton} from '../../components/BundleMenuButton/BundleMenuButton'
 import {type ReleasesRouterState} from '../../types/router'
 import {useReleaseHistory} from './documentTable/useReleaseHistory'
-import {ReleaseOverview} from './ReleaseOverview'
 import {ReleaseReview} from './ReleaseReview'
+import {ReleaseSummary} from './ReleaseSummary'
 
-const SUPPORTED_SCREENS = ['overview', 'review'] as const
+const SUPPORTED_SCREENS = ['summary', 'review'] as const
 type Screen = (typeof SUPPORTED_SCREENS)[number]
 
 const useFetchBundleDocuments = (bundleSlug: string) => {
@@ -30,7 +30,7 @@ const getActiveScreen = (router: RouterContextValue): Screen => {
     !activeScreen ||
     !SUPPORTED_SCREENS.includes(activeScreen)
   ) {
-    return 'overview'
+    return 'summary'
   }
   return activeScreen
 }
@@ -58,7 +58,7 @@ export const ReleaseDetail = () => {
     })
   }, [router])
 
-  const navigateToOverview = useCallback(() => {
+  const navigateToSummary = useCallback(() => {
     router.navigate({
       ...router.state,
       _searchParams: [],
@@ -67,7 +67,16 @@ export const ReleaseDetail = () => {
 
   const header = useMemo(
     () => (
-      <Card flex="none" padding={3}>
+      <Card
+        flex="none"
+        padding={3}
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 100,
+          backgroundColor: 'var(--card-bg-color)',
+        }}
+      >
         <Flex>
           <Flex align="baseline" flex={1} gap={2}>
             <Flex gap={1}>
@@ -88,10 +97,10 @@ export const ReleaseDetail = () => {
 
             <Flex gap={1}>
               <Button
-                key="overview"
+                key="summary"
                 mode="bleed"
-                onClick={navigateToOverview}
-                selected={activeScreen === 'overview'}
+                onClick={navigateToSummary}
+                selected={activeScreen === 'summary'}
                 text="Summary"
               />
               {/* StudioButton supports tooltip when button is disabled */}
@@ -126,8 +135,8 @@ export const ReleaseDetail = () => {
       bundleDocuments.length,
       bundleHasDocuments,
       isPublishButtonDisabled,
-      navigateToOverview,
       navigateToReview,
+      navigateToSummary,
       router,
       showPublishButton,
     ],
@@ -160,8 +169,8 @@ export const ReleaseDetail = () => {
               <LoadingBlock title="Loading documents" />
             ) : (
               <>
-                {activeScreen === 'overview' && (
-                  <ReleaseOverview
+                {activeScreen === 'summary' && (
+                  <ReleaseSummary
                     documents={bundleDocuments}
                     release={bundle}
                     documentsHistory={history.documentsHistory}
diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseOverview.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseSummary.tsx
similarity index 56%
rename from packages/sanity/src/core/releases/tool/detail/ReleaseOverview.tsx
rename to packages/sanity/src/core/releases/tool/detail/ReleaseSummary.tsx
index d0a908cbcb9e..e3e333ec2f98 100644
--- a/packages/sanity/src/core/releases/tool/detail/ReleaseOverview.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/ReleaseSummary.tsx
@@ -1,7 +1,8 @@
 import {DocumentsIcon} from '@sanity/icons'
 import {type SanityDocument} from '@sanity/types'
-import {AvatarStack, Box, Card, Flex, Heading, Stack, Text, useToast} from '@sanity/ui'
-import {useCallback, useState} from 'react'
+import {AvatarStack, Box, Flex, Heading, Stack, Text, useToast} from '@sanity/ui'
+import {useCallback, useMemo, useState} from 'react'
+import {useTableContext} from 'sanity/_singletons'
 
 import {
   BundleIconEditorPicker,
@@ -12,10 +13,34 @@ import {UserAvatar} from '../../../components/userAvatar/UserAvatar'
 import {type BundleDocument} from '../../../store/bundles/types'
 import {useAddonDataset} from '../../../studio/addonDataset/useAddonDataset'
 import {Chip} from '../../components/Chip'
-import {DocumentTable} from './documentTable'
+import {Table, type TableProps} from '../../components/Table/Table'
+import {DocumentActions} from './documentTable/DocumentActions'
+import {getDocumentTableColumnDefs} from './documentTable/DocumentTableColumnDefs'
+import {useDocumentPreviewValues} from './documentTable/useDocumentPreviewValues'
 import {type DocumentHistory} from './documentTable/useReleaseHistory'
 
-export function ReleaseOverview(props: {
+export type DocumentWithHistory = SanityDocument & {history: DocumentHistory | undefined}
+export type BundleDocumentRow = DocumentWithHistory & ReturnType<typeof useDocumentPreviewValues>
+
+const getRow =
+  (
+    release: BundleDocument,
+  ): TableProps<DocumentWithHistory, ReturnType<typeof useDocumentPreviewValues>>['Row'] =>
+  ({children, datum}) => {
+    const {searchTerm} = useTableContext()
+    const {previewValues, isLoading} = useDocumentPreviewValues({document: datum, release})
+
+    if (searchTerm) {
+      // Early return to filter out documents that don't match the search term
+      const fallbackTitle = typeof document.title === 'string' ? document.title : 'Untitled'
+      const title = typeof previewValues.title === 'string' ? previewValues.title : fallbackTitle
+      if (!title.toLowerCase().includes(searchTerm.toLowerCase())) return null
+    }
+
+    return children({...datum, previewValues, isLoading})
+  }
+
+export function ReleaseSummary(props: {
   documents: SanityDocument[]
   documentsHistory: Map<string, DocumentHistory>
   collaborators: string[]
@@ -55,6 +80,32 @@ export function ReleaseOverview(props: {
     [client, release._id, toast],
   )
 
+  const aggregatedData = useMemo(
+    () =>
+      documents.map((document) => ({
+        ...document,
+        history: documentsHistory.get(document._id),
+      })),
+    [documents, documentsHistory],
+  )
+
+  const Row = useMemo(() => getRow(release), [release])
+
+  const renderRowActions: ({datum}: {datum: BundleDocumentRow | unknown}) => JSX.Element =
+    useCallback(
+      ({datum}) => {
+        const document = datum as BundleDocumentRow
+
+        return <DocumentActions document={document} bundleTitle={release.title} />
+      },
+      [release.title],
+    )
+
+  const documentTableColumnDefs = useMemo(
+    () => getDocumentTableColumnDefs(release.slug),
+    [release.slug],
+  )
+
   return (
     <Stack paddingX={4} space={5}>
       <Stack space={4}>
@@ -113,29 +164,24 @@ export function ReleaseOverview(props: {
 
             {/* Contributors */}
             <Box padding={1}>
-              <AvatarStack size={0} style={{margin: -1}}>
-                {collaborators?.map((userId) => <UserAvatar key={userId} user={userId} />)}
-              </AvatarStack>
+              {collaborators?.length && (
+                <AvatarStack size={0} style={{margin: -1}}>
+                  {collaborators?.map((userId) => <UserAvatar key={userId} user={userId} />)}
+                </AvatarStack>
+              )}
             </Box>
           </Flex>
         </Flex>
       </Stack>
 
-      {documents.length === 0 && (
-        <Card border padding={4} radius={3}>
-          <Text align="center" muted size={1}>
-            No documents
-          </Text>
-        </Card>
-      )}
-
-      {documents.length > 0 && (
-        <DocumentTable
-          documents={documents}
-          release={release}
-          documentsHistory={documentsHistory}
-        />
-      )}
+      <Table<DocumentWithHistory, ReturnType<typeof useDocumentPreviewValues>>
+        data={aggregatedData}
+        emptyState="No documents"
+        rowId="_id"
+        Row={Row}
+        columnDefs={documentTableColumnDefs}
+        rowActions={renderRowActions}
+      />
     </Stack>
   )
 }
diff --git a/packages/sanity/src/core/releases/tool/__tests__/ReleaseReview.test.tsx b/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseReview.test.tsx
similarity index 87%
rename from packages/sanity/src/core/releases/tool/__tests__/ReleaseReview.test.tsx
rename to packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseReview.test.tsx
index 50d9d69f6cfc..4bc0d063525d 100644
--- a/packages/sanity/src/core/releases/tool/__tests__/ReleaseReview.test.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseReview.test.tsx
@@ -1,15 +1,14 @@
 import {beforeEach, describe, expect, it, jest} from '@jest/globals'
 import {render, screen} from '@testing-library/react'
+import {ColorSchemeProvider, UserColorManagerProvider} from 'sanity'
 
-import {queryByDataUi} from '../../../../../test/setup/customQueries'
-import {createWrapper} from '../../../bundles/util/tests/createWrapper'
-import {useObserveDocument} from '../../../preview/useObserveDocument'
-import {ColorSchemeProvider} from '../../../studio/colorScheme'
-import {UserColorManagerProvider} from '../../../user-color/provider'
-import {releasesUsEnglishLocaleBundle} from '../../i18n'
-import {useDocumentPreviewValues} from '../detail/documentTable/useDocumentPreviewValues'
-import {type DocumentHistory} from '../detail/documentTable/useReleaseHistory'
-import {ReleaseReview} from '../detail/ReleaseReview'
+import {queryByDataUi} from '../../../../../../test/setup/customQueries'
+import {createWrapper} from '../../../../bundles'
+import {useObserveDocument} from '../../../../preview/useObserveDocument'
+import {releasesUsEnglishLocaleBundle} from '../../../i18n'
+import {useDocumentPreviewValues} from '../documentTable/useDocumentPreviewValues'
+import {type DocumentHistory} from '../documentTable/useReleaseHistory'
+import {ReleaseReview} from '../ReleaseReview'
 
 const baseDocument = {
   name: 'William Faulkner',
@@ -88,13 +87,13 @@ jest.mock('sanity/router', () => ({
   }),
 }))
 
-jest.mock('../../../preview/useObserveDocument', () => {
+jest.mock('../../../../preview/useObserveDocument', () => {
   return {
     useObserveDocument: jest.fn(),
   }
 })
 
-jest.mock('../detail/documentTable/useDocumentPreviewValues', () => {
+jest.mock('../documentTable/useDocumentPreviewValues', () => {
   return {
     useDocumentPreviewValues: jest.fn(),
   }
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentActions.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentActions.tsx
index fe04306d3e3e..11fe927c8012 100644
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentActions.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentActions.tsx
@@ -1,14 +1,21 @@
 import {CloseIcon} from '@sanity/icons'
-import {type SanityDocument} from '@sanity/types'
-import {Menu, Text, useToast} from '@sanity/ui'
+import {Card, Menu, Text, useToast} from '@sanity/ui'
 import {useState} from 'react'
+import {SanityDefaultPreview} from 'sanity'
 
 import {Dialog, MenuButton, MenuItem} from '../../../../../ui-components'
 import {ContextMenuButton} from '../../../../components/contextMenuButton'
 import {useClient} from '../../../../hooks/useClient'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
+import {type BundleDocumentRow} from '../ReleaseSummary'
 
-export function DocumentActions({document}: {document: SanityDocument}) {
+export function DocumentActions({
+  document,
+  bundleTitle,
+}: {
+  document: BundleDocumentRow
+  bundleTitle: string
+}) {
   const [showDiscardDialog, setShowDiscardDialog] = useState(false)
   const [discardStatus, setDiscardStatus] = useState<'idle' | 'discarding' | 'error'>('idle')
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
@@ -48,10 +55,11 @@ export function DocumentActions({document}: {document: SanityDocument}) {
       {showDiscardDialog && (
         <Dialog
           id="discard-version-dialog"
-          header="Are you sure you want to delete this version of the document?"
+          header="Are you sure you want to discard the document version?"
           onClose={() => setShowDiscardDialog(false)}
           footer={{
             confirmButton: {
+              text: 'Discard version',
               tone: 'default',
               onClick: handleDiscardVersion,
               loading: discardStatus === 'discarding',
@@ -59,7 +67,12 @@ export function DocumentActions({document}: {document: SanityDocument}) {
             },
           }}
         >
-          <Text>This action can't be undone</Text>
+          <Card marginBottom={4} radius={2} border>
+            <SanityDefaultPreview {...document.previewValues} isPlaceholder={document.isLoading} />
+          </Card>
+          <Text muted size={1}>
+            The <strong>{bundleTitle}</strong> version of this document will be permanently deleted.
+          </Text>
         </Dialog>
       )}
     </>
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx
deleted file mode 100644
index 1423da641e33..000000000000
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentHeader.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-import {ArrowDownIcon, ArrowUpIcon, SearchIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {type Dispatch, type SetStateAction} from 'react'
-
-import {type DocumentSort} from './types'
-
-export function DocumentHeader(props: {
-  setSort: Dispatch<SetStateAction<DocumentSort>>
-  sort: DocumentSort
-  searchTerm: string
-  setSearchTerm: Dispatch<SetStateAction<string>>
-}) {
-  const {setSort, sort, searchTerm, setSearchTerm} = props
-
-  const sortIcon = sort.order === 'asc' ? ArrowUpIcon : ArrowDownIcon
-
-  return (
-    <Card radius={3}>
-      <Flex>
-        <Stack flex={1} paddingY={2} paddingRight={3}>
-          <TextInput
-            border={false}
-            fontSize={1}
-            icon={SearchIcon}
-            placeholder="Search documents"
-            radius={3}
-            value={searchTerm}
-            onChange={(event) => setSearchTerm(event.currentTarget.value)}
-          />
-        </Stack>
-
-        {/* Created */}
-        <Flex paddingY={3} sizing="border" style={{width: 130}}>
-          <Button
-            iconRight={sort.property === '_createdAt' ? sortIcon : undefined}
-            mode="bleed"
-            onClick={() =>
-              setSort((s) => {
-                if (s.property === '_createdAt') {
-                  return {...s, order: s.order === 'asc' ? 'desc' : 'asc'}
-                }
-
-                return {property: '_createdAt', order: 'desc'}
-              })
-            }
-            padding={2}
-            radius={3}
-            space={1}
-            text="Created"
-          />
-        </Flex>
-
-        {/* Updated */}
-        <Flex paddingY={3} sizing="border" style={{width: 130}}>
-          <Button
-            iconRight={sort.property === '_updatedAt' ? sortIcon : undefined}
-            mode="bleed"
-            onClick={() =>
-              setSort((s) => {
-                if (s.property === '_updatedAt') {
-                  return {...s, order: s.order === 'asc' ? 'desc' : 'asc'}
-                }
-
-                return {property: '_updatedAt', order: 'desc'}
-              })
-            }
-            padding={2}
-            radius={3}
-            space={1}
-            text="Edited"
-          />
-        </Flex>
-
-        {/* Published */}
-        <Flex paddingY={3} sizing="border" style={{width: 130}}>
-          <Button
-            iconRight={sort.property === '_publishedAt' ? sortIcon : undefined}
-            mode="bleed"
-            onClick={() =>
-              setSort((s) => {
-                if (s.property === '_publishedAt') {
-                  return {...s, order: s.order === 'asc' ? 'desc' : 'asc'}
-                }
-
-                return {property: '_publishedAt', order: 'desc'}
-              })
-            }
-            padding={2}
-            radius={3}
-            space={1}
-            text="Published"
-          />
-        </Flex>
-
-        {/* Contributors */}
-        <Flex paddingY={3} sizing="border" style={{width: 100}}>
-          <Box padding={2}>
-            <Text muted size={1} weight="medium">
-              Contributors
-            </Text>
-          </Box>
-        </Flex>
-
-        {/* Status */}
-        <Flex paddingY={3} sizing="border" style={{width: 60}}>
-          <Box padding={2}>
-            <Text muted size={1} weight="medium">
-              Status
-            </Text>
-          </Box>
-        </Flex>
-
-        <Flex paddingY={3} sizing="border" style={{width: 49}}>
-          <Box padding={2}>
-            <Text muted size={1} weight="medium">
-              &nbsp;
-            </Text>
-          </Box>
-        </Flex>
-      </Flex>
-    </Card>
-  )
-}
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx
deleted file mode 100644
index 42effe2fe71d..000000000000
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentRow.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import {CheckmarkCircleIcon, EmptyIcon, Progress50Icon} from '@sanity/icons'
-import {type SanityDocument} from '@sanity/types'
-import {AvatarStack, Box, Card, Flex, Text} from '@sanity/ui'
-import {RelativeTime, UserAvatar} from 'sanity'
-
-import {Tooltip} from '../../../../../ui-components'
-import {type BundleDocument} from '../../../../store/bundles/types'
-import {ReleaseDocumentPreview} from '../../../components/ReleaseDocumentPreview'
-import {DocumentActions} from './DocumentActions'
-import {useDocumentPreviewValues} from './useDocumentPreviewValues'
-import {type DocumentHistory} from './useReleaseHistory'
-
-const DOCUMENT_STATUS = {
-  ready: {
-    icon: CheckmarkCircleIcon,
-    color: 'var(--card-badge-positive-icon-color)',
-    text: 'This document is marked as ready',
-  },
-  noChanges: {
-    icon: EmptyIcon,
-    color: '',
-    text: "This document doesn't have changes in this release",
-  },
-  edited: {
-    icon: Progress50Icon,
-    color: 'var(--card-badge-caution-icon-color)',
-    text: 'This document has been edited in this release',
-  },
-} as const
-
-const DocumentStatus = ({status}: {status: keyof typeof DOCUMENT_STATUS}) => {
-  const Icon = DOCUMENT_STATUS[status].icon
-  return (
-    <Box paddingX={2}>
-      <Text muted size={1}>
-        <Tooltip content={DOCUMENT_STATUS[status].text} portal>
-          {Icon && <Icon style={{color: DOCUMENT_STATUS[status].color}} />}
-        </Tooltip>
-      </Text>
-    </Box>
-  )
-}
-
-const getDocumentStatus = (document: SanityDocument): keyof typeof DOCUMENT_STATUS => {
-  if (document._state === 'ready') {
-    return 'ready'
-  }
-  if (document._updatedAt === document._createdAt) {
-    return 'noChanges'
-  }
-  return 'edited'
-}
-
-export function DocumentRow(props: {
-  searchTerm: string
-  document: SanityDocument
-  release: BundleDocument
-  history: DocumentHistory | undefined
-}) {
-  const {
-    document,
-    release,
-    searchTerm,
-    history = {
-      editors: [],
-      createdBy: undefined,
-      lastEditedBy: undefined,
-    },
-  } = props
-  const documentId = document._id
-  const documentTypeName = document._type
-  const {previewValues, isLoading} = useDocumentPreviewValues({document, release})
-
-  if (searchTerm) {
-    // Early return to filter out documents that don't match the search term
-    const fallbackTitle = typeof document.title === 'string' ? document.title : 'Untitled'
-    const title = typeof previewValues.title === 'string' ? previewValues.title : fallbackTitle
-    if (!title.toLowerCase().includes(searchTerm.toLowerCase())) return null
-  }
-
-  return (
-    <Card border radius={3}>
-      <Flex style={{margin: -1}}>
-        <Box flex={1} padding={1}>
-          <ReleaseDocumentPreview
-            documentId={documentId}
-            documentTypeName={documentTypeName}
-            releaseSlug={release.slug}
-            previewValues={previewValues}
-            isLoading={!!isLoading}
-          />
-        </Box>
-
-        {/* Created */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 130}}>
-          {document._createdAt && (
-            <Flex align="center" gap={2}>
-              {history.createdBy && <UserAvatar size={0} user={history.createdBy} />}
-              <Text muted size={1}>
-                <RelativeTime time={document._createdAt} useTemporalPhrase minimal />
-              </Text>
-            </Flex>
-          )}
-        </Flex>
-
-        {/* Updated */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 130}}>
-          {document._updatedAt && (
-            <Flex align="center" gap={2}>
-              {history.lastEditedBy && <UserAvatar size={0} user={history.lastEditedBy} />}
-              <Text muted size={1}>
-                <RelativeTime time={document._updatedAt} useTemporalPhrase minimal />
-              </Text>
-            </Flex>
-          )}
-        </Flex>
-
-        {/* Published */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 130}}>
-          {/* TODO: How to get the publishedAt date from the document, consider history API */}
-          {/* {document._publishedAt && (
-            <Flex align="center" gap={2}>
-              <UserAvatar size={0} user={document._publishedBy} />
-              <Text muted size={1}>
-                <RelativeTime time={document._publishedAt} />
-              </Text>
-            </Flex>
-          )} */}
-
-          {!document._publishedAt && (
-            <Text muted size={1}>
-              &nbsp;
-            </Text>
-          )}
-        </Flex>
-
-        {/* Contributors */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 100}}>
-          <AvatarStack maxLength={3} size={0}>
-            {history.editors?.map((userId) => <UserAvatar key={userId} user={userId} />)}
-          </AvatarStack>
-        </Flex>
-
-        {/* Status */}
-        <Flex align="center" paddingX={2} paddingY={3} sizing="border" style={{width: 60}}>
-          <DocumentStatus status={getDocumentStatus(document)} />
-        </Flex>
-
-        {/* Actions is empty - don't render yet */}
-        <Flex align="center" flex="none" padding={3}>
-          <DocumentActions document={document} />
-        </Flex>
-      </Flex>
-    </Card>
-  )
-}
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx
deleted file mode 100644
index 8ae612b16736..000000000000
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTable.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {type SanityDocument} from '@sanity/types'
-import {Stack} from '@sanity/ui'
-import {useMemo, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {type BundleDocument} from '../../../../store/bundles/types'
-import {DocumentHeader} from './DocumentHeader'
-import {DocumentRow} from './DocumentRow'
-import {type DocumentSort} from './types'
-import {type DocumentHistory} from './useReleaseHistory'
-
-const RowStack = styled(Stack)({
-  '& > *:not(:first-child)': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    marginTop: -1,
-  },
-
-  '& > *:not(:last-child)': {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-})
-
-export function DocumentTable(props: {
-  documents: SanityDocument[]
-  documentsHistory: Map<string, DocumentHistory>
-  release: BundleDocument
-}) {
-  const {documents, release, documentsHistory} = props
-  // Filter will happen at the DocumentRow level because we don't have access here to the preview values.
-  const [searchTerm, setSearchTerm] = useState<string>('')
-  const [sort, setSort] = useState<DocumentSort>({property: '_updatedAt', order: 'desc'})
-
-  const sortedDocuments = useMemo(() => {
-    const sorted = [...documents]
-
-    sorted.sort((a, b) => {
-      const aDateString = a[sort.property]
-      const bDateString = b[sort.property]
-
-      const aDate = typeof aDateString === 'string' ? Date.parse(aDateString) : 0
-      const bDate = typeof bDateString === 'string' ? Date.parse(bDateString) : 0
-
-      if (sort.order === 'asc') {
-        return aDate - bDate
-      }
-
-      return bDate - aDate
-    })
-    return sorted
-  }, [documents, sort])
-
-  return (
-    <Stack space={1}>
-      <DocumentHeader
-        setSort={setSort}
-        sort={sort}
-        searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
-      />
-
-      <RowStack>
-        {sortedDocuments.map((d) => (
-          <DocumentRow
-            searchTerm={searchTerm}
-            document={d}
-            key={d._id}
-            release={release}
-            history={documentsHistory.get(d._id)}
-          />
-        ))}
-      </RowStack>
-    </Stack>
-  )
-}
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTableColumnDefs.tsx b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTableColumnDefs.tsx
new file mode 100644
index 000000000000..1925fdec3143
--- /dev/null
+++ b/packages/sanity/src/core/releases/tool/detail/documentTable/DocumentTableColumnDefs.tsx
@@ -0,0 +1,130 @@
+import {AvatarStack, Box, Flex, Text} from '@sanity/ui'
+import {type BundleDocument, RelativeTime, UserAvatar} from 'sanity'
+
+import {ReleaseDocumentPreview} from '../../../components/ReleaseDocumentPreview'
+import {Headers} from '../../../components/Table/TableHeader'
+import {type Column} from '../../../components/Table/types'
+import {type BundleDocumentRow} from '../ReleaseSummary'
+
+export const getDocumentTableColumnDefs: (
+  releaseSlug: BundleDocument['slug'],
+) => Column<BundleDocumentRow>[] = (releaseSlug) => [
+  {
+    id: 'search',
+    width: null,
+    header: (props) => <Headers.TableHeaderSearch {...props} placeholder="Search documents" />,
+    cell: ({cellProps, datum: document}) => (
+      <Box {...cellProps} flex={1} padding={1}>
+        <ReleaseDocumentPreview
+          documentId={document._id}
+          documentTypeName={document._type}
+          releaseSlug={releaseSlug}
+          previewValues={document.previewValues}
+          isLoading={!!document.isLoading}
+        />
+      </Box>
+    ),
+  },
+  {
+    id: '_createdAt',
+    sorting: true,
+    width: 130,
+    header: (props) => (
+      <Flex {...props.headerProps} paddingY={3} sizing="border">
+        <Headers.SortHeaderButton text="Created" {...props} />
+      </Flex>
+    ),
+    cell: ({cellProps, datum: document}) => (
+      <Flex {...cellProps} align="center" paddingX={2} paddingY={3} sizing="border">
+        {document._createdAt && (
+          <Flex align="center" gap={2}>
+            {document.history?.createdBy && (
+              <UserAvatar size={0} user={document.history.createdBy} />
+            )}
+            <Text muted size={1}>
+              <RelativeTime time={document._createdAt} useTemporalPhrase minimal />
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+    ),
+  },
+  {
+    id: '_updatedAt',
+    sorting: true,
+    width: 130,
+    header: (props) => (
+      <Flex {...props.headerProps} paddingY={3} sizing="border">
+        <Headers.SortHeaderButton text="Edited" {...props} />
+      </Flex>
+    ),
+    cell: ({cellProps, datum: document}) => (
+      <Flex {...cellProps} align="center" paddingX={2} paddingY={3} sizing="border">
+        {document._updatedAt && (
+          <Flex align="center" gap={2}>
+            {document.history?.lastEditedBy && (
+              <UserAvatar size={0} user={document.history.lastEditedBy} />
+            )}
+            <Text muted size={1}>
+              <RelativeTime time={document._updatedAt} useTemporalPhrase minimal />
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+    ),
+  },
+  {
+    id: '_publishedAt',
+    sorting: true,
+    width: 130,
+    header: (props) => (
+      <Flex {...props.headerProps} paddingY={3} sizing="border">
+        <Headers.SortHeaderButton text="Published" {...props} />
+      </Flex>
+    ),
+    cell: ({cellProps, datum: document}) => (
+      <Flex {...cellProps} align="center" paddingX={2} paddingY={3} sizing="border">
+        {/* TODO: How to get the publishedAt date from the document, consider history API */}
+        {/* {document._publishedAt && (
+      <Flex align="center" gap={2}>
+        <UserAvatar size={0} user={document._publishedBy} />
+        <Text muted size={1}>
+          <RelativeTime time={document._publishedAt} />
+        </Text>
+      </Flex>
+    )} */}
+
+        {!document._publishedAt && (
+          <Text muted size={1}>
+            &nbsp;
+          </Text>
+        )}
+      </Flex>
+    ),
+  },
+  {
+    id: 'contributors',
+    sorting: false,
+    width: 100,
+    header: ({headerProps}) => (
+      <Flex {...headerProps} paddingY={3} sizing="border">
+        <Box padding={2}>
+          <Text muted size={1} weight="medium">
+            Contributors
+          </Text>
+        </Box>
+      </Flex>
+    ),
+    cell: ({datum: document, cellProps}) => (
+      <Flex {...cellProps} align="center" paddingX={2} paddingY={3} sizing="border">
+        {document.history?.editors && (
+          <AvatarStack maxLength={3} size={0}>
+            {document.history.editors.map((userId) => (
+              <UserAvatar key={userId} user={userId} />
+            ))}
+          </AvatarStack>
+        )}
+      </Flex>
+    ),
+  },
+]
diff --git a/packages/sanity/src/core/releases/tool/detail/documentTable/index.ts b/packages/sanity/src/core/releases/tool/detail/documentTable/index.ts
deleted file mode 100644
index 91fc7ef6ba80..000000000000
--- a/packages/sanity/src/core/releases/tool/detail/documentTable/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './DocumentTable'
diff --git a/packages/sanity/src/core/releases/tool/ReleasesOverview.tsx b/packages/sanity/src/core/releases/tool/overview/ReleasesOverview.tsx
similarity index 58%
rename from packages/sanity/src/core/releases/tool/ReleasesOverview.tsx
rename to packages/sanity/src/core/releases/tool/overview/ReleasesOverview.tsx
index 2a953383c062..c616e1a6aa94 100644
--- a/packages/sanity/src/core/releases/tool/ReleasesOverview.tsx
+++ b/packages/sanity/src/core/releases/tool/overview/ReleasesOverview.tsx
@@ -3,24 +3,27 @@ import {Box, Button, type ButtonMode, Card, Container, Flex, Heading, Stack, Tex
 import {isBefore} from 'date-fns'
 import {type MouseEventHandler, useCallback, useEffect, useMemo, useState} from 'react'
 
-import {Button as StudioButton} from '../../../ui-components'
-import {CreateBundleDialog} from '../../bundles/components/dialog/CreateBundleDialog'
-import {LoadingBlock} from '../../components/loadingBlock/LoadingBlock'
-import {type BundleDocument} from '../../store/bundles/types'
-import {useBundles} from '../../store/bundles/useBundles'
-import {ReleasesTable, type TableBundle} from '../components/ReleasesTable/ReleasesTable'
-import {containsBundles} from '../types/bundle'
-import {useBundlesMetadata} from './useBundlesMetadata'
+import {Button as StudioButton} from '../../../../ui-components'
+import {CreateBundleDialog} from '../../../bundles/components/dialog/CreateBundleDialog'
+import {type BundleDocument, useBundles} from '../../../store'
+import {BundleMenuButton} from '../../components/BundleMenuButton/BundleMenuButton'
+import {Table} from '../../components/Table/Table'
+import {containsBundles} from '../../types/bundle'
+import {type BundlesMetadata, useBundlesMetadata} from '../useBundlesMetadata'
+import {releasesOverviewColumnDefs} from './ReleasesOverviewColumnDefs'
 
 type Mode = 'open' | 'archived'
 
+export interface TableBundle extends BundleDocument {
+  documentsMetadata: BundlesMetadata
+}
+
 const EMPTY_BUNDLE_GROUPS = {open: [], archived: []}
 
 export function ReleasesOverview() {
   const {data: bundles, loading: loadingBundles} = useBundles()
   const [bundleGroupMode, setBundleGroupMode] = useState<Mode>('open')
   const [isCreateBundleDialogOpen, setIsCreateBundleDialogOpen] = useState(false)
-  const [searchTerm, setSearchTerm] = useState<string>()
   const bundleSlugs = useMemo(() => bundles?.map((bundle) => bundle.slug) || [], [bundles])
   const {data: bundlesMetadata, loading: loadingBundlesMetadata} = useBundlesMetadata(bundleSlugs)
   const loading = loadingBundles || loadingBundlesMetadata
@@ -56,9 +59,6 @@ export function ReleasesOverview() {
     }
   }, [bundleGroupMode, groupedBundles.archived.length])
 
-  // clear search when mode changes
-  useEffect(() => setSearchTerm(''), [bundleGroupMode])
-
   const handleBundleGroupModeChange = useCallback<MouseEventHandler<HTMLButtonElement>>(
     ({currentTarget: {value: groupMode}}) => {
       setBundleGroupMode(groupMode as Mode)
@@ -131,54 +131,64 @@ export function ReleasesOverview() {
   }
 
   const applySearchTermToBundles = useCallback(
-    (bundle: BundleDocument) =>
-      !searchTerm || bundle.title.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase()),
-    [searchTerm],
+    (unfilteredData: TableBundle[], tableSearchTerm: string) => {
+      return unfilteredData.filter((bundle) => {
+        return bundle.title.toLocaleLowerCase().includes(tableSearchTerm.toLocaleLowerCase())
+      })
+    },
+    [],
   )
 
-  const filteredBundles = useMemo(
-    () => groupedBundles[bundleGroupMode]?.filter(applySearchTermToBundles) || [],
-    [applySearchTermToBundles, bundleGroupMode, groupedBundles],
-  )
+  const renderRowActions = useCallback(({datum}: {datum: TableBundle | unknown}) => {
+    const bundle = datum as TableBundle
+
+    return (
+      <BundleMenuButton bundle={bundle} documentCount={bundle.documentsMetadata.documentCount} />
+    )
+  }, [])
 
   return (
-    <Card flex={1} overflow="auto">
-      <Container width={3}>
-        <Stack paddingX={4} paddingY={6} space={4}>
-          <Flex align="flex-start" gap={2} paddingBottom={2}>
-            <Flex align="flex-start" flex={1} gap={4}>
-              <Stack paddingY={1} space={4}>
-                <Heading as="h1" size={2} style={{margin: '1px 0'}}>
-                  Releases
-                </Heading>
-                {!loading && !hasBundles && (
-                  <Container style={{margin: 0}} width={0}>
-                    <Stack space={5}>
-                      <Text muted size={2}>
-                        Releases are collections of document versions which can be managed and
-                        published together.
-                      </Text>
-                      <Box>{createReleaseButton}</Box>
-                    </Stack>
-                  </Container>
-                )}
-              </Stack>
-              {loadingOrHasBundles && currentArchivedPicker}
+    <Container width={2}>
+      <Card flex={1} overflow="auto">
+        <Container width={3}>
+          <Stack paddingX={4} paddingY={6} space={4}>
+            <Flex align="flex-start" gap={2} paddingBottom={2}>
+              <Flex align="flex-start" flex={1} gap={4}>
+                <Stack paddingY={1} space={4}>
+                  <Heading as="h1" size={2} style={{margin: '1px 0'}}>
+                    Releases
+                  </Heading>
+                  {!loading && !hasBundles && (
+                    <Container style={{margin: 0}} width={0}>
+                      <Stack space={5}>
+                        <Text muted size={2}>
+                          Releases are collections of document versions which can be managed and
+                          published together.
+                        </Text>
+                        <Box>{createReleaseButton}</Box>
+                      </Stack>
+                    </Container>
+                  )}
+                </Stack>
+                {loadingOrHasBundles && currentArchivedPicker}
+              </Flex>
+              {loadingOrHasBundles && createReleaseButton}
             </Flex>
-            {loadingOrHasBundles && createReleaseButton}
-          </Flex>
-          {loading ? (
-            <LoadingBlock fill data-testid="bundle-table-loader" />
-          ) : (
-            <ReleasesTable
-              bundles={filteredBundles}
-              searchTerm={searchTerm}
-              setSearchTerm={setSearchTerm}
+            <Table<TableBundle>
+              // for resetting filter and sort on table when mode changed
+              key={bundleGroupMode}
+              loading={loading}
+              data={groupedBundles[bundleGroupMode]}
+              columnDefs={releasesOverviewColumnDefs}
+              searchFilter={applySearchTermToBundles}
+              emptyState="No Releases"
+              rowId="_id"
+              rowActions={renderRowActions}
             />
-          )}
-        </Stack>
-      </Container>
-      {renderCreateBundleDialog()}
-    </Card>
+          </Stack>
+        </Container>
+        {renderCreateBundleDialog()}
+      </Card>
+    </Container>
   )
 }
diff --git a/packages/sanity/src/core/releases/tool/overview/ReleasesOverviewColumnDefs.tsx b/packages/sanity/src/core/releases/tool/overview/ReleasesOverviewColumnDefs.tsx
new file mode 100644
index 000000000000..bee75c439dc4
--- /dev/null
+++ b/packages/sanity/src/core/releases/tool/overview/ReleasesOverviewColumnDefs.tsx
@@ -0,0 +1,125 @@
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {useRouter} from 'sanity/router'
+
+import {BundleBadge} from '../../../bundles'
+import {RelativeTime, UserAvatar} from '../../../components'
+import {Headers} from '../../components/Table/TableHeader'
+import {type Column} from '../../components/Table/types'
+import {type TableBundle} from './ReleasesOverview'
+
+const ReleaseNameCell: Column<TableBundle>['cell'] = ({cellProps, datum: bundle}) => {
+  const router = useRouter()
+
+  return (
+    <Box {...cellProps} flex={1} padding={1}>
+      <Card
+        as="a"
+        // navigate to bundle detail
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={() => router.navigate({bundleSlug: bundle.slug})}
+        padding={2}
+        radius={2}
+      >
+        <Flex align="center" gap={2}>
+          <Box flex="none">
+            <BundleBadge hue={bundle.hue} icon={bundle.icon} />
+          </Box>
+          <Stack flex={1} space={2}>
+            <Flex align="center" gap={2}>
+              <Text size={1} weight="medium">
+                {bundle.title}
+              </Text>
+            </Flex>
+          </Stack>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}
+
+export const releasesOverviewColumnDefs: Column<TableBundle>[] = [
+  {
+    id: 'search',
+    sorting: false,
+    width: null,
+    header: (props) => <Headers.TableHeaderSearch {...props} placeholder="Search releases" />,
+    cell: ReleaseNameCell,
+  },
+  {
+    id: 'documentCount',
+    sorting: false,
+    width: 90,
+    header: ({headerProps}) => (
+      <Flex {...headerProps} paddingY={3} sizing="border">
+        <Box padding={2}>
+          <Text muted size={1} weight="medium">
+            Documents
+          </Text>
+        </Box>
+      </Flex>
+    ),
+    cell: ({datum: {documentsMetadata}, cellProps}) => (
+      <Flex {...cellProps} align="center" paddingX={2} paddingY={3} sizing="border">
+        <Text muted size={1}>
+          {documentsMetadata.documentCount}
+        </Text>
+      </Flex>
+    ),
+  },
+  {
+    id: '_createdAt',
+    sorting: true,
+    width: 120,
+    header: (props) => (
+      <Flex {...props.headerProps} paddingY={3} sizing="border">
+        <Headers.SortHeaderButton text="Created" {...props} />
+      </Flex>
+    ),
+    cell: ({cellProps, datum: bundle}) => (
+      <Flex {...cellProps} align="center" gap={2} paddingX={2} paddingY={3} sizing="border">
+        {bundle.authorId && <UserAvatar size={0} user={bundle.authorId} />}
+        <Text muted size={1}>
+          <RelativeTime time={bundle._createdAt} useTemporalPhrase minimal />
+        </Text>
+      </Flex>
+    ),
+  },
+  {
+    id: 'documentsMetadata.updatedAt',
+    sorting: true,
+    width: 100,
+    header: (props) => (
+      <Flex {...props.headerProps} paddingY={3} sizing="border">
+        <Headers.SortHeaderButton text="Edited" {...props} />
+      </Flex>
+    ),
+    cell: ({datum: {documentsMetadata}, cellProps}) => (
+      <Flex {...cellProps} align="center" gap={2} paddingX={2} paddingY={3} sizing="border">
+        {documentsMetadata.updatedAt && (
+          <Text muted size={1}>
+            <RelativeTime time={documentsMetadata.updatedAt} useTemporalPhrase minimal />
+          </Text>
+        )}
+      </Flex>
+    ),
+  },
+  {
+    id: 'publishedAt',
+    sorting: true,
+    width: 100,
+    header: (props) => (
+      <Flex {...props.headerProps} align="center" gap={1} paddingX={1} paddingY={0} sizing="border">
+        <Headers.SortHeaderButton text="Published" {...props} />
+      </Flex>
+    ),
+    cell: ({cellProps, datum: bundle}) => (
+      <Flex {...cellProps} align="center" paddingX={2} paddingY={3} sizing="border">
+        {!!bundle.publishedAt && (
+          <Text muted size={1}>
+            <RelativeTime time={bundle.publishedAt} useTemporalPhrase minimal />
+          </Text>
+        )}
+      </Flex>
+    ),
+  },
+]
diff --git a/packages/sanity/src/core/releases/tool/__tests__/ReleasesOverview.test.tsx b/packages/sanity/src/core/releases/tool/overview/__tests__/ReleasesOverview.test.tsx
similarity index 53%
rename from packages/sanity/src/core/releases/tool/__tests__/ReleasesOverview.test.tsx
rename to packages/sanity/src/core/releases/tool/overview/__tests__/ReleasesOverview.test.tsx
index 08846db976b3..c433df4238b7 100644
--- a/packages/sanity/src/core/releases/tool/__tests__/ReleasesOverview.test.tsx
+++ b/packages/sanity/src/core/releases/tool/overview/__tests__/ReleasesOverview.test.tsx
@@ -1,24 +1,26 @@
 import {beforeEach, describe, expect, it, jest} from '@jest/globals'
-import {fireEvent, render, screen, waitFor} from '@testing-library/react'
+import {fireEvent, render, screen, waitFor, within} from '@testing-library/react'
+import {useRouter} from 'sanity/router'
 
-import {queryByDataUi} from '../../../../../test/setup/customQueries'
-import {createWrapper} from '../../../bundles/util/tests/createWrapper'
-import {useBundles} from '../../../store/bundles'
-import {type BundleDocument} from '../../../store/bundles/types'
-import {releasesUsEnglishLocaleBundle} from '../../i18n'
+import {queryByDataUi} from '../../../../../../test/setup/customQueries'
+import {createWrapper} from '../../../../bundles/util/tests/createWrapper'
+import {useBundles} from '../../../../store'
+import {type BundleDocument} from '../../../../store/bundles/types'
+import {releasesUsEnglishLocaleBundle} from '../../../i18n'
+import {type BundlesMetadata, useBundlesMetadata} from '../../useBundlesMetadata'
 import {ReleasesOverview} from '../ReleasesOverview'
-import {type BundlesMetadata, useBundlesMetadata} from '../useBundlesMetadata'
 
-jest.mock('../useBundlesMetadata', () => ({
+jest.mock('../../useBundlesMetadata', () => ({
   useBundlesMetadata: jest.fn(),
 }))
 
-jest.mock('../../../store/bundles/useBundles', () => ({
+jest.mock('../../../../store', () => ({
+  ...(jest.requireActual('../../../../store') || {}),
   useBundles: jest.fn(),
 }))
 
 jest.mock('sanity', () => ({
-  useCurrentUser: jest.fn().mockReturnValue({id: 'user-id'}),
+  useCurrentUser: jest.fn().mockReturnValue({user: {id: 'user-id'}}),
 }))
 
 jest.mock('sanity/router', () => ({
@@ -92,6 +94,10 @@ describe('ReleasesOverview', () => {
       screen.getByText('No Releases')
     })
 
+    it('does not allow for bundle search', () => {
+      expect(screen.getByPlaceholderText('Search releases')).toBeDisabled()
+    })
+
     it('does not show bundle history mode switch', () => {
       expect(screen.queryByText('Open')).toBeNull()
       expect(screen.queryByText('Archived')).toBeNull()
@@ -108,16 +114,30 @@ describe('ReleasesOverview', () => {
 
   describe('when bundles are loaded', () => {
     const bundles = [
-      {title: 'Bundle 1', slug: 'bundle-1', _createdAt: new Date().toISOString()},
-      {title: 'Bundle 2', slug: 'bundle-2', _createdAt: new Date().toISOString()},
+      {
+        title: 'Bundle 1',
+        _id: '1',
+        slug: 'bundle-1',
+        // yesterday
+        _createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+      },
+      {
+        title: 'Bundle 2',
+        _id: '2',
+        slug: 'bundle-2',
+        // now
+        _createdAt: new Date().toISOString(),
+      },
       {
         title: 'Bundle 3',
+        _id: '3',
         publishedAt: new Date().toISOString(),
         slug: 'bundle-3',
         _createdAt: new Date().toISOString(),
       },
       {
         title: 'Bundle 4',
+        _id: '4',
         archivedAt: new Date().toISOString(),
         slug: 'bundle-4',
         _createdAt: new Date().toISOString(),
@@ -135,10 +155,11 @@ describe('ReleasesOverview', () => {
         fetching: false,
         error: null,
         data: Object.fromEntries(
-          bundles.map((bundle) => [
+          bundles.map((bundle, index) => [
             bundle.slug,
             {
               documentCount: 1,
+              updatedAt: new Date(Date.now() - 24 * 60 * 60 * 1000 * (index + 1)).toISOString(),
             } as BundlesMetadata,
           ]),
         ),
@@ -147,9 +168,28 @@ describe('ReleasesOverview', () => {
 
       return render(<ReleasesOverview />, {wrapper})
     })
+
     it('shows each open bundle', () => {
-      screen.getByText('Bundle 1')
-      screen.getByText('Bundle 2')
+      const bundleRows = screen.getAllByTestId('table-row')
+      // 2 open releases
+      expect(bundleRows).toHaveLength(2)
+
+      const openBundles = [...bundles].slice(0, 2)
+      openBundles.forEach((bundle, index) => {
+        // bundle title
+        within(bundleRows[index]).getByText(bundle.title)
+        // document count
+        within(bundleRows[index]).getByText('1')
+        if (index === 0) {
+          // updated at & created at
+          expect(within(bundleRows[index]).getAllByText('yesterday')).toHaveLength(2)
+        } else if (index === 1) {
+          // updated at
+          within(bundleRows[index]).getByText('2 days ago')
+          // created at
+          within(bundleRows[index]).getByText('just now')
+        }
+      })
     })
 
     it('allows for switching between history modes', () => {
@@ -184,5 +224,48 @@ describe('ReleasesOverview', () => {
       screen.getByText('No Releases')
       expect(screen.queryByText('Bundle 1')).toBeNull()
     })
+
+    it('sorts the list of releases', () => {
+      const [unsortedFirstBundle, unsortedSecondBundle] = screen.getAllByTestId('table-row')
+      within(unsortedFirstBundle).getByText('Bundle 1')
+      within(unsortedSecondBundle).getByText('Bundle 2')
+
+      // sort by asc created at
+      fireEvent.click(screen.getByText('Created'))
+      const [ascCreatedSortedFirstBundle, ascCreatedSortedSecondBundle] =
+        screen.getAllByTestId('table-row')
+      within(ascCreatedSortedFirstBundle).getByText('Bundle 2')
+      within(ascCreatedSortedSecondBundle).getByText('Bundle 1')
+
+      // searching retains sort order
+      fireEvent.change(screen.getByPlaceholderText('Search releases'), {
+        target: {value: 'Bundle'},
+      })
+      const [ascCreatedSortedFirstBundleAfterSearch, ascCreatedSortedSecondBundleAfterSearch] =
+        screen.getAllByTestId('table-row')
+      within(ascCreatedSortedFirstBundleAfterSearch).getByText('Bundle 2')
+      within(ascCreatedSortedSecondBundleAfterSearch).getByText('Bundle 1')
+
+      // sort by desc created at
+      fireEvent.click(screen.getByText('Created'))
+      const [descCreatedSortedFirstBundle, descCreatedSortedSecondBundle] =
+        screen.getAllByTestId('table-row')
+      within(descCreatedSortedFirstBundle).getByText('Bundle 1')
+      within(descCreatedSortedSecondBundle).getByText('Bundle 2')
+
+      // sort by asc updated at
+      fireEvent.click(screen.getByText('Edited'))
+      const [ascEditedSortedFirstBundle, ascEditedSortedSecondBundle] =
+        screen.getAllByTestId('table-row')
+      within(ascEditedSortedFirstBundle).getByText('Bundle 1')
+      within(ascEditedSortedSecondBundle).getByText('Bundle 2')
+    })
+
+    it('should navigate to release when row clicked', async () => {
+      const bundleRow = screen.getAllByTestId('table-row')[0]
+      fireEvent.click(within(bundleRow).getByText('Bundle 1'))
+
+      expect(useRouter().navigate).toHaveBeenCalledWith({bundleSlug: 'bundle-1'})
+    })
   })
 })