List View for Dashboard (#4517)

* refactor: initial setup for list view logs * feat: done with basic functionality panel view logs * feat: added panel view * fix: discard and edit issue * refactor: removed not required params from uselogdata * feat: trace list view * fix: loader * refactor: traces table component css update * refactor: added open san font and udpated css * fix: full view traces issue and search column css update * refactor: remove consoles * refactor: removed commented code and updated logic * chore: build failure * refactor: icons change for apdd panels * refactor: rebased to develop * refactor: added support for light mode * refactor: fix tsc * fix: query select issue * chore: table column to lower case * refactor: updated styling for both log and traces tables * chore: removed comment code * chore: remove the resizable block from table header traces * refactor: log table header and body stayling updated * fix: query range on every column add * refactor: styling updates * fix: query range log respect global time * refactor: css update log table header * refactor: removed unnecessary code * refactor: log query range respect globaltime * refactor: dropdown support to qb * refactor: remove creating alert for list view * refactor: fix the height of column select dropdown * fix: dropdown suggestion for orderby * refactor: remove the commented code * refactor: full view respect global time * refactor: css updates * refactor: should fire query range on variable change * refactor: css updates for log list view * refactor: removed the unused changes * refactor: handle error state for exploere columns * refactor: handle error state for explorer columns * chore: generate yarn lock file * refactor: pagination for order by timestamp * fix: full text body contain issue * refactor: inverted the operator for next and previous button config * refactor: rename variable handle light mode * fix: no log issue * chore: renamed variables --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2025-07-25 08:24:24 +08:00 · 2024-02-20 16:21:07 +05:30 · 2024-02-20 16:21:07 +05:30 · ecd5ce92c2
commit ecd5ce92c2
parent aa67b47053
67 changed files with 2371 additions and 259 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -84,6 +84,7 @@
 		"papaparse": "5.4.1",
 		"react": "18.2.0",
 		"react-addons-update": "15.6.3",
+		"react-beautiful-dnd": "13.1.1",
 		"react-dnd": "16.0.1",
 		"react-dnd-html5-backend": "16.0.1",
 		"react-dom": "18.2.0",
@ -157,6 +158,7 @@
 		"@types/papaparse": "5.3.7",
 		"@types/react": "18.0.26",
 		"@types/react-addons-update": "0.14.21",
+		"@types/react-beautiful-dnd": "13.1.8",
 		"@types/react-dom": "18.0.10",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/react-helmet-async": "1.0.3",
--- a/frontend/src/assets/Dashboard/List.tsx
+++ b/frontend/src/assets/Dashboard/List.tsx
@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+
+function ListIcon({
+	fillColor,
+}: {
+	fillColor: CSSProperties['color'];
+}): JSX.Element {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="30"
+			height="30"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={fillColor}
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<line x1="8" x2="21" y1="6" y2="6" />
+			<line x1="8" x2="21" y1="12" y2="12" />
+			<line x1="8" x2="21" y1="18" y2="18" />
+			<line x1="3" x2="3.01" y1="6" y2="6" />
+			<line x1="3" x2="3.01" y1="12" y2="12" />
+			<line x1="3" x2="3.01" y1="18" y2="18" />
+		</svg>
+	);
+}
+
+export default ListIcon;
--- a/frontend/src/assets/Dashboard/Table.tsx
+++ b/frontend/src/assets/Dashboard/Table.tsx
@ -1,18 +1,48 @@
-function Table(): JSX.Element {
+import { CSSProperties } from 'react';
+
+function TableIcon({
+	fillColor,
+}: {
+	fillColor: CSSProperties['color'];
+}): JSX.Element {
 	return (
 		<svg
-			width="48"
-			height="48"
-			viewBox="0 0 48 48"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path
-				d="M41.0667 0H6.39993C2.87982 0 0 2.87982 0 6.39993V41.6001C0 45.1202 2.87982 48 6.39993 48H41.0667C44.5868 48 47.4667 45.1202 47.4667 41.6001V6.39993C47.4667 2.87982 44.5868 0 41.0667 0ZM44.2669 6.39993V9.60013H32.0002V3.2002H41.0668C42.8268 3.2002 44.267 4.63992 44.267 6.40003L44.2669 6.39993ZM17.6002 9.60013V3.2002H29.8669V9.60013H17.6002ZM29.8669 11.7333V44.8001H17.6002L17.6005 11.7333H29.8669ZM6.40012 3.20011H15.4667V9.60004H3.20001V6.39984C3.20001 4.63983 4.64011 3.20001 6.40022 3.20001L6.40012 3.20011ZM3.19992 41.6003V11.7335H15.4666V44.8003H6.40003C4.64002 44.8003 3.19982 43.3606 3.19982 41.6005L3.19992 41.6003ZM41.0667 44.8001H32.0001V11.7333H44.2668V41.6001C44.2668 43.3601 42.8267 44.7999 41.0666 44.7999L41.0667 44.8001ZM5.33326 18.6666C5.33326 18.08 5.81317 17.6001 6.39983 17.6001H12.2667C12.8534 17.6001 13.3333 18.08 13.3333 18.6666C13.3333 19.2533 12.8534 19.7332 12.2667 19.7332H6.39983C5.81315 19.7332 5.33326 19.2533 5.33326 18.6666ZM13.3333 25.0666C13.3333 25.6533 12.8534 26.1332 12.2667 26.1332H6.39983C5.81315 26.1332 5.33326 25.6532 5.33326 25.0666C5.33326 24.4799 5.81317 24 6.39983 24H12.2667C12.8534 24 13.3333 24.4799 13.3333 25.0666ZM13.3333 31.4665C13.3333 32.0532 12.8534 32.5331 12.2667 32.5331H6.39983C5.81315 32.5331 5.33326 32.0532 5.33326 31.4665C5.33326 30.8798 5.81317 30.3999 6.39983 30.3999H12.2667C12.8534 30.3999 13.3333 30.8798 13.3333 31.4665ZM13.3333 37.8668C13.3333 38.4535 12.8534 38.9334 12.2667 38.9334H6.39983C5.81315 38.9334 5.33326 38.4535 5.33326 37.8668C5.33326 37.2801 5.81317 36.8002 6.39983 36.8002H12.2667C12.8534 36.7999 13.3333 37.2802 13.3333 37.8668ZM19.7332 18.6667C19.7332 18.0801 20.2131 17.6002 20.7998 17.6002H26.6667C27.2534 17.6002 27.7333 18.0801 27.7333 18.6667C27.7333 19.2534 27.2533 19.7333 26.6667 19.7333H20.7998C20.2131 19.7333 19.7332 19.2534 19.7332 18.6667ZM19.7332 25.0667C19.7332 24.48 20.2131 24.0001 20.7998 24.0001H26.6667C27.2534 24.0001 27.7333 24.48 27.7333 25.0667C27.7333 25.6534 27.2533 26.1332 26.6667 26.1332H20.7998C20.2131 26.1332 19.7332 25.6533 19.7332 25.0667ZM19.7332 31.4666C19.7332 30.8799 20.2131 30.4 20.7998 30.4H26.6667C27.2534 30.4 27.7333 30.8799 27.7333 31.4666C27.7333 32.0533 27.2533 32.5332 26.6667 32.5332H20.7998C20.2131 32.5336 19.7332 32.0533 19.7332 31.4666ZM27.7333 37.8669C27.7333 38.4536 27.2533 38.9335 26.6667 38.9335H20.7998C20.2131 38.9335 19.7332 38.4536 19.7332 37.8669C19.7332 37.2802 20.2131 36.8003 20.7998 36.8003H26.6667C27.2534 36.8 27.7333 37.2803 27.7333 37.8669ZM42.1333 18.6668C42.1333 19.2535 41.6534 19.7334 41.0667 19.7334H35.1999C34.6132 19.7334 34.1333 19.2535 34.1333 18.6668C34.1333 18.0802 34.6132 17.6003 35.1999 17.6003H41.0667C41.6534 17.6003 42.1333 18.0802 42.1333 18.6668ZM42.1333 25.0668C42.1333 25.6535 41.6534 26.1333 41.0667 26.1333H35.1999C34.6132 26.1333 34.1333 25.6534 34.1333 25.0668C34.1333 24.4801 34.6132 24.0002 35.1999 24.0002H41.0667C41.6534 24.0002 42.1333 24.4801 42.1333 25.0668ZM42.1333 31.4667C42.1333 32.0534 41.6534 32.5333 41.0667 32.5333H35.1999C34.6132 32.5333 34.1333 32.0534 34.1333 31.4667C34.1333 30.88 34.6132 30.4001 35.1999 30.4001H41.0667C41.6534 30.4001 42.1333 30.88 42.1333 31.4667ZM42.1333 37.867C42.1333 38.4537 41.6534 38.9336 41.0667 38.9336H35.1999C34.6132 38.9336 34.1333 38.4537 34.1333 37.867C34.1333 37.2803 34.6132 36.8004 35.1999 36.8004H41.0667C41.6534 36.8001 42.1333 37.2803 42.1333 37.867Z"
-				fill="#1668DC"
+				d="M12 3V21"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M3 9H21"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M3 15H21"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</svg>
 	);
 }

-export default Table;
+export default TableIcon;
--- a/frontend/src/assets/Dashboard/TimeSeries.tsx
+++ b/frontend/src/assets/Dashboard/TimeSeries.tsx
--- a/frontend/src/assets/Dashboard/Value.tsx
+++ b/frontend/src/assets/Dashboard/Value.tsx
@ -1,19 +1,29 @@
-function Value(): JSX.Element {
+import { CSSProperties } from 'react';
+
+function Value({
+	fillColor,
+}: {
+	fillColor: CSSProperties['color'];
+}): JSX.Element {
 	return (
 		<svg
-			width="68"
-			height="48"
-			viewBox="0 0 68 48"
+			width="30"
+			height="30"
+			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path
-				d="M0 5.914V42.086C0 43.6542 0.62289 45.1585 1.73183 46.2675C2.84078 47.3771 4.34511 48 5.91329 48H61.5019C63.0701 48 64.5744 47.3771 65.6834 46.2675C66.7923 45.1585 67.4152 43.6542 67.4152 42.086V5.914C67.4152 4.34578 66.7923 2.84152 65.6834 1.73253C64.5744 0.623576 63.0701 0 61.5019 0H5.91329C4.34508 0 2.84082 0.623576 1.73183 1.73253C0.622872 2.84149 0 4.34581 0 5.914ZM63.4735 5.914V42.086C63.4735 42.6092 63.2659 43.1104 62.896 43.4803C62.5261 43.8495 62.0249 44.0571 61.5024 44.0571H5.91382C4.82549 44.0571 3.94277 43.175 3.94277 42.086V5.91403C3.94277 4.8257 4.82553 3.94298 5.91382 3.94298H61.5024C62.0249 3.94298 62.5261 4.15061 62.896 4.52048C63.2659 4.88968 63.4735 5.39148 63.4735 5.914Z"
-				fill="#1554AD"
+				d="M9 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V9M9 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9M9 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V9M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V9"
+				stroke="white"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill={fillColor}
 			/>
 			<path
-				d="M13.7695 17.668C10.1016 17.668 7.48828 20.1758 7.48828 23.6094V23.6328C7.48828 26.8438 9.76172 29.2109 13.0078 29.2109C15.3281 29.2109 16.8047 28.0273 17.4258 26.6914H17.6602C17.6602 26.8203 17.6484 26.9492 17.6484 27.0781C17.5195 30.3125 16.3828 32.9375 13.6992 32.9375C12.2109 32.9375 11.168 32.1641 10.7227 30.9805L10.6875 30.8633H7.71094L7.73438 30.9922C8.27344 33.582 10.5938 35.4219 13.6992 35.4219C17.9531 35.4219 20.5195 32.0469 20.5195 26.3516V26.3281C20.5195 20.2344 17.3789 17.668 13.7695 17.668ZM13.7578 26.8906C11.8359 26.8906 10.4414 25.4844 10.4414 23.5273V23.5039C10.4414 21.6172 11.9297 20.1289 13.793 20.1289C15.668 20.1289 17.1328 21.6406 17.1328 23.5742V23.5977C17.1328 25.5078 15.668 26.8906 13.7578 26.8906ZM24.832 35.2344C25.9102 35.2344 26.6953 34.4258 26.6953 33.3828C26.6953 32.3398 25.9102 31.5312 24.832 31.5312C23.7656 31.5312 22.9688 32.3398 22.9688 33.3828C22.9688 34.4258 23.7656 35.2344 24.832 35.2344ZM37.8633 35H40.7578V31.7539H43.0312V29.2578H40.7578V18.0898H36.4805C34.1836 21.582 31.7812 25.4727 29.5898 29.2812V31.7539H37.8633V35ZM32.4023 29.3281V29.1523C34.043 26.2812 36 23.1523 37.7344 20.5039H37.9102V29.3281H32.4023ZM52.6406 35.4219C56.3086 35.4219 58.9219 32.9141 58.9219 29.4805V29.457C58.9219 26.2461 56.6484 23.8789 53.4023 23.8789C51.082 23.8789 49.6055 25.0625 48.9844 26.3984H48.75C48.75 26.2695 48.7617 26.1406 48.7617 26.0117C48.8906 22.7773 50.0273 20.1523 52.7109 20.1523C54.1992 20.1523 55.2422 20.9258 55.6875 22.1094L55.7344 22.2266H58.6992L58.6758 22.0977C58.1367 19.5078 55.8164 17.668 52.7109 17.668C48.457 17.668 45.8906 21.043 45.8906 26.7383V26.7617C45.8906 32.8555 49.0312 35.4219 52.6406 35.4219ZM49.2773 29.5156V29.4922C49.2773 27.582 50.7422 26.1992 52.6523 26.1992C54.5742 26.1992 55.9688 27.6055 55.9688 29.5625V29.5859C55.9688 31.4727 54.4922 32.9609 52.6172 32.9609C50.7422 32.9609 49.2773 31.4492 49.2773 29.5156Z"
-				fill="#1668DC"
+				d="M9.76562 15.6221C9.19922 15.6221 8.78906 15.3047 8.78906 14.6406V14.3818H6.58691C5.83984 14.3818 5.32227 13.9082 5.32227 13.2246C5.32227 12.8486 5.44922 12.4531 5.72266 11.9648C6.18164 11.1396 6.61621 10.4219 7.1582 9.57227C7.74414 8.64941 8.22266 8.33203 9.02832 8.33203C10.0586 8.33203 10.7422 8.90332 10.7422 9.76758V12.7949H10.9033C11.4453 12.7949 11.7041 13.1318 11.7041 13.5908C11.7041 14.0498 11.4404 14.3818 10.8984 14.3818H10.7422V14.6406C10.7422 15.3047 10.3271 15.6221 9.76562 15.6221ZM8.84766 12.8779V9.83594H8.80859C8.10059 10.8711 7.58789 11.6914 7.0166 12.8193V12.8779H8.84766ZM13.2959 15.5C12.6221 15.5 12.3291 15.124 12.3291 14.6064C12.3291 14.2256 12.5049 13.9326 12.8955 13.6055L14.834 11.9453C15.625 11.2666 15.8496 10.959 15.8496 10.5391C15.8496 10.0947 15.5078 9.78711 15.0049 9.78711C14.6338 9.78711 14.3799 9.95801 14.1162 10.3389C13.8428 10.7393 13.5938 10.8857 13.1982 10.8857C12.6709 10.8857 12.3486 10.5781 12.3486 10.0801C12.3486 9.91895 12.3779 9.76758 12.4414 9.62109C12.8125 8.78125 13.8037 8.25879 15.0342 8.25879C16.748 8.25879 17.8418 9.12305 17.8418 10.4023C17.8418 11.3496 17.3535 11.8428 16.2598 12.79L14.9756 13.8984V13.9375H17.2119C17.7295 13.9375 18.0225 14.2451 18.0225 14.7188C18.0225 15.1826 17.7295 15.5 17.2119 15.5H13.2959Z"
+				fill={fillColor}
 			/>
 		</svg>
 	);
--- a/frontend/src/components/LogDetail/LogDetail.interfaces.ts
+++ b/frontend/src/components/LogDetail/LogDetail.interfaces.ts
@ -8,6 +8,7 @@ import { VIEWS } from './constants';
 export type LogDetailProps = {
 	log: ILog | null;
 	selectedTab: VIEWS;
+	isListViewPanel?: boolean;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@ -35,6 +35,7 @@ function LogDetail({
 	onAddToQuery,
 	onClickActionItem,
 	selectedTab,
+	isListViewPanel = false,
 }: LogDetailProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
@ -190,6 +191,7 @@ function LogDetail({
 					logData={log}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onClickActionItem}
+					isListViewPanel={isListViewPanel}
 				/>
 			)}
 			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
--- a/frontend/src/components/Logs/TableView/config.ts
+++ b/frontend/src/components/Logs/TableView/config.ts
@ -22,6 +22,10 @@ export const defaultTableStyle: CSSProperties = {
 	maxWidth: '40rem',
 };

+export const defaultListViewPanelStyle: CSSProperties = {
+	maxWidth: '40rem',
+};
+
 export const tableScroll: TableProps<Record<string, unknown>>['scroll'] = {
 	x: true,
 };
--- a/frontend/src/components/Logs/TableView/types.ts
+++ b/frontend/src/components/Logs/TableView/types.ts
@ -24,6 +24,7 @@ export type UseTableViewProps = {
 	onClickExpand?: (log: ILog) => void;
 	activeLog?: ILog | null;
 	activeContextLog?: ILog | null;
+	isListViewPanel?: boolean;
 } & LogsTableViewProps;

 export type ActionsColumnProps = {
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@ -13,7 +13,11 @@ import { useMemo } from 'react';
 import LogStateIndicator, {
 	LogType,
 } from '../LogStateIndicator/LogStateIndicator';
-import { defaultTableStyle, getDefaultCellStyle } from './config';
+import {
+	defaultListViewPanelStyle,
+	defaultTableStyle,
+	getDefaultCellStyle,
+} from './config';
 import { TableBodyContent } from './styles';
 import {
 	ColumnTypeRender,
@ -31,6 +35,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		appendTo = 'center',
 		activeContextLog,
 		activeLog,
+		isListViewPanel,
 	} = props;

 	const isDarkMode = useIsDarkMode();
@ -48,7 +53,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				key: name,
 				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
-						style: getDefaultCellStyle(isDarkMode),
+						style: isListViewPanel
+							? defaultListViewPanelStyle
+							: getDefaultCellStyle(isDarkMode),
 					},
 					children: (
 						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
@ -58,6 +65,10 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				}),
 			}));

