From 2ee153b09d7f1c22678e01b2d1aaaa118773a5ce Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Thu, 13 Nov 2025 13:09:26 +0200
Subject: [PATCH 1/4] feat(ui): replace the Pub/Sub table with Redis UI

re #RI-7714
---
 .../MessageListWrapper.styles.tsx             |   9 -
 .../MessagesList/MessagesList.spec.tsx        |  17 --
 .../MessagesList/MessagesList.tsx             | 181 ------------------
 .../messages-list/MessagesList/index.ts       |   3 -
 .../MessagesList/styles.module.scss           |  99 ----------
 .../messages-list/MessagesListWrapper.tsx     |  71 ++++---
 6 files changed, 44 insertions(+), 336 deletions(-)
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.spec.tsx
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/index.ts
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss

diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessageListWrapper.styles.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessageListWrapper.styles.tsx
index dfa1aaab02..1abbe30800 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessageListWrapper.styles.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessageListWrapper.styles.tsx
@@ -1,15 +1,6 @@
 import styled from 'styled-components'
 import { Col } from 'uiSrc/components/base/layout/flex'
 
-export const InnerContainer = styled(Col)`
-  background-color: ${({ theme }) =>
-    theme.semantic.color.background.neutral300};
-  border-radius: ${({ theme }) => theme.core.space.space100};
-  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
-  padding: ${({ theme }) => theme.core.space.space300};
-  margin: ${({ theme }) => theme.core.space.space200};
-`
-
 export const Wrapper = styled(Col)`
   margin: ${({ theme }) => theme.core.space.space200};
   /* 
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.spec.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.spec.tsx
deleted file mode 100644
index 67143618a5..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { mock } from 'ts-mockito'
-import { render } from 'uiSrc/utils/test-utils'
-
-import MessagesList, { Props } from './MessagesList'
-
-const mockedProps = {
-  ...mock<Props>(),
-  height: 20,
-  width: 20,
-}
-
-describe('MessagesList', () => {
-  it('should render', () => {
-    expect(render(<MessagesList {...mockedProps} />)).toBeTruthy()
-  })
-})
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx
deleted file mode 100644
index f6564992d7..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  ListChildComponentProps,
-  ListOnScrollProps,
-  VariableSizeList as List,
-} from 'react-window'
-import { useParams } from 'react-router-dom'
-
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { FormatedDate, RiTooltip } from 'uiSrc/components'
-import { ChevronDownIcon } from 'uiSrc/components/base/icons'
-import { IconButton } from 'uiSrc/components/base/forms/buttons'
-import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
-
-import styles from './styles.module.scss'
-
-export interface Props {
-  items: IMessage[]
-  width?: number
-  height?: number
-}
-
-const PROTRUDING_OFFSET = 2
-const MIN_ROW_HEIGHT = 30
-
-const MessagesList = (props: Props) => {
-  const { items = [], width = 0, height = 0 } = props
-
-  const [showAnchor, setShowAnchor] = useState<boolean>(false)
-  const listRef = useRef<List>(null)
-  const followRef = useRef<boolean>(true)
-  const hasMountedRef = useRef<boolean>(false)
-  const rowHeights = useRef<{ [key: number]: number }>({})
-  const outerRef = useRef<HTMLDivElement>(null)
-
-  const { instanceId = '' } = useParams<{ instanceId: string }>()
-
-  useEffect(() => {
-    scrollToBottom()
-  }, [])
-
-  useEffect(() => {
-    if (items.length > 0 && followRef.current) {
-      setTimeout(() => {
-        scrollToBottom()
-      }, 0)
-    }
-  }, [items])
-
-  useEffect(() => {
-    if (followRef.current) {
-      setTimeout(() => {
-        scrollToBottom()
-      }, 0)
-    }
-  }, [width, height])
-
-  const getRowHeight = (index: number) =>
-    rowHeights.current[index] > MIN_ROW_HEIGHT
-      ? rowHeights.current[index] + 2
-      : MIN_ROW_HEIGHT
-
-  const setRowHeight = (index: number, size: number) => {
-    listRef.current?.resetAfterIndex(0)
-    rowHeights.current = { ...rowHeights.current, [index]: size }
-  }
-
-  const scrollToBottom = () => {
-    listRef.current?.scrollToItem(items.length - 1, 'end')
-    requestAnimationFrame(() => {
-      listRef.current?.scrollToItem(items.length - 1, 'end')
-    })
-  }
-
-  const handleAnchorClick = () => {
-    scrollToBottom()
-  }
-
-  const handleScroll = useCallback((e: ListOnScrollProps) => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true
-      return
-    }
-
-    if (!e.scrollUpdateWasRequested) {
-      if (
-        followRef.current &&
-        outerRef.current?.scrollHeight !== outerRef.current?.offsetHeight
-      ) {
-        sendEventTelemetry({
-          event: TelemetryEvent.PUBSUB_AUTOSCROLL_PAUSED,
-          eventData: {
-            databaseId: instanceId,
-          },
-        })
-      }
-      followRef.current = false
-      setShowAnchor(true)
-    }
-
-    if (!outerRef.current) {
-      return
-    }
-
-    if (
-      e.scrollOffset + outerRef.current.offsetHeight ===
-      outerRef.current.scrollHeight
-    ) {
-      if (
-        !followRef.current &&
-        outerRef.current.scrollHeight !== outerRef.current.offsetHeight
-      ) {
-        sendEventTelemetry({
-          event: TelemetryEvent.PUBSUB_AUTOSCROLL_RESUMED,
-          eventData: {
-            databaseId: instanceId,
-          },
-        })
-      }
-      followRef.current = true
-      setShowAnchor(false)
-    }
-  }, [])
-
-  const Row = ({ index, style }: ListChildComponentProps) => {
-    const rowRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-      if (rowRef.current) {
-        setRowHeight(index, rowRef.current?.clientHeight)
-      }
-    }, [rowRef])
-
-    const { channel, message, time } = items[index]
-
-    return (
-      <div style={style} className={styles.item} data-testid={`row-${index}`}>
-        <div className={styles.time}>
-          <FormatedDate date={time} />
-        </div>
-        <div className={styles.channel}>
-          <RiTooltip content={channel} position="bottom">
-            <div className={styles.channelAnchor}>{channel}</div>
-          </RiTooltip>
-        </div>
-        <div className={styles.message} ref={rowRef}>
-          <span>{message}</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <List
-        height={height}
-        itemCount={items.length}
-        itemSize={getRowHeight}
-        ref={listRef}
-        width={width - PROTRUDING_OFFSET}
-        className={styles.listContent}
-        outerRef={outerRef}
-        onScroll={handleScroll}
-        overscanCount={30}
-      >
-        {Row}
-      </List>
-      {showAnchor && (
-        <IconButton
-          icon={ChevronDownIcon}
-          className={styles.anchorBtn}
-          onClick={handleAnchorClick}
-          data-testid="messages-list-anchor-btn"
-          aria-label="button scroll down"
-        />
-      )}
-    </>
-  )
-}
-
-export default MessagesList
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/index.ts b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/index.ts
deleted file mode 100644
index b8c4ff258f..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import MessagesList from './MessagesList'
-
-export default MessagesList
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss
deleted file mode 100644
index 54a6b9d8dd..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/styles.module.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-.time,
-.channel,
-.message {
-  display: inline-block !important;
-  font-size: 13px;
-  line-height: 18px;
-  letter-spacing: -0.13px;
-  padding-bottom: 10px;
-  vertical-align: text-top;
-}
-
-.time {
-  color: var(--defaultGreenColor);
-  width: 150px;
-  padding-right: 4px;
-}
-
-.channel {
-  color: var(--euiColorMediumShade);
-  width: 220px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.channelAnchor {
-  max-width: 220px;
-  padding-right: 12px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.message {
-  width: calc(100% - 372px);
-  color: var(--htmlColor);
-  word-break: break-word;
-
-  span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-}
-
-.header {
-  width: 100%;
-  display: flex;
-  height: 24px;
-
-  .time,
-  .channel,
-  .message {
-    font-size: 14px;
-    line-height: 24px;
-    color: var(--htmlColor);
-  }
-}
-
-.wrapperContainer {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-
-.listContainer {
-  height: 100%;
-  width: 100%;
-  padding-top: 14px;
-  padding-right: 6px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.listContent {
-  @include eui.scrollBar;
-}
-
-.anchorBtn {
-  position: absolute;
-  z-index: 10;
-  bottom: 10px;
-  right: 28px;
-  background-color: var(--euiColorSecondary) !important;
-  color: var(--euiColorPrimaryText) !important;
-  width: 36px !important;
-  height: 36px !important;
-
-  box-shadow: 0 3px 6px #00000099 !important;
-  border-radius: 18px !important;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
index f42cb4f5b0..cb4cd2f8e8 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import AutoSizer from 'react-virtualized-auto-sizer'
 
 import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances'
 import { pubSubSelector } from 'uiSrc/slices/pubsub/pubsub'
@@ -9,7 +8,6 @@ import { CommandsVersions } from 'uiSrc/constants/commandsVersions'
 import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
 import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
 import EmptyMessagesList from './EmptyMessagesList'
-import MessagesList from './MessagesList'
 
 import { Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
@@ -17,7 +15,40 @@ import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
 import { HorizontalSpacer } from 'uiSrc/components/base/layout'
 import SubscribeForm from '../subscribe-form'
 import PatternsInfo from '../patternsInfo'
-import { InnerContainer, Wrapper } from './MessageListWrapper.styles'
+import { Wrapper } from './MessageListWrapper.styles'
+import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
+import { FormatedDate } from 'uiSrc/components'
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+
+const columns: ColumnDef<IMessage>[] = [
+  {
+    id: 'time',
+    header: 'Timestamp',
+    accessorKey: 'time',
+    size: 40,
+    cell: ({ getValue }) => {
+      const date = (getValue() as number) * 1000
+
+      return <FormatedDate date={date} />
+    },
+  },
+  {
+    id: 'channel',
+    header: `Channel`,
+    accessorKey: 'channel',
+    size: 30,
+    cell: ({ getValue }) => {
+      const channel = getValue() as number
+
+      return <Text>{channel}</Text>
+    },
+  },
+  {
+    id: 'message',
+    header: 'Message',
+    accessorKey: 'message',
+  },
+]
 
 const MessagesListWrapper = () => {
   const {
@@ -48,7 +79,7 @@ const MessagesListWrapper = () => {
 
   if (hasMessages || isSubscribed) {
     return (
-      <Wrapper>
+      <Wrapper gap="l">
         <Row align="center" justify="between" grow={false}>
           <Row align="center" gap="m">
             <PatternsInfo channels={channels} />
@@ -72,29 +103,15 @@ const MessagesListWrapper = () => {
           </Row>
         </Row>
 
-        <InnerContainer grow={true} data-testid="messages-list" gap="m">
-          <Row grow={false}>
-            <Text>Timestamp</Text>
-            <HorizontalSpacer />
-            <Text>Channel</Text>
-            <HorizontalSpacer />
-            <Text>Message</Text>
-          </Row>
-
-          {hasMessages && (
-            <AutoSizer>
-              {({ width, height }) => (
-                <MessagesList items={messages} width={width} height={height} />
-              )}
-            </AutoSizer>
-          )}
-
-          {!hasMessages && (
-            <Row grow={false} justify="center">
-              <Text>No messages published yet</Text>
-            </Row>
-          )}
-        </InnerContainer>
+        <div data-testid="messages-list">
+          <Table
+            columns={columns}
+            data={messages}
+            maxHeight="50vh"
+            stripedRows
+            emptyState="No messages published yet"
+          />
+        </div>
       </Wrapper>
     )
   }

From 3452f88cc71a89e3b379ff8d38d947c872904834 Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Thu, 13 Nov 2025 14:41:45 +0200
Subject: [PATCH 2/4] reafactor(ui): export pub/sub table columns outside of
 the main component

re #RI-7714
---
 .../messages-list/MessagesListWrapper.tsx     | 36 +++++--------------
 .../column-definitions/ChannelColumn.tsx      | 19 ++++++++++
 .../column-definitions/MessageColumn.tsx      | 10 ++++++
 .../column-definitions/TimestampColumn.tsx    | 19 ++++++++++
 .../messages-list/column-definitions/index.ts |  3 ++
 5 files changed, 59 insertions(+), 28 deletions(-)
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts

diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
index cb4cd2f8e8..7248b833db 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
@@ -17,37 +17,17 @@ import SubscribeForm from '../subscribe-form'
 import PatternsInfo from '../patternsInfo'
 import { Wrapper } from './MessageListWrapper.styles'
 import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
-import { FormatedDate } from 'uiSrc/components'
 import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+import {
+  ChannelColumn,
+  MessageColumn,
+  TimestampColumn,
+} from './column-definitions'
 
 const columns: ColumnDef<IMessage>[] = [
-  {
-    id: 'time',
-    header: 'Timestamp',
-    accessorKey: 'time',
-    size: 40,
-    cell: ({ getValue }) => {
-      const date = (getValue() as number) * 1000
-
-      return <FormatedDate date={date} />
-    },
-  },
-  {
-    id: 'channel',
-    header: `Channel`,
-    accessorKey: 'channel',
-    size: 30,
-    cell: ({ getValue }) => {
-      const channel = getValue() as number
-
-      return <Text>{channel}</Text>
-    },
-  },
-  {
-    id: 'message',
-    header: 'Message',
-    accessorKey: 'message',
-  },
+  TimestampColumn(),
+  ChannelColumn(),
+  MessageColumn(),
 ]
 
 const MessagesListWrapper = () => {
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx
new file mode 100644
index 0000000000..401ba22170
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
+import { Text } from 'uiSrc/components/base/text'
+
+export const ChannelColumn = (): ColumnDef<IMessage> => {
+  return {
+    id: 'channel',
+    header: `Channel`,
+    accessorKey: 'channel',
+    size: 30,
+    cell: ({ getValue }) => {
+      const channel = getValue() as number
+
+      return <Text>{channel}</Text>
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx
new file mode 100644
index 0000000000..663f8a480d
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx
@@ -0,0 +1,10 @@
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
+
+export const MessageColumn = (): ColumnDef<IMessage> => {
+  return {
+    id: 'message',
+    header: 'Message',
+    accessorKey: 'message',
+  }
+}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx
new file mode 100644
index 0000000000..0a8945d072
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx
@@ -0,0 +1,19 @@
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+import React from 'react'
+
+import { FormatedDate } from 'uiSrc/components'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
+
+export const TimestampColumn = (): ColumnDef<IMessage> => {
+  return {
+    id: 'time',
+    header: 'Timestamp',
+    accessorKey: 'time',
+    size: 40,
+    cell: ({ getValue }) => {
+      const date = (getValue() as number) * 1000
+
+      return <FormatedDate date={date} />
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts
new file mode 100644
index 0000000000..0290b92893
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts
@@ -0,0 +1,3 @@
+export * from './TimestampColumn'
+export * from './ChannelColumn'
+export * from './MessageColumn'

From 4bbdda7352f6b4dd8bc67c18f39db0d03661cadc Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Fri, 14 Nov 2025 16:14:03 +0200
Subject: [PATCH 3/4] reafctor(ui): rework the composition for the pub/sub
 table

re #RI-7714
---
 .../MessagesListTable.config.tsx              | 31 +++++++++++++++++++
 .../MessagesListTable.constants.ts            | 14 +++++++++
 .../MessagesListTable.types.ts                |  7 +++++
 .../MessagesListTableCellTimestamp.tsx        | 12 +++++++
 .../messages-list/MessagesListWrapper.tsx     | 17 ++--------
 .../column-definitions/ChannelColumn.tsx      | 19 ------------
 .../column-definitions/MessageColumn.tsx      | 10 ------
 .../column-definitions/TimestampColumn.tsx    | 19 ------------
 .../messages-list/column-definitions/index.ts |  3 --
 9 files changed, 67 insertions(+), 65 deletions(-)
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.config.tsx
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.constants.ts
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.types.ts
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/components/MessagesListTableCellTimestamp.tsx
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts

diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.config.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.config.tsx
new file mode 100644
index 0000000000..1078e17434
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.config.tsx
@@ -0,0 +1,31 @@
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
+import {
+  PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP,
+  PubSubTableColumn,
+} from './MessagesListTable.constants'
+import MessagesListTableCellTimestamp from './components/MessagesListTableCellTimestamp'
+
+export const PUB_SUB_TABLE_COLUMNS: ColumnDef<IMessage>[] = [
+  {
+    id: PubSubTableColumn.Timestamp,
+    accessorKey: PubSubTableColumn.Timestamp,
+    header: PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP.get(
+      PubSubTableColumn.Timestamp,
+    ),
+    size: 30,
+    enableSorting: true,
+    cell: MessagesListTableCellTimestamp,
+  },
+  {
+    id: PubSubTableColumn.Channel,
+    accessorKey: PubSubTableColumn.Channel,
+    header: PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP.get(PubSubTableColumn.Channel),
+    size: 40,
+  },
+  {
+    id: PubSubTableColumn.Message,
+    accessorKey: PubSubTableColumn.Message,
+    header: PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP.get(PubSubTableColumn.Message),
+  },
+]
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.constants.ts b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.constants.ts
new file mode 100644
index 0000000000..e2818cf7a0
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.constants.ts
@@ -0,0 +1,14 @@
+export enum PubSubTableColumn {
+  Timestamp = 'time',
+  Channel = 'channel',
+  Message = 'message',
+}
+
+export const PUB_SUB_TABLE_COLUMN_FIELD_NAME_MAP = new Map<
+  PubSubTableColumn,
+  string
+>([
+  [PubSubTableColumn.Timestamp, 'Timestamp'],
+  [PubSubTableColumn.Channel, 'Channel'],
+  [PubSubTableColumn.Message, 'Message'],
+])
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.types.ts b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.types.ts
new file mode 100644
index 0000000000..ff2ee074b9
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/MessagesListTable.types.ts
@@ -0,0 +1,7 @@
+import { ReactElement } from 'react'
+import { CellContext } from 'uiSrc/components/base/layout/table'
+import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
+
+export type IMessagesListTableCell = (
+  props: CellContext<IMessage, unknown>,
+) => ReactElement<any, any> | null
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/components/MessagesListTableCellTimestamp.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/components/MessagesListTableCellTimestamp.tsx
new file mode 100644
index 0000000000..dc254b9972
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListTable/components/MessagesListTableCellTimestamp.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+import { FormatedDate } from 'uiSrc/components'
+import { IMessagesListTableCell } from '../MessagesListTable.types'
+
+const MessagesListTableCellTimestamp: IMessagesListTableCell = ({ row }) => {
+  const date = row.original.time * 1000
+
+  return <FormatedDate date={date} />
+}
+
+export default MessagesListTableCellTimestamp
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
index 7248b833db..1c4071c3c4 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
@@ -16,19 +16,8 @@ import { HorizontalSpacer } from 'uiSrc/components/base/layout'
 import SubscribeForm from '../subscribe-form'
 import PatternsInfo from '../patternsInfo'
 import { Wrapper } from './MessageListWrapper.styles'
-import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
-import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
-import {
-  ChannelColumn,
-  MessageColumn,
-  TimestampColumn,
-} from './column-definitions'
-
-const columns: ColumnDef<IMessage>[] = [
-  TimestampColumn(),
-  ChannelColumn(),
-  MessageColumn(),
-]
+import { Table } from 'uiSrc/components/base/layout/table'
+import { PUB_SUB_TABLE_COLUMNS } from './MessagesListTable/MessagesListTable.config'
 
 const MessagesListWrapper = () => {
   const {
@@ -85,7 +74,7 @@ const MessagesListWrapper = () => {
 
         <div data-testid="messages-list">
           <Table
-            columns={columns}
+            columns={PUB_SUB_TABLE_COLUMNS}
             data={messages}
             maxHeight="50vh"
             stripedRows
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx
deleted file mode 100644
index 401ba22170..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/ChannelColumn.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
-import { ColumnDef } from 'uiSrc/components/base/layout/table'
-import { Text } from 'uiSrc/components/base/text'
-
-export const ChannelColumn = (): ColumnDef<IMessage> => {
-  return {
-    id: 'channel',
-    header: `Channel`,
-    accessorKey: 'channel',
-    size: 30,
-    cell: ({ getValue }) => {
-      const channel = getValue() as number
-
-      return <Text>{channel}</Text>
-    },
-  }
-}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx
deleted file mode 100644
index 663f8a480d..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/MessageColumn.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
-import { ColumnDef } from 'uiSrc/components/base/layout/table'
-
-export const MessageColumn = (): ColumnDef<IMessage> => {
-  return {
-    id: 'message',
-    header: 'Message',
-    accessorKey: 'message',
-  }
-}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx
deleted file mode 100644
index 0a8945d072..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/TimestampColumn.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface'
-import React from 'react'
-
-import { FormatedDate } from 'uiSrc/components'
-import { ColumnDef } from 'uiSrc/components/base/layout/table'
-
-export const TimestampColumn = (): ColumnDef<IMessage> => {
-  return {
-    id: 'time',
-    header: 'Timestamp',
-    accessorKey: 'time',
-    size: 40,
-    cell: ({ getValue }) => {
-      const date = (getValue() as number) * 1000
-
-      return <FormatedDate date={date} />
-    },
-  }
-}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts b/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts
deleted file mode 100644
index 0290b92893..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/column-definitions/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './TimestampColumn'
-export * from './ChannelColumn'
-export * from './MessageColumn'

From 94d8901e4ca628cfce23daa005403a5e6e364f3d Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Fri, 14 Nov 2025 16:43:29 +0200
Subject: [PATCH 4/4] feat(ui): update configuration o fthe pub/sub table

- enable paghnation

re #RI-7714
- remove fixed max height
---
 .../pub-sub/components/messages-list/MessagesListWrapper.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
index 1c4071c3c4..fb5941ef5c 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
@@ -18,6 +18,7 @@ import PatternsInfo from '../patternsInfo'
 import { Wrapper } from './MessageListWrapper.styles'
 import { Table } from 'uiSrc/components/base/layout/table'
 import { PUB_SUB_TABLE_COLUMNS } from './MessagesListTable/MessagesListTable.config'
+import { PubSubTableColumn } from './MessagesListTable/MessagesListTable.constants'
 
 const MessagesListWrapper = () => {
   const {
@@ -76,8 +77,10 @@ const MessagesListWrapper = () => {
           <Table
             columns={PUB_SUB_TABLE_COLUMNS}
             data={messages}
-            maxHeight="50vh"
             stripedRows
+            enableSorting
+            paginationEnabled
+            defaultSorting={[{ id: PubSubTableColumn.Timestamp, desc: true }]}
             emptyState="No messages published yet"
           />
         </div>