+		if (isListViewPanel) {
+			return [...fieldColumns];
+		}
+
 		return [
 			{
 				title: 'timestamp',
@ -110,6 +121,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		];
 	}, [
 		fields,
+		isListViewPanel,
 		appendTo,
 		isDarkMode,
 		linesPerRow,
--- a/frontend/src/constants/panelTypes.ts
+++ b/frontend/src/constants/panelTypes.ts
@ -1,6 +1,9 @@
 import Uplot from 'components/Uplot';
 import GridTableComponent from 'container/GridTableComponent';
 import GridValueComponent from 'container/GridValueComponent';
+import LogsPanelComponent from 'container/LogsPanelTable/LogsPanelComponent';
+import TracesTableComponent from 'container/TracesTableComponent/TracesTableComponent';
+import { DataSource } from 'types/common/queryBuilder';

 import { PANEL_TYPES } from './queryBuilder';

@ -9,10 +12,27 @@ export const PANEL_TYPES_COMPONENT_MAP = {
 	[PANEL_TYPES.VALUE]: GridValueComponent,
 	[PANEL_TYPES.TABLE]: GridTableComponent,
 	[PANEL_TYPES.TRACE]: null,
-	[PANEL_TYPES.LIST]: null,
+	[PANEL_TYPES.LIST]: LogsPanelComponent,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 } as const;

+export const getComponentForPanelType = (
+	panelType: PANEL_TYPES,
+	dataSource?: DataSource,
+): React.ComponentType<any> | null => {
+	const componentsMap = {
+		[PANEL_TYPES.TIME_SERIES]: Uplot,
+		[PANEL_TYPES.VALUE]: GridValueComponent,
+		[PANEL_TYPES.TABLE]: GridTableComponent,
+		[PANEL_TYPES.TRACE]: null,
+		[PANEL_TYPES.LIST]:
+			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
+		[PANEL_TYPES.EMPTY_WIDGET]: null,
+	};
+
+	return componentsMap[panelType];
+};
+
 export const AVAILABLE_EXPORT_PANEL_TYPES = [
 	PANEL_TYPES.TIME_SERIES,
 	PANEL_TYPES.TABLE,
--- a/frontend/src/container/Controls/index.tsx
+++ b/frontend/src/container/Controls/index.tsx
@ -16,16 +16,21 @@ function Controls({
 	handleNavigatePrevious,
 	handleNavigateNext,
 	handleCountItemsPerPageChange,
+	isLogPanel = false,
 }: ControlsProps): JSX.Element | null {
 	const isNextAndPreviousDisabled = useMemo(
 		() => isLoading || countPerPage < 0 || totalCount === 0,
 		[isLoading, countPerPage, totalCount],
 	);
-	const isPreviousDisabled = useMemo(() => offset <= 0, [offset]);
-	const isNextDisabled = useMemo(() => totalCount < countPerPage, [
-		countPerPage,
-		totalCount,
-	]);
+	const isPreviousDisabled = useMemo(
+		() => (isLogPanel ? false : offset <= 0 || isNextAndPreviousDisabled),
+		[isLogPanel, isNextAndPreviousDisabled, offset],
+	);
+	const isNextDisabled = useMemo(
+		() =>
+			isLogPanel ? false : totalCount < countPerPage || isNextAndPreviousDisabled,
+		[countPerPage, isLogPanel, isNextAndPreviousDisabled, totalCount],
+	);

 	return (
 		<Container>
@ -33,7 +38,7 @@ function Controls({
 				loading={isLoading}
 				size="small"
 				type="link"
-				disabled={isPreviousDisabled || isNextAndPreviousDisabled}
+				disabled={isPreviousDisabled}
 				onClick={handleNavigatePrevious}
 			>
 				<LeftOutlined /> Previous
@ -42,7 +47,7 @@ function Controls({
 				loading={isLoading}
 				size="small"
 				type="link"
-				disabled={isNextDisabled || isNextAndPreviousDisabled}
+				disabled={isNextDisabled}
 				onClick={handleNavigateNext}
 			>
 				Next <RightOutlined />
@ -68,6 +73,7 @@ function Controls({
 Controls.defaultProps = {
 	offset: 0,
 	perPageOptions: DEFAULT_PER_PAGE_OPTIONS,
+	isLogPanel: false,
 };

 export interface ControlsProps {
@ -79,6 +85,7 @@ export interface ControlsProps {
 	handleNavigatePrevious: () => void;
 	handleNavigateNext: () => void;
 	handleCountItemsPerPageChange: (value: Pagination['limit']) => void;
+	isLogPanel?: boolean;
 }

 export default memo(Controls);
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss
@ -10,7 +10,6 @@
 	.graph-container {
 		height: calc(60% - 40px);
 		min-height: 300px;
-		border: 1px solid #333;
 		width: 100%;
 		padding: 12px;
 		box-sizing: border-box;
@ -18,6 +17,11 @@
 		border-radius: 3px;
 	}

+	.list-graph-container {
+		height: calc(100% - 40px);
+		overflow-y: auto;
+	}
+
 	.disabled {
 		height: calc(100% - 65px);
 	}
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@ -2,9 +2,11 @@ import './WidgetFullView.styles.scss';

 import { SyncOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
+import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import {
 	timeItems,
@ -96,7 +98,7 @@ function FullView({
 		},
 		{
 			queryKey: `FullViewGetMetricsQueryRange-${selectedTime.enum}-${globalSelectedTime}-${widget.id}`,
-			enabled: !isDependedDataLoaded,
+			enabled: !isDependedDataLoaded && widget.panelTypes !== PANEL_TYPES.LIST, // Internally both the list view panel has it's own query range api call, so we don't need to call it again
 		},
 	);

@ -164,6 +166,8 @@ function FullView({
 		parentGraphVisibilityState(graphsVisibilityStates);
 	}, [graphsVisibilityStates, parentGraphVisibilityState]);

+	const isListView = widget.panelTypes === PANEL_TYPES.LIST;
+
 	if (response.isFetching) {
 		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}
@ -192,14 +196,17 @@ function FullView({
 			</div>

 			<div
-				className={
-					isDashboardLocked ? 'graph-container disabled' : 'graph-container'
-				}
+				className={cx('graph-container', {
+					disabled: isDashboardLocked,
+					'list-graph-container': isListView,
+				})}
 				ref={fullViewRef}
 			>
 				{chartOptions && (
 					<GraphContainer
-						style={{ height: '90%' }}
+						style={{
+							height: isListView ? '100%' : '90%',
+						}}
 						isGraphLegendToggleAvailable={canModifyChart}
 					>
 						<GridPanelSwitch
@ -214,6 +221,10 @@ function FullView({
 							query={widget.query}
 							ref={fullViewChartRef}
 							thresholds={widget.thresholds}
+							selectedLogFields={widget.selectedLogFields}
+							dataSource={widget.query.builder.queryData[0].dataSource}
+							selectedTracesFields={widget.selectedTracesFields}
+							selectedTime={selectedTime}
 						/>
 					</GraphContainer>
 				)}
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@ -5,6 +5,7 @@ import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
@ -47,6 +48,7 @@ function WidgetGraphComponent({
 	onClickHandler,
 	onDragSelect,
 	setGraphVisibility,
+	isFetchingResponse,
 }: WidgetGraphComponentProps): JSX.Element {
 	const [deleteModal, setDeleteModal] = useState(false);
 	const [hovered, setHovered] = useState(false);
@ -222,7 +224,11 @@ function WidgetGraphComponent({
 		});
 	};

-	if (queryResponse.isLoading || queryResponse.status === 'idle') {
+	const loadingState =
+		(queryResponse.isLoading || queryResponse.status === 'idle') &&
+		widget.panelTypes !== PANEL_TYPES.LIST;
+
+	if (loadingState) {
 		return (
 			<Skeleton
 				style={{
@ -273,6 +279,7 @@ function WidgetGraphComponent({
 				onCancel={onToggleModelHandler}
 				width="85%"
 				destroyOnClose
+				className="widget-full-view"
 			>
 				<FullView
 					name={`${name}expanded`}
@ -300,10 +307,11 @@ function WidgetGraphComponent({
 					threshold={threshold}
 					headerMenuList={headerMenuList}
 					isWarning={isWarning}
+					isFetchingResponse={isFetchingResponse}
 				/>
 			</div>
 			{queryResponse.isLoading && <Skeleton />}
-			{queryResponse.isSuccess && (
+			{(queryResponse.isSuccess || widget.panelTypes === PANEL_TYPES.LIST) && (
 				<div
 					className={cx('widget-graph-container', widget.panelTypes)}
 					ref={graphRef}
@ -319,6 +327,9 @@ function WidgetGraphComponent({
 						panelData={queryResponse.data?.payload?.data.newResult.data.result || []}
 						query={widget.query}
 						thresholds={widget.thresholds}
+						selectedLogFields={widget.selectedLogFields}
+						dataSource={widget.query.builder?.queryData[0]?.dataSource}
+						selectedTracesFields={widget.selectedTracesFields}
 					/>
 				</div>
 			)}
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@ -116,6 +116,12 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);

+	const queryEnabledCondition =
+		isVisible &&
+		!isEmptyWidget &&
+		isQueryEnabled &&
+		widget.panelTypes !== PANEL_TYPES.LIST;
+
 	const queryResponse = useGetQueryRange(
 		{
 			selectedTime: widget?.timePreferance,
@ -135,7 +141,7 @@ function GridCardGraph({
 				widget.timePreferance,
 			],
 			keepPreviousData: true,
-			enabled: isVisible && !isEmptyWidget && isQueryEnabled,
+			enabled: queryEnabledCondition,
 			refetchOnMount: false,
 			onError: (error) => {
 				setErrorMessage(error.message);
@ -159,7 +165,8 @@ function GridCardGraph({
 	const isDarkMode = useIsDarkMode();

 	const menuList =
-		widget.panelTypes === PANEL_TYPES.TABLE
+		widget.panelTypes === PANEL_TYPES.TABLE ||
+		widget.panelTypes === PANEL_TYPES.LIST
 			? headerMenuList.filter((menu) => menu !== MenuItemKeys.CreateAlerts)
 			: headerMenuList;

@ -222,6 +229,7 @@ function GridCardGraph({
 					onClickHandler={onClickHandler}
 					graphVisibiltyState={graphVisibility}
 					setGraphVisibility={setGraphVisibility}
+					isFetchingResponse={queryResponse.isFetching}
 				/>
 			)}
 		</div>
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@ -30,6 +30,7 @@ export interface WidgetGraphComponentProps extends UplotProps {
 	isWarning: boolean;
 	graphVisibiltyState: boolean[];
 	setGraphVisibility: Dispatch<SetStateAction<boolean[]>>;
+	isFetchingResponse: boolean;
 }

 export interface GridCardGraphProps {
--- a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
@ -16,8 +16,28 @@
 	}
 }

+.widget-full-view {
+	.ant-modal-content {
+		background-color: var(--bg-ink-400);
+
+		.ant-modal-header {
+			background-color: var(--bg-ink-400);
+		}
+	}	
+}
+
 .lightMode {
 	.fullscreen-grid-container {
 		background-color: rgb(250, 250, 250);
 	}
+
+	.widget-full-view {
+		.ant-modal-content {
+			background-color: var(--bg-vanilla-100);
+		}
+
+		.ant-modal-header {
+			background-color: var(--bg-vanilla-100);
+		}
+	}
 }
--- a/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
@ -2,7 +2,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	height: 40px;
+	height: 30px;
 	width: 100%;
 	padding: 0.5rem;
 	box-sizing: border-box;
--- a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
@ -45,6 +45,7 @@ interface IWidgetHeaderProps {
 	threshold?: ReactNode;
 	headerMenuList?: MenuItemKeys[];
 	isWarning: boolean;
+	isFetchingResponse: boolean;
 }

 function WidgetHeader({
@ -59,6 +60,7 @@ function WidgetHeader({
 	threshold,
 	headerMenuList,
 	isWarning,
+	isFetchingResponse,
 }: IWidgetHeaderProps): JSX.Element | null {
 	const onEditHandler = useCallback((): void => {
 		const widgetId = widget.id;
@ -170,7 +172,7 @@ function WidgetHeader({
 			</Typography.Text>
 			<div className="widget-header-actions">
 				<div className="widget-api-actions">{threshold}</div>
-				{queryResponse.isFetching && !queryResponse.isError && (
+				{isFetchingResponse && !queryResponse.isError && (
 					<Spinner style={{ paddingRight: '0.25rem' }} />
 				)}
 				{queryResponse.isError && (
--- a/frontend/src/container/GridCardLayout/styles.ts
+++ b/frontend/src/container/GridCardLayout/styles.ts
@ -17,7 +17,7 @@ export const Card = styled(CardComponent)<CardProps>`
 	}

 	.ant-card-body {
-		height: calc(100% - 40px);
+		height: calc(100% - 30px);
 		padding: 0;
 	}
 `;
--- a/frontend/src/container/GridPanelSwitch/index.tsx
+++ b/frontend/src/container/GridPanelSwitch/index.tsx
@ -1,8 +1,9 @@
 import { ToggleGraphProps } from 'components/Graph/types';
-import { PANEL_TYPES_COMPONENT_MAP } from 'constants/panelTypes';
+import { getComponentForPanelType } from 'constants/panelTypes';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config';
 import { FC, forwardRef, memo, useMemo } from 'react';
+import { DataSource } from 'types/common/queryBuilder';

 import { GridPanelSwitchProps, PropsTypePropsMap } from './types';

@ -11,7 +12,19 @@ const GridPanelSwitch = forwardRef<
 	GridPanelSwitchProps
 >(
 	(
-		{ panelType, data, yAxisUnit, panelData, query, options, thresholds },
+		{
+			panelType,
+			data,
+			yAxisUnit,
+			panelData,
+			query,
+			options,
+			thresholds,
+			selectedLogFields,
+			selectedTracesFields,
+			dataSource,
+			selectedTime,
+		},
 		ref,
 	): JSX.Element | null => {
 		const currentProps: PropsTypePropsMap = useMemo(() => {
@ -32,15 +45,38 @@ const GridPanelSwitch = forwardRef<
 					query,
 					thresholds,
 				},
-				[PANEL_TYPES.LIST]: null,
+				[PANEL_TYPES.LIST]:
+					dataSource === DataSource.LOGS
+						? {
+								selectedLogsFields: selectedLogFields || [],
+								query,
+								selectedTime,
+						  }
+						: {
+								selectedTracesFields: selectedTracesFields || [],
+								query,
+								selectedTime,
+						  },
 				[PANEL_TYPES.TRACE]: null,
 				[PANEL_TYPES.EMPTY_WIDGET]: null,
 			};

 			return result;
-		}, [data, options, ref, yAxisUnit, thresholds, panelData, query]);
+		}, [
+			data,
+			options,
+			ref,
+			yAxisUnit,
+			thresholds,
+			panelData,
+			query,
+			dataSource,
+			selectedLogFields,
+			selectedTime,
+			selectedTracesFields,
+		]);

-		const Component = PANEL_TYPES_COMPONENT_MAP[panelType] as FC<
+		const Component = getComponentForPanelType(panelType, dataSource) as FC<
 			PropsTypePropsMap[typeof panelType]
 		>;
 		const componentProps = useMemo(() => currentProps[panelType], [
--- a/frontend/src/container/GridPanelSwitch/types.ts
+++ b/frontend/src/container/GridPanelSwitch/types.ts
@ -2,11 +2,15 @@ import { StaticLineProps, ToggleGraphProps } from 'components/Graph/types';
 import { UplotProps } from 'components/Uplot/Uplot';
 import { GridTableComponentProps } from 'container/GridTableComponent/types';
 import { GridValueComponentProps } from 'container/GridValueComponent/types';
+import { LogsPanelComponentProps } from 'container/LogsPanelTable/LogsPanelComponent';
+import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
+import { TracesTableComponentProps } from 'container/TracesTableComponent/TracesTableComponent';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { ForwardedRef } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
+import { DataSource } from 'types/common/queryBuilder';
 import uPlot from 'uplot';

 import { PANEL_TYPES } from '../../constants/queryBuilder';
@ -23,6 +27,10 @@ export type GridPanelSwitchProps = {
 	panelData: QueryDataV3[];
 	query: Query;
 	thresholds?: Widgets['thresholds'];
+	dataSource?: DataSource;
+	selectedLogFields?: Widgets['selectedLogFields'];
+	selectedTracesFields?: Widgets['selectedTracesFields'];
+	selectedTime?: timePreferance;
 };

 export type PropsTypePropsMap = {
@ -32,6 +40,6 @@ export type PropsTypePropsMap = {
 	[PANEL_TYPES.VALUE]: GridValueComponentProps;
 	[PANEL_TYPES.TABLE]: GridTableComponentProps;
 	[PANEL_TYPES.TRACE]: null;
-	[PANEL_TYPES.LIST]: null;
+	[PANEL_TYPES.LIST]: LogsPanelComponentProps | TracesTableComponentProps;
 	[PANEL_TYPES.EMPTY_WIDGET]: null;
 };
--- a/frontend/src/container/LogDetailedView/Overview.tsx
+++ b/frontend/src/container/LogDetailedView/Overview.tsx
@ -22,6 +22,7 @@ import TableView from './TableView';

 interface OverviewProps {
 	logData: ILog;
+	isListViewPanel?: boolean;
 }

 type Props = OverviewProps &
@ -32,6 +33,7 @@ function Overview({
 	logData,
 	onAddToQuery,
 	onClickActionItem,
+	isListViewPanel = false,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(false);
 	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
@ -199,6 +201,7 @@ function Overview({
 									onAddToQuery={onAddToQuery}
 									fieldSearchInput={fieldSearchInput}
 									onClickActionItem={onClickActionItem}
+									isListViewPanel={isListViewPanel}
 								/>
 							</>
 						),
@ -210,4 +213,8 @@ function Overview({
 	);
 }

+Overview.defaultProps = {
+	isListViewPanel: false,
+};
+
 export default Overview;
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/frontend/src/container/LogDetailedView/TableView.tsx
@ -40,6 +40,7 @@ const RESTRICTED_FIELDS = ['timestamp'];
 interface TableViewProps {
 	logData: ILog;
 	fieldSearchInput: string;
+	isListViewPanel?: boolean;
 }

 type Props = TableViewProps &
@ -51,6 +52,7 @@ function TableView({
 	fieldSearchInput,
 	onAddToQuery,
 	onClickActionItem,
+	isListViewPanel = false,
 }: Props): JSX.Element | null {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
@ -218,38 +220,45 @@ function TableView({
 								{removeEscapeCharacters(fieldData.value)}
 							</span>
 						</CopyClipboardHOC>
-						<span className="action-btn">
-							<Tooltip title="Filter for value">
-								<Button
-									className="filter-btn periscope-btn"
-									icon={
-										isfilterInLoading ? (
-											<Spin size="small" />
-										) : (
-											<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
-										)
-									}
-									onClick={onClickHandler(OPERATORS.IN, fieldFilterKey, fieldData.value)}
-								/>
-							</Tooltip>
-							<Tooltip title="Filter out value">
-								<Button
-									className="filter-btn periscope-btn"
-									icon={
-										isfilterOutLoading ? (
-											<Spin size="small" />
-										) : (
-											<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
-										)
-									}
-									onClick={onClickHandler(
-										OPERATORS.NIN,
-										fieldFilterKey,
-										fieldData.value,
-									)}
-								/>
-							</Tooltip>
-						</span>
+
+						{!isListViewPanel && (
+							<span className="action-btn">
+								<Tooltip title="Filter for value">
+									<Button
+										className="filter-btn periscope-btn"
+										icon={
+											isfilterInLoading ? (
+												<Spin size="small" />
+											) : (
+												<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
+											)
+										}
+										onClick={onClickHandler(
+											OPERATORS.IN,
+											fieldFilterKey,
+											fieldData.value,
+										)}
+									/>
+								</Tooltip>
+								<Tooltip title="Filter out value">
+									<Button
+										className="filter-btn periscope-btn"
+										icon={
+											isfilterOutLoading ? (
+												<Spin size="small" />
+											) : (
+												<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
+											)
+										}
+										onClick={onClickHandler(
+											OPERATORS.NIN,
+											fieldFilterKey,
+											fieldData.value,
+										)}
+									/>
+								</Tooltip>
+							</span>
+						)}
 					</div>
 				);
 			},
@ -268,6 +277,10 @@ function TableView({
 	);
 }

+TableView.defaultProps = {
+	isListViewPanel: false,
+};
+
 interface DataType {
 	key: string;
 	field: string;
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
@ -68,6 +68,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 			activeLog,
 			activeContextLog,
 		});
+
 		const { draggedColumns, onDragColumns } = useDragColumns<
 			Record<string, unknown>
 		>(LOCALSTORAGE.LOGS_LIST_COLUMNS);
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss
+++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss
@ -0,0 +1,80 @@
+.logs-table {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .resize-table {
+        height: calc(92% - 5px);
+        overflow: scroll;
+        
+        .ant-table-wrapper .ant-table-tbody >tr >td {
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 18px; 
+            font-family: Inter;
+            .ant-typography {
+                background-color: transparent;
+                color: var(--bg-vanilla-100);
+                margin-bottom: 0;
+                font-size: 13px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 18px; 
+                font-family: Inter;
+            }
+            padding: 14px 8px;
+            border: none;
+            cursor: pointer;
+        }
+
+        .ant-table-wrapper .ant-table-header {
+            border-bottom: 0.5px solid var(--bg-slate-400);
+        }
+
+        .ant-table-wrapper .ant-table-thead > tr > th {
+            font-family: Inter;
+            color: var(--bg-vanilla-100);
+            background-color: transparent;
+            border: none;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 22px;
+            letter-spacing: 0.5px;
+            padding: 8px;
+        }
+
+        .ant-table-wrapper .ant-table-thead > tr > th::before {
+            display: none;
+        }
+    }
+
+    .controller {
+        position: absolute;
+        bottom: 5px;
+        right: 10px;
+    }
+}
+
+.lightMode {
+    .logs-table {
+        .resize-table {
+            .ant-table-wrapper .ant-table-tbody >tr >td {
+                background-color: var(--bg-vanilla-100);
+                .ant-typography {
+                    color: var(--bg-ink-500);
+                }
+            }
+            .ant-table-wrapper .ant-table-thead > tr > th {
+                background-color: var(--bg-vanilla-100);
+                color: var(--bg-ink-500); 
+            }
+
+            .ant-table-wrapper .ant-table-header {
+                border-bottom: 0.5px solid var(--bg-vanilla-400);
+            }
+        }
+    }
+}
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
+++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
@ -0,0 +1,311 @@
+import './LogsPanelComponent.styles.scss';
+
+import { Table } from 'antd';
+import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import Controls from 'container/Controls';
+import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
+import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
+import { tableStyles } from 'container/TracesExplorer/ListView/styles';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { Pagination } from 'hooks/queryPagination';
+import { useLogsData } from 'hooks/useLogsData';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import {
+	HTMLAttributes,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { v4 as uuid } from 'uuid';
+
+import { getLogPanelColumnsList } from './utils';
+
+function LogsPanelComponent({
+	selectedLogsFields,
+	query,
+	selectedTime,
+}: LogsPanelComponentProps): JSX.Element {
+	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	const [pagination, setPagination] = useState<Pagination>({
+		offset: 0,
+		limit: query.builder.queryData[0].limit || 0,
+	});
+
+	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
+		const updatedQuery = { ...query };
+		updatedQuery.builder.queryData[0].pageSize = 10;
+		return {
+			query: updatedQuery,
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval: globalSelectedTime,
+			tableParams: {
+				pagination,
+			},
+		};
+	});
+
+	useEffect(() => {
+		setRequestData({
+			...requestData,
+			globalSelectedInterval: globalSelectedTime,
+			tableParams: {
+				pagination,
+			},
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [pagination]);
+
+	const [pageSize, setPageSize] = useState<number>(10);
+	const { selectedDashboard } = useDashboard();
+
+	const handleChangePageSize = (value: number): void => {
+		setPagination({
+			...pagination,
+			limit: 0,
+			offset: value,
+		});
+		setPageSize(value);
+		const newQueryData = { ...requestData.query };
+		newQueryData.builder.queryData[0].pageSize = value;
+		const newRequestData = {
+			...requestData,
+			query: newQueryData,
+			tableParams: {
+				pagination,
+			},
+		};
+		setRequestData(newRequestData);
+	};
+
+	const { data, isFetching, isError } = useGetQueryRange(
+		{
+			...requestData,
+			globalSelectedInterval: globalSelectedTime,
+			selectedTime: selectedTime?.enum || 'GLOBAL_TIME',
+			variables: getDashboardVariables(selectedDashboard?.data.variables),
+		},
+		{
+			queryKey: [
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				globalSelectedTime,
+				maxTime,
+				minTime,
+				requestData,
+				pagination,
+				selectedDashboard?.data.variables,
+			],
+			enabled: !!requestData.query && !!selectedLogsFields?.length,
+		},
+	);
+
+	const columns = getLogPanelColumnsList(selectedLogsFields);
+
+	const dataLength =
+		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
+	const totalCount = useMemo(() => dataLength || 0, [dataLength]);
+
+	const [firstLog, setFirstLog] = useState<ILog>();
+	const [lastLog, setLastLog] = useState<ILog>();
+
+	const { logs } = useLogsData({
+		result: data?.payload.data.newResult.data.result,
+		panelType: PANEL_TYPES.LIST,
+		stagedQuery: query,
+	});
+
+	useEffect(() => {
+		if (logs.length) {
+			setFirstLog(logs[0]);
+			setLastLog(logs[logs.length - 1]);
+		}
+	}, [logs]);
+
+	const flattenLogData = useMemo(
+		() => logs.map((log) => FlatLogData(log) as RowData),
+		[logs],
+	);
+
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();
+
+	const handleRow = useCallback(
+		(record: RowData): HTMLAttributes<RowData> => ({
+			onClick: (): void => {
+				const log = logs.find((item) => item.id === record.id);
+				if (log) onSetActiveLog(log);
+			},
+		}),
+		[logs, onSetActiveLog],
+	);
+
+	const isOrderByTimeStamp =
+		query.builder.queryData[0].orderBy.length > 0 &&
+		query.builder.queryData[0].orderBy[0].columnName === 'timestamp';
+
+	const handlePreviousPagination = (): void => {
+		if (isOrderByTimeStamp) {
+			setRequestData({
+				...requestData,
+				query: {
+					...requestData.query,
+					builder: {
+						...requestData.query.builder,
+						queryData: [
+							{
+								...requestData.query.builder.queryData[0],
+								filters: {
+									...requestData.query.builder.queryData[0].filters,
+									items: [
+										{
+											id: uuid(),
+											key: {
+												key: 'id',
+												type: '',
+												dataType: DataTypes.String,
+												isColumn: true,
+											},
+											op: OPERATORS['>'],
+											value: firstLog?.id || '',
+										},
+									],
+								},
+							},
+						],
+					},
+				},
+			});
+			return;
+		}
+		setPagination({
+			...pagination,
+			limit: 0,
+			offset: pagination.offset - pageSize,
+		});
+	};
+
+	const handleNextPagination = (): void => {
+		if (isOrderByTimeStamp) {
+			setRequestData({
+				...requestData,
+				query: {
+					...requestData.query,
+					builder: {
+						...requestData.query.builder,
+						queryData: [
+							{
+								...requestData.query.builder.queryData[0],
+								filters: {
+									...requestData.query.builder.queryData[0].filters,
+									items: [
+										{
+											id: uuid(),
+											key: {
+												key: 'id',
+												type: '',
+												dataType: DataTypes.String,
+												isColumn: true,
+											},
+											op: OPERATORS['<'],
+											value: lastLog?.id || '',
+										},
+									],
+								},
+							},
+						],
+					},
+				},
+			});
+			return;
+		}
+		setPagination({
+			...pagination,
+			limit: 0,
+			offset: pagination.offset + pageSize,
+		});
+	};
+
+	if (isError) {
+		return <div>{SOMETHING_WENT_WRONG}</div>;
+	}
+
+	return (
+		<>
+			<div className="logs-table">
+				<div className="resize-table">
+					<Table
+						pagination={false}
+						tableLayout="fixed"
+						scroll={{ x: `calc(50vw - 10px)` }}
+						sticky
+						loading={isFetching}
+						style={tableStyles}
+						dataSource={flattenLogData}
+						columns={columns}
+						onRow={handleRow}
+					/>
+				</div>
+				{!query.builder.queryData[0].limit && (
+					<div className="controller">
+						<Controls
+							totalCount={totalCount}
+							perPageOptions={PER_PAGE_OPTIONS}
+							isLoading={isFetching}
+							offset={pagination.offset}
+							countPerPage={pageSize}
+							handleNavigatePrevious={handlePreviousPagination}
+							handleNavigateNext={handleNextPagination}
+							handleCountItemsPerPageChange={handleChangePageSize}
+							isLogPanel={isOrderByTimeStamp}
+						/>
+					</div>
+				)}
+			</div>
+			<LogDetail
+				selectedTab={VIEW_TYPES.OVERVIEW}
+				log={activeLog}
+				onClose={onClearActiveLog}
+				onAddToQuery={onAddToQuery}
+				onClickActionItem={onAddToQuery}
+				isListViewPanel
+			/>
+		</>
+	);
+}
+
+export type LogsPanelComponentProps = {
+	selectedLogsFields: Widgets['selectedLogFields'];
+	query: Query;
+	selectedTime?: timePreferance;
+};
+
+LogsPanelComponent.defaultProps = {
+	selectedTime: undefined,
+};
+
+export default LogsPanelComponent;
--- a/frontend/src/container/LogsPanelTable/utils.tsx
+++ b/frontend/src/container/LogsPanelTable/utils.tsx
@ -0,0 +1,38 @@
+import { ColumnsType } from 'antd/es/table';
+import { Typography } from 'antd/lib';
+// import Typography from 'antd/es/typography/Typography';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { ReactNode } from 'react';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { IField } from 'types/api/logs/fields';
+
+export const getLogPanelColumnsList = (
+	selectedLogFields: Widgets['selectedLogFields'],
+): ColumnsType<RowData> => {
+	const initialColumns: ColumnsType<RowData> = [];
+
+	const columns: ColumnsType<RowData> =
+		selectedLogFields?.map((field: IField) => {
+			const { name } = field;
+			return {
+				title: name,
+				dataIndex: name,
+				key: name,
+				width: name === 'body' ? 350 : 100,
+				render: (value: ReactNode): JSX.Element => {
+					if (name === 'body') {
+						return (
+							<Typography.Paragraph ellipsis={{ rows: 1 }} data-testid={name}>
+								{value}
+							</Typography.Paragraph>
+						);
+					}
+
+					return <Typography.Text data-testid={name}>{value}</Typography.Text>;
+				},
+				responsive: ['md'],
+			};
+		}) || [];
+
+	return [...initialColumns, ...columns];
+};
--- a/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts
+++ b/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts
@ -22,4 +22,6 @@ export const getWidgetQueryBuilder = ({
 	yAxisUnit,
 	softMax: null,
 	softMin: null,
+	selectedLogFields: [],
+	selectedTracesFields: [],
 });
--- a/frontend/src/container/NewDashboard/ComponentsSlider/constants.ts
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/constants.ts
@ -0,0 +1,88 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { LogsAggregatorOperator } from 'types/common/queryBuilder';
+
+export const PANEL_TYPES_INITIAL_QUERY = {
+	[PANEL_TYPES.TIME_SERIES]: initialQueriesMap.metrics,
+	[PANEL_TYPES.VALUE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.TABLE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.LIST]: initialQueriesMap.logs,
+	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
+	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
+};
+
+export const listViewInitialLogQuery: Query = {
+	...initialQueriesMap.logs,
+	builder: {
+		...initialQueriesMap.logs.builder,
+		queryData: [
+			{
+				...initialQueriesMap.logs.builder.queryData[0],
+				aggregateOperator: LogsAggregatorOperator.NOOP,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				offset: 0,
+				pageSize: 100,
+			},
+		],
+	},
+};
+
+export const listViewInitialTraceQuery = {
+	// it should be the above commented query
+	...initialQueriesMap.traces,
+	builder: {
+		...initialQueriesMap.traces.builder,
+		queryData: [
+			{
+				...initialQueriesMap.traces.builder.queryData[0],
+				aggregateOperator: LogsAggregatorOperator.NOOP,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				offset: 0,
+				pageSize: 10,
+				selectColumns: [
+					{
+						key: 'serviceName',
+						dataType: 'string',
+						type: 'tag',
+						isColumn: true,
+						isJSON: false,
+						id: 'serviceName--string--tag--true',
+					},
+					{
+						key: 'name',
+						dataType: 'string',
+						type: 'tag',
+						isColumn: true,
+						isJSON: false,
+						id: 'name--string--tag--true',
+					},
+					{
+						key: 'durationNano',
+						dataType: 'float64',
+						type: 'tag',
+						isColumn: true,
+						isJSON: false,
+						id: 'durationNano--float64--tag--true',
+					},
+					{
+						key: 'httpMethod',
+						dataType: 'string',
+						type: 'tag',
+						isColumn: true,
+						isJSON: false,
+						id: 'httpMethod--string--tag--true',
+					},
+					{
+						key: 'responseStatusCode',
+						dataType: 'string',
+						type: 'tag',
+						isColumn: true,
+						isJSON: false,
+						id: 'responseStatusCode--string--tag--true',
+					},
+				] as BaseAutocompleteData[],
+			},
+		],
+	},
+};
--- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
@ -1,6 +1,6 @@
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
@ -8,8 +8,14 @@ import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { CSSProperties } from 'react';
+import { LogsAggregatorOperator } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';

+import {
+	listViewInitialLogQuery,
+	listViewInitialTraceQuery,
+	PANEL_TYPES_INITIAL_QUERY,
+} from './constants';
 import menuItems from './menuItems';
 import { Card, Container, Text } from './styles';

@ -28,6 +34,7 @@ function DashboardGraphSlider(): JSX.Element {

 	const updateDashboardMutation = useUpdateDashboard();

+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const onClickHandler = (name: PANEL_TYPES) => (): void => {
 		const id = uuid();

@ -61,10 +68,28 @@ function DashboardGraphSlider(): JSX.Element {
 							nullZeroValues: '',
 							opacity: '',
 							panelTypes: name,
-							query: initialQueriesMap.metrics,
+							query:
+								name === PANEL_TYPES.LIST
+									? listViewInitialLogQuery
+									: PANEL_TYPES_INITIAL_QUERY[name],
 							timePreferance: 'GLOBAL_TIME',
 							softMax: null,
 							softMin: null,
+							selectedLogFields: [
+								{
+									dataType: 'string',
+									type: '',
+									name: 'body',
+								},
+								{
+									dataType: 'string',
+									type: '',
+									name: 'timestamp',
+								},
+							],
+							selectedTracesFields: [
+								...listViewInitialTraceQuery.builder.queryData[0].selectColumns,
+							],
 						},
 					],
 				},
@ -73,16 +98,43 @@ function DashboardGraphSlider(): JSX.Element {
 				onSuccess: (data) => {
 					if (data.payload) {
 						handleToggleDashboardSlider(false);
+						const queryParamsLog = {
+							graphType: name,
+							widgetId: id,
+							[QueryParams.compositeQuery]: JSON.stringify({
+								...PANEL_TYPES_INITIAL_QUERY[name],
+								builder: {
+									...PANEL_TYPES_INITIAL_QUERY[name].builder,
+									queryData: [
+										{
+											...PANEL_TYPES_INITIAL_QUERY[name].builder.queryData[0],
+											aggregateOperator: LogsAggregatorOperator.NOOP,
+											orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+											offset: 0,
+											pageSize: 100,
+										},
+									],
+								},
+							}),
+						};

 						const queryParams = {
 							graphType: name,
 							widgetId: id,
-							[QueryParams.compositeQuery]: JSON.stringify(initialQueriesMap.metrics),
+							[QueryParams.compositeQuery]: JSON.stringify(
+								PANEL_TYPES_INITIAL_QUERY[name],
+							),
 						};

-						history.push(
-							`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
-						);
+						if (name === PANEL_TYPES.LIST) {
+							history.push(
+								`${history.location.pathname}/new?${createQueryParams(queryParamsLog)}`,
+							);
+						} else {
+							history.push(
+								`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
+							);
+						}
 					}
 				},
 				onError: () => {
--- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
@ -1,3 +1,4 @@
+import List from 'assets/Dashboard/List';
 import TableIcon from 'assets/Dashboard/Table';
 import TimeSeriesIcon from 'assets/Dashboard/TimeSeries';
 import ValueIcon from 'assets/Dashboard/Value';
@ -16,6 +17,7 @@ const Items: ItemsProps[] = [
 		display: 'Value',
 	},
 	{ name: PANEL_TYPES.TABLE, Icon: TableIcon, display: 'Table' },
+	{ name: PANEL_TYPES.LIST, Icon: List, display: 'List' },
 ];

 interface ItemsProps {
--- a/frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.styles.scss
+++ b/frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.styles.scss
@ -0,0 +1,184 @@
+.explorer-columns-renderer {
+    margin-top: 10px;
+
+    .title {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .ant-typography {
+        color: var(rgba(255, 255, 255, 0.85));
+        font-family: "Inter";
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; 
+        letter-spacing: 0.5px;
+    }
+
+    .ant-divider {
+        margin: 8px 0 !important;
+        border: 0.5px solid var(--bg-slate-400);
+    }
+
+    .explorer-columns-contents {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .explorer-columns {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            overflow-x: scroll;
+            min-width: 90%;
+
+            .explorer-columns-list {
+                display: flex !important;
+            }
+            
+            .explorer-column-card {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 4px;
+                min-width: 200px;
+                border-radius: 2px;
+                border: 1px solid var(--colorBorder, rgba(118, 136, 201, 0.12));
+                background: var(--bg-slate-500);
+                cursor: unset;
+
+                .explorer-column-title {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    font-family: Inter;
+                    font-size: 12px;
+                    cursor: grab;
+                }
+                
+                .lucide-trash2 {
+                    cursor: pointer !important;
+                }
+
+            }
+        }
+
+        .explorer-columns::-webkit-scrollbar {
+            height: 0px; /* Height of the scrollbar */
+        }
+
+        .action-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            padding: 0px 16px;
+            border-radius: 2px;
+            background: var(--bg-robin-400);
+        }
+    }
+}
+
+.explorer-columns-search {
+    border: 1px solid rgba(118, 136, 201, 0.12);
+    border-radius: 6px;
+    padding: 0px;
+    background:#141414;
+    > input {
+        height: 32px;
+        padding: 0 6px;
+    }
+
+    
+}
+
+.explorer-columns-dropdown {
+    height: 200px;
+    background-color: var(--bg-slate-500);
+    overflow: hidden !important;
+    .ant-dropdown-menu {
+        padding: 0;
+
+        .ant-dropdown-menu-item {
+            padding: 4px;
+            .ant-checkbox-wrapper {
+                padding: 2px 8px !important;
+            }
+
+            .attribute-columns {
+                display: flex;
+                flex-direction: column;
+                height: 160px;
+                overflow: scroll;
+            }
+
+            .attribute-columns::-webkit-scrollbar {
+                width: 3px; /* Width of the scrollbar */
+            }
+            
+            .attribute-columns::-webkit-scrollbar-track {
+                background: var(--bg-slate-500); /* Color of the track */
+            }
+            
+            .attribute-columns::-webkit-scrollbar-thumb {
+                background: var(--bg-vanilla-400); /* Color of the thumb */
+                border-radius: 4px; /* Roundness of the thumb */
+            }
+            
+            .attribute-columns::-webkit-scrollbar-thumb:hover {
+                background: var(--bg-vanilla-300); /* Color of the thumb on hover */
+            }
+        }
+    }
+}
+
+.lightMode {
+    .explorer-columns-renderer {
+
+        .ant-divider {
+            border: 0.5px solid var(--bg-vanilla-300);
+        }
+
+        .explorer-columns {
+            .explorer-column-card {
+                border: 1px solid var(--colorBorder, rgba(118, 136, 201, 0.12));
+                background: var(--bg-vanilla-200);
+            }
+        }
+
+        .explorer-columns-search {
+            border: 1px solid rgba(118, 136, 201, 0.12);
+        }
+    }
+
+    .explorer-columns-dropdown {
+        background-color: var(--bg-vanilla-100);
+
+        .ant-dropdown-menu-item {
+            .attribute-columns {
+                &::-webkit-scrollbar {
+                    width: 3px; /* Width of the scrollbar */
+                }
+                
+                &::-webkit-scrollbar-track {
+                    background: var(--bg-vanilla-200); /* Color of the track */
+                }
+                
+                &::-webkit-scrollbar-thumb {
+                    background: var(--bg-vanilla-400); /* Color of the thumb */
+                }
+                
+                &::-webkit-scrollbar-thumb:hover {
+                    background: var(--bg-vanilla-300); /* Color of the thumb on hover */
+                }
+            }
+        }
+    }
+
+    .explorer-columns-search {
+        background: var(--bg-vanilla-100);
+    }
+}
--- a/frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx
@ -0,0 +1,328 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable react/jsx-props-no-spreading */
+import './ExplorerColumnsRenderer.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import {
+	Button,
+	Checkbox,
+	Divider,
+	Dropdown,
+	Input,
+	Tooltip,
+	Typography,
+} from 'antd';
+import { MenuProps } from 'antd/lib';
+import Spinner from 'components/Spinner';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import {
+	AlertCircle,
+	GripVertical,
+	PlusCircle,
+	Search,
+	Trash2,
+} from 'lucide-react';
+import { useState } from 'react';
+import {
+	DragDropContext,
+	Draggable,
+	Droppable,
+	DropResult,
+} from 'react-beautiful-dnd';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { WidgetGraphProps } from '../types';
+
+type LogColumnsRendererProps = {
+	setSelectedLogFields: WidgetGraphProps['setSelectedLogFields'];
+	selectedLogFields: WidgetGraphProps['selectedLogFields'];
+	selectedTracesFields: WidgetGraphProps['selectedTracesFields'];
+	setSelectedTracesFields: WidgetGraphProps['setSelectedTracesFields'];
+};
+
+function ExplorerColumnsRenderer({
+	selectedLogFields,
+	setSelectedLogFields,
+	selectedTracesFields,
+	setSelectedTracesFields,
+}: LogColumnsRendererProps): JSX.Element {
+	const { currentQuery } = useQueryBuilder();
+	const [searchText, setSearchText] = useState<string>('');
+	const [open, setOpen] = useState<boolean>(false);
+
+	const initialDataSource = currentQuery.builder.queryData[0].dataSource;
+
+	const { data, isLoading, isError } = useGetAggregateKeys(
+		{
+			aggregateAttribute: '',
+			dataSource: currentQuery.builder.queryData[0].dataSource,
+			aggregateOperator: currentQuery.builder.queryData[0].aggregateOperator,
+			searchText: '',
+			tagType: '',
+		},
+		{
+			queryKey: [
+				currentQuery.builder.queryData[0].dataSource,
+				currentQuery.builder.queryData[0].aggregateOperator,
+			],
+		},
+	);
+
+	const isAttributeKeySelected = (key: string): boolean => {
+		if (initialDataSource === DataSource.LOGS && selectedLogFields) {
+			return selectedLogFields.some((field) => field.name === key);
+		}
+		if (initialDataSource === DataSource.TRACES && selectedTracesFields) {
+			return selectedTracesFields.some((field) => field.key === key);
+		}
+		return false;
+	};
+
+	const handleCheckboxChange = (key: string): void => {
+		if (
+			initialDataSource === DataSource.LOGS &&
+			setSelectedLogFields !== undefined
+		) {
+			if (selectedLogFields) {
+				if (isAttributeKeySelected(key)) {
+					setSelectedLogFields(
+						selectedLogFields.filter((field) => field.name !== key),
+					);
+				} else {
+					setSelectedLogFields([
+						...selectedLogFields,
+						{ dataType: 'string', name: key, type: '' },
+					]);
+				}
+			} else {
+				setSelectedLogFields([{ dataType: 'string', name: key, type: '' }]);
+			}
+		} else if (
+			initialDataSource === DataSource.TRACES &&
+			setSelectedTracesFields !== undefined
+		) {
+			const selectedField = data?.payload?.attributeKeys?.find(
+				(attributeKey) => attributeKey.key === key,
+			);
+			if (selectedTracesFields) {
+				if (isAttributeKeySelected(key)) {
+					setSelectedTracesFields(
+						selectedTracesFields.filter((field) => field.key !== key),
+					);
+				} else if (selectedField) {
+					setSelectedTracesFields([...selectedTracesFields, selectedField]);
+				}
+			} else if (selectedField) setSelectedTracesFields([selectedField]);
+		}
+		setOpen(false);
+	};
+
+	const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		setSearchText(e.target.value);
+	};
+
+	const items: MenuProps['items'] = [
+		{
+			key: 'search',
+			label: (
+				<Input
+					type="text"
+					placeholder="Search"
+					className="explorer-columns-search"
+					value={searchText}
+					onChange={handleSearchChange}
+					prefix={<Search size={16} style={{ padding: '6px' }} />}
+				/>
+			),
+		},
+		{
+			key: 'columns',
+			label: (
+				<div className="attribute-columns">
+					{data?.payload?.attributeKeys
+						?.filter((attributeKey) =>
+							attributeKey.key.toLowerCase().includes(searchText.toLowerCase()),
+						)
+						?.map((attributeKey) => (
+							<Checkbox
+								checked={isAttributeKeySelected(attributeKey.key)}
+								onChange={(): void => handleCheckboxChange(attributeKey.key)}
+								style={{ padding: 0 }}
+								key={attributeKey.key}
+							>
+								{attributeKey.key}
+							</Checkbox>
+						))}
+				</div>
+			),
+		},
+	];
+
+	const removeSelectedLogField = (name: string): void => {
+		if (
+			initialDataSource === DataSource.LOGS &&
+			setSelectedLogFields &&
+			selectedLogFields
+		) {
+			setSelectedLogFields(
+				selectedLogFields.filter((field) => field.name !== name),
+			);
+		}
+		if (
+			initialDataSource === DataSource.TRACES &&
+			setSelectedTracesFields &&
+			selectedTracesFields
+		) {
+			setSelectedTracesFields(
+				selectedTracesFields.filter((field) => field.key !== name),
+			);
+		}
+	};
+
+	const onDragEnd = (result: DropResult): void => {
+		if (!result.destination) {
+			return;
+		}
+
+		if (
+			initialDataSource === DataSource.LOGS &&
+			selectedLogFields &&
+			setSelectedLogFields
+		) {
+			const items = [...selectedLogFields];
+			const [reorderedItem] = items.splice(result.source.index, 1);
+			items.splice(result.destination.index, 0, reorderedItem);
+
+			setSelectedLogFields(items);
+		}
+		if (
+			initialDataSource === DataSource.TRACES &&
+			selectedTracesFields &&
+			setSelectedTracesFields
+		) {
+			const items = [...selectedTracesFields];
+			const [reorderedItem] = items.splice(result.source.index, 1);
+			items.splice(result.destination.index, 0, reorderedItem);
+
+			setSelectedTracesFields(items);
+		}
+	};
+
+	const toggleDropdown = (): void => {
+		setOpen(!open);
+		if (!open) {
+			setSearchText('');
+		}
+	};
+
+	const isDarkMode = useIsDarkMode();
+
+	if (isLoading) {
+		return <Spinner size="large" tip="Loading..." height="4vh" />;
+	}
+
+	return (
+		<div className="explorer-columns-renderer">
+			<div className="title">
+				<Typography.Text>Columns</Typography.Text>
+				{isError && (
+					<Tooltip title={SOMETHING_WENT_WRONG}>
+						<AlertCircle size={16} />
+					</Tooltip>
+				)}
+			</div>
+			<Divider />
+			{!isError && (
+				<div className="explorer-columns-contents">
+					<DragDropContext onDragEnd={onDragEnd}>
+						<Droppable droppableId="drag-drop-list" direction="horizontal">
+							{(provided): JSX.Element => (
+								<div
+									className="explorer-columns"
+									{...provided.droppableProps}
+									ref={provided.innerRef}
+								>
+									{initialDataSource === DataSource.LOGS &&
+										selectedLogFields &&
+										selectedLogFields.map((field, index) => (
+											// eslint-disable-next-line react/no-array-index-key
+											<Draggable key={index} draggableId={index.toString()} index={index}>
+												{(dragProvided): JSX.Element => (
+													<div
+														className="explorer-column-card"
+														ref={dragProvided.innerRef}
+														{...dragProvided.draggableProps}
+														{...dragProvided.dragHandleProps}
+													>
+														<div className="explorer-column-title">
+															<GripVertical size={12} color="#5A5A5A" />
+															{field.name}
+														</div>
+														<Trash2
+															size={12}
+															color="red"
+															onClick={(): void => removeSelectedLogField(field.name)}
+														/>
+													</div>
+												)}
+											</Draggable>
+										))}
+									{initialDataSource === DataSource.TRACES &&
+										selectedTracesFields &&
+										selectedTracesFields.map((field, index) => (
+											// eslint-disable-next-line react/no-array-index-key
+											<Draggable key={index} draggableId={index.toString()} index={index}>
+												{(dragProvided): JSX.Element => (
+													<div
+														className="explorer-column-card"
+														ref={dragProvided.innerRef}
+														{...dragProvided.draggableProps}
+														{...dragProvided.dragHandleProps}
+													>
+														<div className="explorer-column-title">
+															<GripVertical size={12} color="#5A5A5A" />
+															{field.key}
+														</div>
+														<Trash2
+															size={12}
+															color="red"
+															onClick={(): void => removeSelectedLogField(field.key)}
+														/>
+													</div>
+												)}
+											</Draggable>
+										))}
+								</div>
+							)}
+						</Droppable>
+					</DragDropContext>
+					<div>
+						<Dropdown
+							menu={{ items }}
+							arrow
+							placement="top"
+							open={open}
+							overlayClassName="explorer-columns-dropdown"
+						>
+							<Button
+								className="action-btn"
+								icon={
+									<PlusCircle
+										size={16}
+										color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
+									/>
+								}
+								onClick={toggleDropdown}
+							/>
+						</Dropdown>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ExplorerColumnsRenderer;
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@ -18,7 +18,7 @@ import {
 	getPreviousWidgets,
 	getSelectedWidgetIndex,
 } from 'providers/Dashboard/util';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
@ -35,7 +35,6 @@ function QuerySection({
 	selectedTime,
 }: QueryProps): JSX.Element {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-	const [currentTab, setCurrentTab] = useState(currentQuery.queryType);
 	const urlQuery = useUrlQuery();

 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
@ -100,7 +99,6 @@ function QuerySection({
 					],
 				},
 			});
-
 			redirectWithQueryBuilderData(updatedQuery);
 		},
 		[
@ -114,11 +112,13 @@ function QuerySection({
 	);

 	const handleQueryCategoryChange = (qCategory: string): void => {
-		const currentQueryType = qCategory as EQueryType;
-		setCurrentTab(qCategory as EQueryType);
+		const currentQueryType = qCategory;

 		featureResponse.refetch().then(() => {
-			handleStageQuery({ ...currentQuery, queryType: currentQueryType });
+			handleStageQuery({
+				...currentQuery,
+				queryType: currentQueryType as EQueryType,
+			});
 		});
 	};

@ -134,6 +134,27 @@ function QuerySection({
 		return config;
 	}, []);

+	const listItems = [
+		{
+			key: EQueryType.QUERY_BUILDER,
+			label: (
+				<Tooltip title="Query Builder">
+					<Button className="nav-btns">
+						<Atom size={14} />
+					</Button>
+				</Tooltip>
+			),
+			tab: <Typography>Query Builder</Typography>,
+			children: (
+				<QueryBuilder
+					panelType={PANEL_TYPES.LIST}
+					filterConfigs={filterConfigs}
+					isListViewPanel
+				/>
+			),
+		},
+	];
+
 	const items = [
 		{
 			key: EQueryType.QUERY_BUILDER,
@ -180,8 +201,12 @@ function QuerySection({
 			<Tabs
 				type="card"
 				style={{ width: '100%' }}
-				defaultActiveKey={currentTab}
-				activeKey={currentTab}
+				defaultActiveKey={
+					selectedGraph !== PANEL_TYPES.EMPTY_WIDGET
+						? currentQuery.queryType
+						: currentQuery.builder.queryData[0].dataSource
+				}
+				activeKey={currentQuery.queryType}
 				onChange={handleQueryCategoryChange}
 				tabBarExtraContent={
 					<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
@ -197,7 +222,7 @@ function QuerySection({
 						</Button>
 					</span>
 				}
-				items={items}
+				items={selectedGraph === PANEL_TYPES.LIST ? listItems : items}
 			/>
 		</div>
 	);
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx
@ -10,7 +10,7 @@ interface IPlotTagProps {
 }

 function PlotTag({ queryType, panelType }: IPlotTagProps): JSX.Element | null {
-	if (queryType === undefined) {
+	if (queryType === undefined || panelType === PANEL_TYPES.LIST) {
 		return null;
 	}

--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphContainer.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphContainer.tsx
@ -1,5 +1,6 @@
 import { Card, Typography } from 'antd';
 import Spinner from 'components/Spinner';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { WidgetGraphProps } from 'container/NewWidget/types';
 import { useGetWidgetQueryRange } from 'hooks/queryBuilder/useGetWidgetQueryRange';
 import useUrlQuery from 'hooks/useUrlQuery';
@ -16,6 +17,8 @@ function WidgetGraphContainer({
 	fillSpans = false,
 	softMax,
 	softMin,
+	selectedLogFields,
+	selectedTracesFields,
 }: WidgetGraphProps): JSX.Element {
 	const { selectedDashboard } = useDashboard();

@ -46,7 +49,21 @@ function WidgetGraphContainer({
 	if (getWidgetQueryRange.isLoading) {
 		return <Spinner size="large" tip="Loading..." />;
 	}
-	if (getWidgetQueryRange.data?.payload.data.result.length === 0) {
+
+	if (
+		selectedGraph !== PANEL_TYPES.LIST &&
+		getWidgetQueryRange.data?.payload.data.result.length === 0
+	) {
+		return (
+			<NotFoundContainer>
+				<Typography>No Data</Typography>
+			</NotFoundContainer>
+		);
+	}
+	if (
+		selectedGraph === PANEL_TYPES.LIST &&
+		getWidgetQueryRange.data?.payload.data.newResult.data.result.length === 0
+	) {
 		return (
 			<NotFoundContainer>
 				<Typography>No Data</Typography>
@ -63,6 +80,9 @@ function WidgetGraphContainer({
 			fillSpans={fillSpans}
 			softMax={softMax}
 			softMin={softMin}
+			selectedLogFields={selectedLogFields}
+			selectedTracesFields={selectedTracesFields}
+			selectedTime={selectedTime}
 		/>
 	);
 }
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@ -1,6 +1,7 @@
 import { QueryParams } from 'constants/query';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
+import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@ -30,8 +31,11 @@ function WidgetGraph({
 	fillSpans,
 	softMax,
 	softMin,
+	selectedLogFields,
+	selectedTracesFields,
+	selectedTime,
 }: WidgetGraphProps): JSX.Element {
-	const { stagedQuery } = useQueryBuilder();
+	const { stagedQuery, currentQuery } = useQueryBuilder();

 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
@ -156,6 +160,10 @@ function WidgetGraph({
 				}
 				query={stagedQuery || selectedWidget.query}
 				thresholds={thresholds}
+				selectedLogFields={selectedLogFields}
+				selectedTracesFields={selectedTracesFields}
+				dataSource={currentQuery.builder.queryData[0].dataSource}
+				selectedTime={selectedTime}
 			/>
 		</div>
 	);
@ -172,6 +180,9 @@ interface WidgetGraphProps {
 	>;
 	softMax: number | null;
 	softMin: number | null;
+	selectedLogFields: Widgets['selectedLogFields'];
+	selectedTracesFields: Widgets['selectedTracesFields'];
+	selectedTime: timePreferance;
 }

 export default WidgetGraph;
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@ -19,6 +19,8 @@ function WidgetGraph({
 	fillSpans,
 	softMax,
 	softMin,
+	selectedLogFields,
+	selectedTracesFields,
 }: WidgetGraphProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const { selectedDashboard } = useDashboard();
@ -57,6 +59,8 @@ function WidgetGraph({
 				fillSpans={fillSpans}
 				softMax={softMax}
 				softMin={softMin}
+				selectedLogFields={selectedLogFields}
+				selectedTracesFields={selectedTracesFields}
 			/>
 		</Container>
 	);
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts
@ -13,8 +13,10 @@ export const Container = styled(Card)<Props>`

 	.ant-card-body {
 		padding: ${({ $panelType }): string =>
-			$panelType === PANEL_TYPES.TABLE ? '0 0' : '1.5rem 0'};
-		height: 57vh;
+			$panelType === PANEL_TYPES.TABLE || $panelType === PANEL_TYPES.LIST
+				? '0 0'
+				: '1.5rem 0'};
+		height: 60vh;
 		display: flex;
 		flex-direction: column;
 	}
--- a/frontend/src/container/NewWidget/LeftContainer/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@ -1,6 +1,8 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { memo } from 'react';

 import { WidgetGraphProps } from '../types';
+import ExplorerColumnsRenderer from './ExplorerColumnsRenderer';
 import QuerySection from './QuerySection';
 import { QueryContainer } from './styles';
 import WidgetGraph from './WidgetGraph';
@ -13,6 +15,10 @@ function LeftContainer({
 	fillSpans,
 	softMax,
 	softMin,
+	selectedLogFields,
+	setSelectedLogFields,
+	selectedTracesFields,
+	setSelectedTracesFields,
 }: WidgetGraphProps): JSX.Element {
 	return (
 		<>
@ -24,9 +30,19 @@ function LeftContainer({
 				fillSpans={fillSpans}
 				softMax={softMax}
 				softMin={softMin}
+				selectedLogFields={selectedLogFields}
+				selectedTracesFields={selectedTracesFields}
 			/>
 			<QueryContainer>
 				<QuerySection selectedTime={selectedTime} selectedGraph={selectedGraph} />
+				{selectedGraph === PANEL_TYPES.LIST && (
+					<ExplorerColumnsRenderer
+						selectedLogFields={selectedLogFields}
+						setSelectedLogFields={setSelectedLogFields}
+						selectedTracesFields={selectedTracesFields}
+						setSelectedTracesFields={setSelectedTracesFields}
+					/>
+				)}
 			</QueryContainer>
 		</>
 	);
--- a/frontend/src/container/NewWidget/RightContainer/constants.ts
+++ b/frontend/src/container/NewWidget/RightContainer/constants.ts
@ -47,3 +47,41 @@ export const panelTypeVsDragAndDrop: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
+
+export const panelTypeVsFillSpan: { [key in PANEL_TYPES]: boolean } = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
+
+export const panelTypeVsYAxisUnit: { [key in PANEL_TYPES]: boolean } = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: true,
+	[PANEL_TYPES.TABLE]: true,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
+
+export const panelTypeVsCreateAlert: { [key in PANEL_TYPES]: boolean } = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: true,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
+
+export const panelTypeVsPanelTimePreferences: {
+	[key in PANEL_TYPES]: boolean;
+} = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: true,
+	[PANEL_TYPES.TABLE]: true,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
--- a/frontend/src/container/NewWidget/RightContainer/index.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/index.tsx
@ -17,7 +17,14 @@ import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { Dispatch, SetStateAction, useCallback } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';

-import { panelTypeVsSoftMinMax, panelTypeVsThreshold } from './constants';
+import {
+	panelTypeVsCreateAlert,
+	panelTypeVsFillSpan,
+	panelTypeVsPanelTimePreferences,
+	panelTypeVsSoftMinMax,
+	panelTypeVsThreshold,
+	panelTypeVsYAxisUnit,
+} from './constants';
 import { Container, Title } from './styles';
 import ThresholdSelector from './Threshold/ThresholdSelector';
 import { ThresholdProps } from './Threshold/types';
@ -62,6 +69,11 @@ function RightContainer({

 	const allowThreshold = panelTypeVsThreshold[selectedGraph];
 	const allowSoftMinMax = panelTypeVsSoftMinMax[selectedGraph];
+	const allowFillSpans = panelTypeVsFillSpan[selectedGraph];
+	const allowYAxisUnit = panelTypeVsYAxisUnit[selectedGraph];
+	const allowCreateAlerts = panelTypeVsCreateAlert[selectedGraph];
+	const allowPanelTimePreference =
+		panelTypeVsPanelTimePreferences[selectedGraph];

 	const softMinHandler = useCallback(
 		(value: number | null) => {
@ -117,32 +129,40 @@ function RightContainer({
 				}
 			/>

-			<Space style={{ marginTop: 10 }} direction="vertical">
-				<Typography>Fill gaps</Typography>
+			{allowFillSpans && (
+				<Space style={{ marginTop: 10 }} direction="vertical">
+					<Typography>Fill gaps</Typography>

-				<Switch
-					checked={isFillSpans}
-					onChange={(checked): void => setIsFillSpans(checked)}
-				/>
-			</Space>
+					<Switch
+						checked={isFillSpans}
+						onChange={(checked): void => setIsFillSpans(checked)}
+					/>
+				</Space>
+			)}

-			<Title light="true">Panel Time Preference</Title>
+			{allowPanelTimePreference && (
+				<Title light="true">Panel Time Preference</Title>
+			)}

 			<Space direction="vertical">
-				<TimePreference
-					{...{
-						selectedTime,
-						setSelectedTime,
-					}}
-				/>
+				{allowPanelTimePreference && (
+					<TimePreference
+						{...{
+							selectedTime,
+							setSelectedTime,
+						}}
+					/>
+				)}

-				<YAxisUnitSelector
-					defaultValue={yAxisUnit}
-					onSelect={setYAxisUnit}
-					fieldLabel={selectedGraphType === 'Value' ? 'Unit' : 'Y Axis Unit'}
-				/>
+				{allowYAxisUnit && (
+					<YAxisUnitSelector
+						defaultValue={yAxisUnit}
+						onSelect={setYAxisUnit}
+						fieldLabel={selectedGraphType === 'Value' ? 'Unit' : 'Y Axis Unit'}
+					/>
+				)}

-				{selectedWidget?.panelTypes !== PANEL_TYPES.TABLE && (
+				{allowCreateAlerts && (
 					<Button icon={<UploadOutlined />} onClick={onCreateAlertsHandler}>
 						Create Alerts from Queries
 					</Button>
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@ -24,6 +24,7 @@ import { useSelector } from 'react-redux';
 import { generatePath, useLocation, useParams } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
+import { IField } from 'types/api/logs/fields';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
@ -110,6 +111,14 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 			: selectedWidget?.softMin || 0,
 	);

+	const [selectedLogFields, setSelectedLogFields] = useState<IField[] | null>(
+		selectedWidget?.selectedLogFields || null,
+	);
+
+	const [selectedTracesFields, setSelectedTracesFields] = useState(
+		selectedWidget?.selectedTracesFields || null,
+	);
+
 	const [softMax, setSoftMax] = useState<number | null>(
 		selectedWidget?.softMax === null || selectedWidget?.softMax === undefined
 			? null
@ -189,10 +198,13 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 						title,
 						yAxisUnit,
 						panelTypes: graphType,
+						query: currentQuery,
 						thresholds,
 						softMin,
 						softMax,
 						fillSpans: isFillSpans,
+						selectedLogFields,
+						selectedTracesFields,
 					},
 					...afterWidgets,
 				],
@ -226,10 +238,13 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		title,
 		yAxisUnit,
 		graphType,
+		currentQuery,
 		thresholds,
 		softMin,
 		softMax,
 		isFillSpans,
+		selectedLogFields,
+		selectedTracesFields,
 		afterWidgets,
 		updateDashboardMutation,
 		setSelectedDashboard,
@ -336,6 +351,10 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 						fillSpans={isFillSpans}
 						softMax={softMax}
 						softMin={softMin}
+						selectedLogFields={selectedLogFields}
+						setSelectedLogFields={setSelectedLogFields}
+						selectedTracesFields={selectedTracesFields}
+						setSelectedTracesFields={setSelectedTracesFields}
 					/>
 				</LeftContainerWrapper>

--- a/frontend/src/container/NewWidget/types.ts
+++ b/frontend/src/container/NewWidget/types.ts
@ -1,4 +1,5 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { Dispatch, SetStateAction } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';

 import { ThresholdProps } from './RightContainer/Threshold/types';
@ -15,4 +16,10 @@ export interface WidgetGraphProps extends NewWidgetProps {
 	thresholds: ThresholdProps[];
 	softMin: number | null;
 	softMax: number | null;
+	selectedLogFields: Widgets['selectedLogFields'];
+	setSelectedLogFields?: Dispatch<SetStateAction<Widgets['selectedLogFields']>>;
+	selectedTracesFields: Widgets['selectedTracesFields'];
+	setSelectedTracesFields?: Dispatch<
+		SetStateAction<Widgets['selectedTracesFields']>
+	>;
 }
--- a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
@ -26,4 +26,5 @@ export type QueryBuilderProps = {
 	actions?: ReactNode;
 	filterConfigs?: Partial<FilterConfigs>;
 	queryComponents?: { renderOrderBy?: (props: OrderByFilterProps) => ReactNode };
+	isListViewPanel?: boolean;
 };
--- a/frontend/src/container/QueryBuilder/QueryBuilder.tsx
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
@ -1,7 +1,12 @@
 import './QueryBuilder.styles.scss';

 import { Button, Col, Divider, Row, Tooltip } from 'antd';
-import { MAX_FORMULAS, MAX_QUERIES } from 'constants/queryBuilder';
+import {
+	MAX_FORMULAS,
+	MAX_QUERIES,
+	OPERATORS,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 // ** Hooks
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { DatabaseZap, Sigma } from 'lucide-react';
@ -19,6 +24,7 @@ export const QueryBuilder = memo(function QueryBuilder({
 	panelType: newPanelType,
 	filterConfigs = {},
 	queryComponents,
+	isListViewPanel = false,
 }: QueryBuilderProps): JSX.Element {
 	const {
 		currentQuery,
@ -84,6 +90,33 @@ export const QueryBuilder = memo(function QueryBuilder({
 		}
 	};

+	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, []);
+
+	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			limit: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, []);
+
 	return (
 		<Row
 			style={{ width: '100%' }}
@ -91,21 +124,23 @@ export const QueryBuilder = memo(function QueryBuilder({
 			justify="start"
 			className="query-builder-container"
 		>
-			<div className="new-query-formula-buttons-container">
-				<Button.Group>
-					<Tooltip title="Add Query">
-						<Button disabled={isDisabledQueryButton} onClick={addNewBuilderQuery}>
-							<DatabaseZap size={12} />
-						</Button>
-					</Tooltip>
+			{!isListViewPanel && (
+				<div className="new-query-formula-buttons-container">
+					<Button.Group>
+						<Tooltip title="Add Query">
+							<Button disabled={isDisabledQueryButton} onClick={addNewBuilderQuery}>
+								<DatabaseZap size={12} />
+							</Button>
+						</Tooltip>

-					<Tooltip title="Add Formula">
-						<Button disabled={isDisabledFormulaButton} onClick={addNewFormula}>
-							<Sigma size={12} />
-						</Button>
-					</Tooltip>
-				</Button.Group>
-			</div>
+						<Tooltip title="Add Formula">
+							<Button disabled={isDisabledFormulaButton} onClick={addNewFormula}>
+								<Sigma size={12} />
+							</Button>
+						</Tooltip>
+					</Button.Group>
+				</div>
+			)}

 			<Col span={23} className="qb-entities-list">
 				<Row>
@ -119,49 +154,66 @@ export const QueryBuilder = memo(function QueryBuilder({
 							className="query-builder-queries-formula-container"
 							ref={containerRef}
 						>
-							{currentQuery.builder.queryData.map((query, index) => (
-								<Col
-									key={query.queryName}
-									span={24}
-									className="query"
-									id={`qb-query-${query.queryName}`}
-								>
-									<Query
-										index={index}
-										isAvailableToDisable={isAvailableToDisableQuery}
-										queryVariant={config?.queryVariant || 'dropdown'}
-										query={query}
-										filterConfigs={filterConfigs}
-										queryComponents={queryComponents}
-									/>
-								</Col>
-							))}
-							{currentQuery.builder.queryFormulas.map((formula, index) => {
-								const isAllMetricDataSource = currentQuery.builder.queryData.every(
-									(query) => query.dataSource === DataSource.METRICS,
-								);
-
-								const query =
-									currentQuery.builder.queryData[index] ||
-									currentQuery.builder.queryData[0];
-
-								return (
+							{panelType === PANEL_TYPES.LIST && isListViewPanel && (
+								<Query
+									index={0}
+									isAvailableToDisable={isAvailableToDisableQuery}
+									queryVariant="dropdown"
+									query={currentQuery.builder.queryData[0]}
+									filterConfigs={
+										currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
+											? listViewTracesFilterConfigs
+											: listViewLogFilterConfigs
+									}
+									queryComponents={queryComponents}
+									isListViewPanel
+								/>
+							)}
+							{!isListViewPanel &&
+								currentQuery.builder.queryData.map((query, index) => (
 									<Col
-										key={formula.queryName}
+										key={query.queryName}
 										span={24}
-										className="formula"
-										id={`qb-formula-${formula.queryName}`}
+										className="query"
+										id={`qb-query-${query.queryName}`}
 									>
-										<Formula
-											filterConfigs={filterConfigs}
-											query={query}
-											isAdditionalFilterEnable={isAllMetricDataSource}
-											formula={formula}
+										<Query
 											index={index}
+											isAvailableToDisable={isAvailableToDisableQuery}
+											queryVariant={config?.queryVariant || 'dropdown'}
+											query={query}
+											filterConfigs={filterConfigs}
+											queryComponents={queryComponents}
 										/>
 									</Col>
-								);
-							})}
+								))}
+							{!isListViewPanel &&
+								currentQuery.builder.queryFormulas.map((formula, index) => {
+									const isAllMetricDataSource = currentQuery.builder.queryData.every(
+										(query) => query.dataSource === DataSource.METRICS,
+									);
+
+									const query =
+										currentQuery.builder.queryData[index] ||
+										currentQuery.builder.queryData[0];
+
+									return (
+										<Col
+											key={formula.queryName}
+											span={24}
+											className="formula"
+											id={`qb-formula-${formula.queryName}`}
+										>
+											<Formula
+												filterConfigs={filterConfigs}
+												query={query}
+												isAdditionalFilterEnable={isAllMetricDataSource}
+												formula={formula}
+												index={index}
+											/>
+										</Col>
+									);
+								})}
 						</Row>

 						<Col span={24} className="divider">
@ -171,29 +223,31 @@ export const QueryBuilder = memo(function QueryBuilder({
 				</Row>
 			</Col>

-			<Col span={1} className="query-builder-mini-map">
-				{currentQuery.builder.queryData.map((query) => (
-					<Button
-						disabled={isDisabledQueryButton}
-						className="query-btn"
-						key={query.queryName}
-						onClick={(): void => handleScrollIntoView('query', query.queryName)}
-					>
-						{query.queryName}
-					</Button>
-				))}
+			{!isListViewPanel && (
+				<Col span={1} className="query-builder-mini-map">
+					{currentQuery.builder.queryData.map((query) => (
+						<Button
+							disabled={isDisabledQueryButton}
+							className="query-btn"
+							key={query.queryName}
+							onClick={(): void => handleScrollIntoView('query', query.queryName)}
+						>
+							{query.queryName}
+						</Button>
+					))}

-				{currentQuery.builder.queryFormulas.map((formula) => (
-					<Button
-						disabled={isDisabledFormulaButton}
-						className="formula-btn"
-						key={formula.queryName}
-						onClick={(): void => handleScrollIntoView('formula', formula.queryName)}
-					>
-						{formula.queryName}
-					</Button>
-				))}
-			</Col>
+					{currentQuery.builder.queryFormulas.map((formula) => (
+						<Button
+							disabled={isDisabledFormulaButton}
+							className="formula-btn"
+							key={formula.queryName}
+							onClick={(): void => handleScrollIntoView('formula', formula.queryName)}
+						>
+							{formula.queryName}
+						</Button>
+					))}
+				</Col>
+			)}
 		</Row>
 	);
 });
--- a/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.interfaces.ts
@ -3,4 +3,5 @@ import { DataSource } from 'types/common/queryBuilder';

 export type QueryLabelProps = {
 	onChange: (value: DataSource) => void;
+	isListViewPanel?: boolean;
 } & Omit<SelectProps, 'onChange'>;
--- a/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx
+++ b/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx
@ -10,18 +10,22 @@ import { QueryLabelProps } from './DataSourceDropdown.interfaces';

 const dataSourceMap = [DataSource.LOGS, DataSource.METRICS, DataSource.TRACES];

+const exploreDataSourceMap = [DataSource.LOGS, DataSource.TRACES];
+
 export const DataSourceDropdown = memo(function DataSourceDropdown(
 	props: QueryLabelProps,
 ): JSX.Element {
-	const { onChange, value, style } = props;
+	const { onChange, value, style, isListViewPanel = false } = props;

-	const dataSourceOptions: SelectOption<
-		DataSource,
-		string
-	>[] = dataSourceMap.map((source) => ({
-		label: transformToUpperCase(source),
-		value: source,
-	}));
+	const dataSourceOptions: SelectOption<DataSource, string>[] = isListViewPanel
+		? exploreDataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+		  }))
+		: dataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+		  }));

 	return (
 		<Select
--- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
+++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
@ -12,6 +12,7 @@ interface QBEntityOptionsProps {
 	onToggleVisibility: () => void;
 	onCollapseEntity: () => void;
 	showDeleteButton: boolean;
+	isListViewPanel?: boolean;
 }

 export default function QBEntityOptions({
@ -22,6 +23,7 @@ export default function QBEntityOptions({
 	onToggleVisibility,
 	onCollapseEntity,
 	showDeleteButton,
+	isListViewPanel = false,
 }: QBEntityOptionsProps): JSX.Element {
 	return (
 		<Col span={24}>
@ -40,10 +42,10 @@ export default function QBEntityOptions({
 								value="query-builder"
 								className="periscope-btn visibility-toggle"
 								onClick={onToggleVisibility}
+								disabled={isListViewPanel}
 							>
 								{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 							</Button>
-
 							<Button
 								className={cx(
 									'periscope-btn',
@ -72,3 +74,7 @@ export default function QBEntityOptions({
 		</Col>
 	);
 }
+
+QBEntityOptions.defaultProps = {
+	isListViewPanel: false,
+};
--- a/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts
@ -6,4 +6,5 @@ export type QueryProps = {
 	isAvailableToDisable: boolean;
 	query: IBuilderQuery;
 	queryVariant: 'static' | 'dropdown';
+	isListViewPanel?: boolean;
 } & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;
--- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import './Query.styles.scss';

 import { Col, Input, Row } from 'antd';
@ -46,6 +47,7 @@ export const Query = memo(function Query({
 	query,
 	filterConfigs,
 	queryComponents,
+	isListViewPanel = false,
 }: QueryProps): JSX.Element {
 	const { panelType, currentQuery } = useQueryBuilder();
 	const { pathname } = useLocation();
@ -62,7 +64,7 @@ export const Query = memo(function Query({
 		handleChangeDataSource,
 		handleChangeOperator,
 		handleDeleteQuery,
-	} = useQueryOperations({ index, query, filterConfigs });
+	} = useQueryOperations({ index, query, filterConfigs, isListViewPanel });

 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
@ -136,8 +138,14 @@ export const Query = memo(function Query({
 			});
 		}

-		return <OrderByFilter query={query} onChange={handleChangeOrderByKeys} />;
-	}, [queryComponents, query, handleChangeOrderByKeys]);
+		return (
+			<OrderByFilter
+				query={query}
+				onChange={handleChangeOrderByKeys}
+				isListViewPanel={isListViewPanel}
+			/>
+		);
+	}, [queryComponents, query, handleChangeOrderByKeys, isListViewPanel]);

 	const renderAggregateEveryFilter = useCallback(
 		(): JSX.Element | null =>
@ -289,6 +297,7 @@ export const Query = memo(function Query({
 				onDelete={handleDeleteQuery}
 				onCollapseEntity={handleToggleCollapsQuery}
 				showDeleteButton={currentQuery.builder.queryData.length > 1}
+				isListViewPanel={isListViewPanel}
 			/>

 			{!isCollapse && (
@ -302,6 +311,7 @@ export const Query = memo(function Query({
 											onChange={handleChangeDataSource}
 											value={query.dataSource}
 											style={{ minWidth: '5.625rem' }}
+											isListViewPanel={isListViewPanel}
 										/>
 									) : (
 										<FilterLabel label={transformToUpperCase(query.dataSource)} />
@ -346,7 +356,7 @@ export const Query = memo(function Query({
 							</Col>
 						</Row>
 					</Col>
-					{!isMetricsDataSource && (
+					{!isMetricsDataSource && !isListViewPanel && (
 						<Col span={11}>
 							<Row gutter={[11, 5]}>
 								<Col flex="5.93rem">
@ -368,27 +378,29 @@ export const Query = memo(function Query({
 							</Row>
 						</Col>
 					)}
-					<Col span={11} offset={isMetricsDataSource ? 0 : 2}>
-						<Row gutter={[11, 5]}>
-							<Col flex="5.93rem">
-								<FilterLabel
-									label={panelType === PANEL_TYPES.VALUE ? 'Reduce to' : 'Group by'}
-								/>
-							</Col>
-							<Col flex="1 1 12.5rem">
-								{panelType === PANEL_TYPES.VALUE ? (
-									<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
-								) : (
-									<GroupByFilter
-										disabled={isMetricsDataSource && !query.aggregateAttribute.key}
-										query={query}
-										onChange={handleChangeGroupByKeys}
+					{!isListViewPanel && (
+						<Col span={11} offset={isMetricsDataSource ? 0 : 2}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel
+										label={panelType === PANEL_TYPES.VALUE ? 'Reduce to' : 'Group by'}
 									/>
-								)}
-							</Col>
-						</Row>
-					</Col>
-					{!isTracePanelType && (
+								</Col>
+								<Col flex="1 1 12.5rem">
+									{panelType === PANEL_TYPES.VALUE ? (
+										<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
+									) : (
+										<GroupByFilter
+											disabled={isMetricsDataSource && !query.aggregateAttribute.key}
+											query={query}
+											onChange={handleChangeGroupByKeys}
+										/>
+									)}
+								</Col>
+							</Row>
+						</Col>
+					)}
+					{!isTracePanelType && !isListViewPanel && (
 						<Col span={24}>
 							<AdditionalFiltersToggler
 								listOfAdditionalFilter={listOfAdditionalFilters}
@ -399,6 +411,13 @@ export const Query = memo(function Query({
 							</AdditionalFiltersToggler>
 						</Col>
 					)}
+					{isListViewPanel && (
+						<Col span={24}>
+							<Row gutter={[0, 11]} justify="space-between">
+								{renderAdditionalFilters()}
+							</Row>
+						</Col>
+					)}
 					{panelType !== PANEL_TYPES.LIST && panelType !== PANEL_TYPES.TRACE && (
 						<Row style={{ width: '100%' }}>
 							<Input
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts
@ -6,6 +6,7 @@ import {
 export type OrderByFilterProps = {
 	query: IBuilderQuery;
 	onChange: (values: OrderByPayload[]) => void;
+	isListViewPanel?: boolean;
 };

 export type OrderByFilterValue = {
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
@ -11,6 +11,7 @@ import { useOrderByFilter } from './useOrderByFilter';
 export function OrderByFilter({
 	query,
 	onChange,
+	isListViewPanel = false,
 }: OrderByFilterProps): JSX.Element {
 	const {
 		debouncedSearchText,
@ -30,7 +31,7 @@ export function OrderByFilter({
 			searchText: debouncedSearchText,
 		},
 		{
-			enabled: !!query.aggregateAttribute.key,
+			enabled: !!query.aggregateAttribute.key || isListViewPanel,
 			keepPreviousData: true,
 		},
 	);
--- a/frontend/src/container/TracesExplorer/Controls/styles.ts
+++ b/frontend/src/container/TracesExplorer/Controls/styles.ts
@ -4,6 +4,5 @@ export const Container = styled.div`
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
-	gap: 0.5rem;
-	margin: 4px 0;
+	gap: 0.3rem;
 `;
--- a/frontend/src/container/TracesExplorer/ListView/index.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/index.tsx
@ -4,6 +4,7 @@ import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useOptionsMenu } from 'container/OptionsMenu';
+import TraceExplorerControls from 'container/TracesExplorer/Controls';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
@ -18,7 +19,6 @@ import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';

-import TraceExplorerControls from '../Controls';
 import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
 import { Container, ErrorText, tableStyles } from './styles';
 import { getListColumns, getTraceLink, transformDataWithDate } from './utils';
--- a/frontend/src/container/TracesExplorer/ListView/styles.ts
+++ b/frontend/src/container/TracesExplorer/ListView/styles.ts
@ -3,7 +3,7 @@ import { CSSProperties } from 'react';
 import styled from 'styled-components';

 export const tableStyles: CSSProperties = {
-	cursor: 'pointer',
+	cursor: 'unset',
 };

 export const Container = styled.div`
--- a/frontend/src/container/TracesExplorer/ListView/utils.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/utils.tsx
@ -3,14 +3,11 @@ import { ColumnsType } from 'antd/es/table';
 import ROUTES from 'constants/routes';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
-import dayjs from 'dayjs';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { ILog } from 'types/api/logs/log';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';

-import { DateText } from './styles';
-
 export const transformDataWithDate = (
 	data: QueryDataV3[],
 ): Omit<ILog, 'timestamp'>[] =>
@ -27,28 +24,14 @@ export const getTraceLink = (record: RowData): string =>
 export const getListColumns = (
 	selectedColumns: BaseAutocompleteData[],
 ): ColumnsType<RowData> => {
-	const initialColumns: ColumnsType<RowData> = [
-		{
-			title: 'date',
-			dataIndex: 'date',
-			key: 'date',
-			width: 145,
-			render: (date: string): JSX.Element => {
-				const day = dayjs(date);
-				return (
-					<DateText data-testid="trace-explorer-date">
-						{day.format('YYYY/MM/DD HH:mm:ss')}
-					</DateText>
-				);
-			},
-		},
-	];
+	const initialColumns: ColumnsType<RowData> = [];

 	const columns: ColumnsType<RowData> =
 		selectedColumns.map(({ dataType, key, type }) => ({
 			title: key,
 			dataIndex: key,
 			key: `${key}-${dataType}-${type}`,
+			width: 145,
 			render: (value): JSX.Element => {
 				if (value === '') {
 					return <Typography data-testid={key}>N/A</Typography>;
@ -68,6 +51,7 @@ export const getListColumns = (

 				return <Typography data-testid={key}>{value}</Typography>;
 			},
+			responsive: ['md'],
 		})) || [];

 	return [...initialColumns, ...columns];
--- a/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss
+++ b/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss
@ -0,0 +1,65 @@
+.traces-table {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .resize-table {
+        height: calc(90% - 5px);
+        overflow: scroll;
+        
+        .ant-table-wrapper .ant-table-tbody >tr >td {
+            border: none;
+            background-color: transparent;
+            color: var(--bg-vanilla-100);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 18px; 
+            padding: 10px 8px;
+            font-family: Inter;
+            cursor: pointer;
+        }
+
+        .ant-table-wrapper .ant-table-thead > tr > th {
+            font-family: Inter;
+            color: var(--bg-vanilla-100);
+            background-color: transparent;
+            border: none;
+            border-bottom: 0.5px solid var(--bg-slate-400);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 22px;
+            letter-spacing: 0.5px;
+            padding: 8px;
+        }
+
+        .ant-table-wrapper .ant-table-thead > tr > th::before {
+            display: none;
+        }
+    }
+
+    .controller {
+        position: absolute;
+        bottom: 5px;
+        right: 10px;
+    }
+}
+
+.lightMode {
+    .traces-table {
+        .resize-table {
+            .ant-table-wrapper .ant-table-tbody >tr >td {
+                background-color: var(--bg-vanilla-100);
+                color: var(--bg-ink-500);
+                border-color: rgba(0, 0, 0, 0.06);
+            }
+            .ant-table-wrapper .ant-table-thead > tr > th {
+                background-color: var(--bg-vanilla-300);
+                color: var(--bg-ink-500); 
+                border-color: rgba(0, 0, 0, 0.06);
+            }
+        }
+    }
+}
--- a/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
+++ b/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
@ -0,0 +1,170 @@
+import './TracesTableComponent.styles.scss';
+
+import { Table } from 'antd';
+// import { ResizeTable } from 'components/ResizeTable';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import Controls from 'container/Controls';
+import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
+import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
+import { tableStyles } from 'container/TracesExplorer/ListView/styles';
+import {
+	getListColumns,
+	getTraceLink,
+	transformDataWithDate,
+} from 'container/TracesExplorer/ListView/utils';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { Pagination } from 'hooks/queryPagination';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
+import history from 'lib/history';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { HTMLAttributes, useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+function TracesTableComponent({
+	selectedTracesFields,
+	query,
+	selectedTime,
+}: TracesTableComponentProps): JSX.Element {
+	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	const [pagination, setPagination] = useState<Pagination>({
+		offset: 0,
+		limit: 10,
+	});
+
+	const { selectedDashboard } = useDashboard();
+
+	const { data, isFetching, isError } = useGetQueryRange(
+		{
+			query,
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: selectedTime?.enum || 'GLOBAL_TIME',
+			globalSelectedInterval: globalSelectedTime,
+			params: {
+				dataSource: 'traces',
+			},
+			tableParams: {
+				pagination,
+				selectColumns: selectedTracesFields,
+			},
+			variables: getDashboardVariables(selectedDashboard?.data.variables),
+		},
+		{
+			queryKey: [
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				globalSelectedTime,
+				maxTime,
+				minTime,
+				query,
+				pagination,
+				selectedTracesFields?.length,
+				selectedTime?.enum,
+				selectedDashboard?.data.variables,
+			],
+			enabled: !!query && !!selectedTracesFields?.length,
+		},
+	);
+
+	const columns = getListColumns(selectedTracesFields || []);
+
+	const dataLength =
+		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
+	const totalCount = useMemo(() => dataLength || 0, [dataLength]);
+
+	const queryTableDataResult = data?.payload.data.newResult.data.result;
+	const queryTableData = useMemo(() => queryTableDataResult || [], [
+		queryTableDataResult,
+	]);
+
+	const transformedQueryTableData = useMemo(
+		() => ((transformDataWithDate(queryTableData) || []) as unknown) as RowData[],
+		[queryTableData],
+	);
+
+	const handleRow = useCallback(
+		(record: RowData): HTMLAttributes<RowData> => ({
+			onClick: (event): void => {
+				event.preventDefault();
+				event.stopPropagation();
+				if (event.metaKey || event.ctrlKey) {
+					window.open(getTraceLink(record), '_blank');
+				} else {
+					history.push(getTraceLink(record));
+				}
+			},
+		}),
+		[],
+	);
+
+	if (isError) {
+		return <div>{SOMETHING_WENT_WRONG}</div>;
+	}
+
+	return (
+		<div className="traces-table">
+			<div className="resize-table">
+				<Table
+					pagination={false}
+					tableLayout="fixed"
+					scroll={{ x: true }}
+					loading={isFetching}
+					style={tableStyles}
+					dataSource={transformedQueryTableData}
+					columns={columns}
+					onRow={handleRow}
+					sticky
+				/>
+			</div>
+			<div className="controller">
+				<Controls
+					totalCount={totalCount}
+					perPageOptions={PER_PAGE_OPTIONS}
+					isLoading={isFetching}
+					offset={pagination.offset}
+					countPerPage={pagination.limit}
+					handleNavigatePrevious={(): void => {
+						setPagination({
+							...pagination,
+							offset: pagination.offset - pagination.limit,
+						});
+					}}
+					handleNavigateNext={(): void => {
+						setPagination({
+							...pagination,
+							offset: pagination.offset + pagination.limit,
+						});
+					}}
+					handleCountItemsPerPageChange={(value): void => {
+						setPagination({
+							...pagination,
+							limit: value,
+							offset: 0,
+						});
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export type TracesTableComponentProps = {
+	selectedTracesFields: Widgets['selectedTracesFields'];
+	query: Query;
+	selectedTime?: timePreferance;
+};
+
+TracesTableComponent.defaultProps = {
+	selectedTime: undefined,
+};
+
+export default TracesTableComponent;
--- a/frontend/src/hooks/dashboard/utils.ts
+++ b/frontend/src/hooks/dashboard/utils.ts
@ -35,6 +35,8 @@ export const addEmptyWidgetInDashboardJSONWithQuery = (
 				panelTypes: panelTypes || PANEL_TYPES.TIME_SERIES,
 				softMax: null,
 				softMin: null,
+				selectedLogFields: [],
+				selectedTracesFields: [],
 			},
 		],
 	},
--- a/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts
+++ b/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts
@ -6,6 +6,10 @@ import {
 	mapOfQueryFilters,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
+import {
+	listViewInitialLogQuery,
+	listViewInitialTraceQuery,
+} from 'container/NewDashboard/ComponentsSlider/constants';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getOperatorsBySourceAndPanelType } from 'lib/newQueryBuilder/getOperatorsBySourceAndPanelType';
 import { findDataTypeOfOperator } from 'lib/query/findDataTypeOfOperator';
@ -29,6 +33,7 @@ export const useQueryOperations: UseQueryOperations = ({
 	index,
 	filterConfigs,
 	formula,
+	isListViewPanel = false,
 }) => {
 	const {
 		handleSetQueryData,
@ -37,6 +42,7 @@ export const useQueryOperations: UseQueryOperations = ({
 		panelType,
 		initialDataSource,
 		currentQuery,
+		redirectWithQueryBuilderData,
 	} = useQueryBuilder();

 	const [operators, setOperators] = useState<SelectOption<string, string>[]>([]);
@ -125,6 +131,14 @@ export const useQueryOperations: UseQueryOperations = ({

 	const handleChangeDataSource = useCallback(
 		(nextSource: DataSource): void => {
+			if (isListViewPanel) {
+				if (nextSource === DataSource.LOGS) {
+					redirectWithQueryBuilderData(listViewInitialLogQuery);
+				} else if (nextSource === DataSource.TRACES) {
+					redirectWithQueryBuilderData(listViewInitialTraceQuery);
+				}
+			}
+
 			const newOperators = getOperatorsBySourceAndPanelType({
 				dataSource: nextSource,
 				panelType: panelType || PANEL_TYPES.TIME_SERIES,
@ -146,7 +160,14 @@ export const useQueryOperations: UseQueryOperations = ({
 			setOperators(newOperators);
 			handleSetQueryData(index, newQuery);
 		},
-		[index, query, panelType, handleSetQueryData],
+		[
+			isListViewPanel,
+			panelType,
+			query,
+			handleSetQueryData,
+			index,
+			redirectWithQueryBuilderData,
+		],
 	);

 	const handleDeleteQuery = useCallback(() => {
--- a/frontend/src/hooks/useLogsData.ts
+++ b/frontend/src/hooks/useLogsData.ts
@ -0,0 +1,196 @@
+import { QueryParams } from 'constants/query';
+import {
+	initialQueryBuilderFormValues,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
+import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData';
+import { useEffect, useMemo, useState } from 'react';
+import { ILog } from 'types/api/logs/log';
+import {
+	IBuilderQuery,
+	OrderByPayload,
+	Query,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+
+import { LogTimeRange } from './logs/types';
+import { useCopyLogLink } from './logs/useCopyLogLink';
+import { useGetExplorerQueryRange } from './queryBuilder/useGetExplorerQueryRange';
+import useUrlQueryData from './useUrlQueryData';
+
+export const useLogsData = ({
+	result,
+	panelType,
+	stagedQuery,
+}: {
+	result: QueryDataV3[] | undefined;
+	panelType: PANEL_TYPES;
+	stagedQuery: Query | null;
+}): {
+	logs: ILog[];
+	handleEndReached: (index: number) => void;
+	isFetching: boolean;
+} => {
+	const [logs, setLogs] = useState<ILog[]>([]);
+	const [page, setPage] = useState<number>(1);
+	const [requestData, setRequestData] = useState<Query | null>(null);
+	const [shouldLoadMoreLogs, setShouldLoadMoreLogs] = useState<boolean>(false);
+
+	const { queryData: pageSize } = useUrlQueryData(
+		QueryParams.pageSize,
+		DEFAULT_PER_PAGE_VALUE,
+	);
+
+	const listQuery = useMemo(() => {
+		if (!stagedQuery || stagedQuery?.builder?.queryData?.length < 1) return null;
+
+		return stagedQuery.builder?.queryData.find((item) => !item.disabled) || null;
+	}, [stagedQuery]);
+
+	const isLimit: boolean = useMemo(() => {
+		if (!listQuery) return false;
+		if (!listQuery.limit) return false;
+
+		return logs.length >= listQuery.limit;
+	}, [logs.length, listQuery]);
+
+	const orderByTimestamp: OrderByPayload | null = useMemo(() => {
+		const timestampOrderBy = listQuery?.orderBy.find(
+			(item) => item.columnName === 'timestamp',
+		);
+
+		return timestampOrderBy || null;
+	}, [listQuery]);
+
+	useEffect(() => {
+		if (panelType !== PANEL_TYPES.LIST) return;
+		const currentData = result || [];
+		if (currentData.length > 0 && currentData[0].list) {
+			const currentLogs: ILog[] = currentData[0].list.map((item) => ({
+				...item.data,
+				timestamp: item.timestamp,
+			}));
+			const newLogs = [...currentLogs];
+
+			setLogs(newLogs);
+		} else {
+			setLogs([]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [result]);
+
+	const getRequestData = (
+		query: Query | null,
+		params: {
+			page: number;
+			log: ILog | null;
+			pageSize: number;
+			filters: TagFilter;
+		},
+	): Query | null => {
+		if (!query) return null;
+
+		const paginateData = getPaginationQueryData({
+			filters: params.filters,
+			listItemId: params.log ? params.log.id : null,
+			orderByTimestamp,
+			page: params.page,
+			pageSize: params.pageSize,
+		});
+
+		const queryData: IBuilderQuery[] =
+			query.builder.queryData.length > 1
+				? query.builder.queryData
+				: [
+						{
+							...(listQuery || initialQueryBuilderFormValues),
+							...paginateData,
+						},
+				  ];
+
+		const data: Query = {
+			...query,
+			builder: {
+				...query.builder,
+				queryData,
+			},
+		};
+
+		return data;
+	};
+
+	const { activeLogId, timeRange, onTimeRangeChange } = useCopyLogLink();
+
+	const { data, isFetching } = useGetExplorerQueryRange(
+		requestData,
+		panelType,
+		{
+			keepPreviousData: true,
+			enabled: !isLimit && !!requestData,
+		},
+		{
+			...(timeRange &&
+				activeLogId &&
+				!logs.length && {
+					start: timeRange.start,
+					end: timeRange.end,
+				}),
+		},
+		shouldLoadMoreLogs,
+	);
+
+	useEffect(() => {
+		const currentParams = data?.params as Omit<LogTimeRange, 'pageSize'>;
+		const currentData = data?.payload.data.newResult.data.result || [];
+		if (currentData.length > 0 && currentData[0].list) {
+			const currentLogs: ILog[] = currentData[0].list.map((item) => ({
+				...item.data,
+				timestamp: item.timestamp,
+			}));
+			const newLogs = [...logs, ...currentLogs];
+
+			setLogs(newLogs);
+			onTimeRangeChange({
+				start: currentParams?.start,
+				end: timeRange?.end || currentParams?.end,
+				pageSize: newLogs.length,
+			});
+		}
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data]);
+
+	const handleEndReached = (index: number): void => {
+		if (!listQuery) return;
+
+		if (isLimit) return;
+		if (logs.length < pageSize) return;
+
+		const { limit, filters } = listQuery;
+
+		const lastLog = logs[index];
+
+		const nextLogsLength = logs.length + pageSize;
+
+		const nextPageSize =
+			limit && nextLogsLength >= limit ? limit - logs.length : pageSize;
+
+		if (!stagedQuery) return;
+
+		const newRequestData = getRequestData(stagedQuery, {
+			filters,
+			page: page + 1,
+			log: orderByTimestamp ? lastLog : null,
+			pageSize: nextPageSize,
+		});
+
+		setPage((prevPage) => prevPage + 1);
+
+		setRequestData(newRequestData);
+		setShouldLoadMoreLogs(true);
+	};
+
+	return { logs, handleEndReached, isFetching };
+};
--- a/frontend/src/types/api/dashboard/getAll.ts
+++ b/frontend/src/types/api/dashboard/getAll.ts
@ -5,6 +5,9 @@ import { ReactNode } from 'react';
 import { Layout } from 'react-grid-layout';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

+import { IField } from '../logs/fields';
+import { BaseAutocompleteData } from '../queryBuilder/queryAutocompleteResponse';
+
 export type PayloadProps = Dashboard[];

 export const VariableQueryTypeArr = ['QUERY', 'TEXTBOX', 'CUSTOM'] as const;
@ -76,6 +79,8 @@ export interface IBaseWidget {
 	softMin: number | null;
 	softMax: number | null;
 	fillSpans?: boolean;
+	selectedLogFields: IField[] | null;
+	selectedTracesFields: BaseAutocompleteData[] | null;
 }
 export interface Widgets extends IBaseWidget {
 	query: Query;
--- a/frontend/src/types/common/operations.types.ts
+++ b/frontend/src/types/common/operations.types.ts
@ -12,6 +12,7 @@ import { SelectOption } from './select';
 type UseQueryOperationsParams = Pick<QueryProps, 'index' | 'query'> &
 	Pick<QueryBuilderProps, 'filterConfigs'> & {
 		formula?: IBuilderFormula;
+		isListViewPanel?: boolean;
 	};

 export type HandleChangeQueryData = <
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -4222,6 +4222,13 @@
  dependencies:
    "@types/react" "*"

+"@types/react-beautiful-dnd@13.1.8":
+  version "13.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz#f52d3ea07e1e19159d6c3c4a48c8da3d855e60b4"
+  integrity sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@18.0.10", "@types/react-dom@^18.0.0":
  version "18.0.10"
  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz"
@ -6809,7 +6816,7 @@ critters@^0.0.16:

 cross-env@^7.0.3:
  version "7.0.3"
-  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
  dependencies:
    cross-spawn "^7.0.1"
@ -6846,6 +6853,13 @@ crypto-random-string@^2.0.0:
  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==

+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-color-keywords@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
@ -11697,6 +11711,11 @@ memfs@^3.4.3:
  dependencies:
    fs-monkey "^1.0.3"

+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memorystream@^0.3.1:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
@ -13749,6 +13768,11 @@ quickselect@^2.0.0:
  resolved "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz"
  integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==

+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 randombytes@^2.1.0:
  version "2.1.0"
  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
@ -14179,6 +14203,19 @@ react-addons-update@15.6.3:
  dependencies:
    object-assign "^4.1.0"

+react-beautiful-dnd@13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
+  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-dnd-html5-backend@16.0.1:
  version "16.0.1"
  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6"
@ -14361,7 +14398,7 @@ react-query@3.39.3:
    broadcast-channel "^3.4.1"
    match-sorter "^6.0.2"

-react-redux@^7.2.2:
+react-redux@^7.2.0, react-redux@^7.2.2:
  version "7.2.9"
  resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"
  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
@ -14556,7 +14593,7 @@ redux-thunk@^2.3.0:
  resolved "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz"
  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==

-redux@^4.0.0, redux@^4.0.5, redux@^4.2.0:
+redux@^4.0.0, redux@^4.0.4, redux@^4.0.5, redux@^4.2.0:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
@ -16162,7 +16199,7 @@ timestamp-nano@^1.0.0:
  resolved "https://registry.npmjs.org/timestamp-nano/-/timestamp-nano-1.0.1.tgz"
  integrity sha512-4oGOVZWTu5sl89PtCDnhQBSt7/vL1zVEwAfxH1p49JhTosxzVQWYBYFRFZ8nJmo0G6f824iyP/44BFAwIoKvIA==

-tiny-invariant@^1.0.2:
+tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
  version "1.3.1"
  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz"
  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
@ -16731,6 +16768,11 @@ use-isomorphic-layout-effect@^1.1.2:
  resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz"
  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==

+use-memo-one@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
+
 use-sync-external-store@^1.0.0:
  version "1.2.0"
  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"