feat: Added Resizable Wrapper for Ant Design Table (#2014)

* feat: Added Resizable Wrapper for AntD Table

* chore: Merging upstream develop into fork

* chore: updated lock file

* fix: Lint issues resolved

* fix: Lint issues resolved

* fix: Types issues

* fix: linting issues

* fix: Types issues

* fix: POC of new resize lib

* fix: linting issues

* chore: resize is updated

* fix: added old lib logic

* fix: removed console.log

* chore: types are updated

* chore: removed un used style

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/package.json

@@ -138,6 +138,7 @@
 		"@types/react-dom": "18.0.10",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/react-redux": "^7.1.11",
+		"@types/react-resizable": "3.0.3",
 		"@types/react-router-dom": "^5.1.6",
 		"@types/redux": "^3.6.0",
 		"@types/styled-components": "^5.1.4",
@@ -176,6 +177,7 @@
 		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",
 		"react-hot-loader": "^4.13.0",
+		"react-resizable": "3.0.4",
 		"ts-jest": "^27.1.4",
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "^3.4.0",

frontend/src/components/ResizeTableWrapper/ResizableHeader.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { Resizable, ResizeCallbackData } from 'react-resizable';
+
+import { enableUserSelectHack } from './config';
+import { SpanStyle } from './styles';
+
+function ResizableHeader(props: ResizableHeaderProps): JSX.Element {
+	const { onResize, width, ...restProps } = props;
+
+	const handle = useMemo(
+		() => (
+			<SpanStyle
+				className="react-resizable-handle"
+				onClick={(e): void => e.stopPropagation()}
+			/>
+		),
+		[],
+	);
+
+	const draggableOpts = useMemo(
+		() => ({
+			enableUserSelectHack,
+		}),
+		[],
+	);
+
+	if (!width) {
+		// eslint-disable-next-line react/jsx-props-no-spreading
+		return <th {...restProps} />;
+	}
+
+	return (
+		<Resizable
+			width={width}
+			height={0}
+			handle={handle}
+			onResize={onResize}
+			draggableOpts={draggableOpts}
+		>
+			{/* eslint-disable-next-line react/jsx-props-no-spreading */}
+			<th {...restProps} />
+		</Resizable>
+	);
+}
+
+interface ResizableHeaderProps {
+	onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
+	width: number;
+}
+
+export default ResizableHeader;

frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx

@@ -0,0 +1,47 @@
+import { ColumnsType } from 'antd/lib/table';
+import React, { useCallback, useMemo, useState } from 'react';
+import { ResizeCallbackData } from 'react-resizable';
+
+function ResizeTableWrapper({
+	children,
+	columns,
+}: ResizeTableWrapperProps): JSX.Element {
+	const [columnsData, setColumns] = useState<ColumnsType>(columns);
+
+	const handleResize = useCallback(
+		(index: number) => (
+			_e: React.SyntheticEvent<Element>,
+			{ size }: ResizeCallbackData,
+		): void => {
+			const newColumns = [...columnsData];
+			newColumns[index] = {
+				...newColumns[index],
+				width: size.width,
+			};
+			setColumns(newColumns);
+		},
+		[columnsData],
+	);
+
+	const mergeColumns = useMemo(
+		() =>
+			columnsData.map((col, index) => ({
+				...col,
+				onHeaderCell: (column: ColumnsType<unknown>[number]): unknown => ({
+					width: column.width,
+					onResize: handleResize(index),
+				}),
+			})),
+		[columnsData, handleResize],
+	);
+
+	return <> {React.cloneElement(children, { columns: mergeColumns })}</>;
+}
+
+interface ResizeTableWrapperProps {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	columns: ColumnsType<any>;
+	children: JSX.Element;
+}
+
+export default ResizeTableWrapper;

frontend/src/components/ResizeTableWrapper/config.ts

@@ -0,0 +1 @@
+export const enableUserSelectHack = { enableUserSelectHack: false };

frontend/src/components/ResizeTableWrapper/index.ts

@@ -0,0 +1,4 @@
+import ResizableHeader from './ResizableHeader';
+import ResizeTableWrapper from './ResizeTableWrapper';
+
+export { ResizableHeader, ResizeTableWrapper };

frontend/src/components/ResizeTableWrapper/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const SpanStyle = styled.span`
+	position: absolute;
+	right: -5px;
+	bottom: 0;
+	z-index: 1;
+	width: 10px;
+	height: 100%;
+	cursor: col-resize;
+`;

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,6 +1,10 @@
 /* eslint-disable react/display-name */
 import { Button, notification, Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
@@ -34,11 +38,13 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			title: t('column_channel_name'),
 			dataIndex: 'name',
 			key: 'name',
+			width: 100,
 		},
 		{
 			title: t('column_channel_type'),
 			dataIndex: 'type',
 			key: 'type',
+			width: 80,
 		},
 	];
 
@@ -48,6 +54,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			dataIndex: 'id',
 			key: 'action',
 			align: 'center',
+			width: 80,
 			render: (id: string): JSX.Element => (
 				<>
 					<Button onClick={(): void => onClickEditHandler(id)} type="link">
@@ -62,8 +69,13 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	return (
 		<>
 			{Element}
-
-			<Table rowKey="id" dataSource={channels} columns={columns} />
+			<ResizeTableWrapper columns={columns}>
+				<Table
+					components={{ header: { cell: ResizableHeader } }}
+					dataSource={channels}
+					rowKey="id"
+				/>
+			</ResizeTableWrapper>
 		</>
 	);
 }

frontend/src/container/AllError/index.tsx

@@ -16,6 +16,10 @@ import { ColumnsType } from 'antd/lib/table';
 import { FilterConfirmProps } from 'antd/lib/table/interface';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -259,6 +263,7 @@ function AllErrors(): JSX.Element {
 	const columns: ColumnsType<Exception> = [
 		{
 			title: 'Exception Type',
+			width: 100,
 			dataIndex: 'exceptionType',
 			key: 'exceptionType',
 			...getFilter(onExceptionTypeFilter, 'Search By Exception', 'exceptionType'),
@@ -284,6 +289,7 @@ function AllErrors(): JSX.Element {
 			title: 'Error Message',
 			dataIndex: 'exceptionMessage',
 			key: 'exceptionMessage',
+			width: 100,
 			render: (value): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
 					<Typography.Paragraph
@@ -298,6 +304,7 @@ function AllErrors(): JSX.Element {
 		},
 		{
 			title: 'Count',
+			width: 50,
 			dataIndex: 'exceptionCount',
 			key: 'exceptionCount',
 			sorter: true,
@@ -310,6 +317,7 @@ function AllErrors(): JSX.Element {
 		{
 			title: 'Last Seen',
 			dataIndex: 'lastSeen',
+			width: 80,
 			key: 'lastSeen',
 			render: getDateValue,
 			sorter: true,
@@ -322,6 +330,7 @@ function AllErrors(): JSX.Element {
 		{
 			title: 'First Seen',
 			dataIndex: 'firstSeen',
+			width: 80,
 			key: 'firstSeen',
 			render: getDateValue,
 			sorter: true,
@@ -334,6 +343,7 @@ function AllErrors(): JSX.Element {
 		{
 			title: 'Application',
 			dataIndex: 'serviceName',
+			width: 100,
 			key: 'serviceName',
 			sorter: true,
 			defaultSortOrder: getDefaultOrder(
@@ -382,21 +392,23 @@ function AllErrors(): JSX.Element {
 	return (
 		<>
 			{NotificationElement}
-			<Table
-				tableLayout="fixed"
-				dataSource={data?.payload as Exception[]}
-				columns={columns}
-				rowKey="firstSeen"
-				loading={isLoading || false || errorCountResponse.status === 'loading'}
-				pagination={{
-					pageSize: getUpdatedPageSize,
-					responsive: true,
-					current: getUpdatedOffset / 10 + 1,
-					position: ['bottomLeft'],
-					total: errorCountResponse.data?.payload || 0,
-				}}
-				onChange={onChangeHandler}
-			/>
+			<ResizeTableWrapper columns={columns}>
+				<Table
+					tableLayout="fixed"
+					dataSource={data?.payload as Exception[]}
+					components={{ header: { cell: ResizableHeader } }}
+					rowKey="firstSeen"
+					loading={isLoading || false || errorCountResponse.status === 'loading'}
+					pagination={{
+						pageSize: getUpdatedPageSize,
+						responsive: true,
+						current: getUpdatedOffset / 10 + 1,
+						position: ['bottomLeft'],
+						total: errorCountResponse.data?.payload || 0,
+					}}
+					onChange={onChangeHandler}
+				/>
+			</ResizeTableWrapper>
 		</>
 	);
 }

frontend/src/container/ErrorDetails/index.tsx

@@ -1,6 +1,10 @@
 import { Button, Divider, notification, Space, Table, Typography } from 'antd';
 import getNextPrevId from 'api/errors/getNextPrevId';
 import Editor from 'components/Editor';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import { getNanoSeconds } from 'container/AllError/utils';
 import dayjs from 'dayjs';
 import history from 'lib/history';
@@ -53,12 +57,14 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 		() => [
 			{
 				title: 'Key',
+				width: 100,
 				dataIndex: 'key',
 				key: 'key',
 			},
 			{
 				title: 'Value',
 				dataIndex: 'value',
+				width: 100,
 				key: 'value',
 			},
 		],
@@ -170,7 +176,13 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 			<EditorContainer>
 				<Space direction="vertical">
-					<Table tableLayout="fixed" columns={columns} dataSource={data} />
+					<ResizeTableWrapper columns={columns}>
+						<Table
+							components={{ header: { cell: ResizableHeader } }}
+							tableLayout="fixed"
+							dataSource={data}
+						/>
+					</ResizeTableWrapper>
 				</Space>
 			</EditorContainer>
 		</>

frontend/src/container/Licenses/ListLicenses.tsx

@@ -1,5 +1,9 @@
 import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { License } from 'types/api/licenses/def';
@@ -13,25 +17,37 @@ function ListLicenses({ licenses }: ListLicensesProps): JSX.Element {
 			title: t('column_license_status'),
 			dataIndex: 'status',
 			key: 'status',
+			width: 100,
 		},
 		{
 			title: t('column_license_key'),
 			dataIndex: 'key',
 			key: 'key',
+			width: 80,
 		},
 		{
 			title: t('column_valid_from'),
 			dataIndex: 'ValidFrom',
 			key: 'valid from',
+			width: 80,
 		},
 		{
 			title: t('column_valid_until'),
 			dataIndex: 'ValidUntil',
 			key: 'valid until',
+			width: 80,
 		},
 	];
 
-	return <Table rowKey="id" dataSource={licenses} columns={columns} />;
+	return (
+		<ResizeTableWrapper columns={columns}>
+			<Table
+				rowKey="id"
+				dataSource={licenses}
+				components={{ header: { cell: ResizableHeader } }}
+			/>
+		</ResizeTableWrapper>
+	);
 }
 
 interface ListLicensesProps {

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -2,6 +2,10 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { notification, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -60,6 +64,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		{
 			title: 'Status',
 			dataIndex: 'state',
+			width: 80,
 			key: 'state',
 			sorter: (a, b): number =>
 				(b.state ? b.state.charCodeAt(0) : 1000) -
@@ -69,6 +74,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		{
 			title: 'Alert Name',
 			dataIndex: 'alert',
+			width: 100,
 			key: 'name',
 			sorter: (a, b): number =>
 				(a.alert ? a.alert.charCodeAt(0) : 1000) -
@@ -84,6 +90,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		{
 			title: 'Severity',
 			dataIndex: 'labels',
+			width: 80,
 			key: 'severity',
 			sorter: (a, b): number =>
 				(a.labels ? a.labels.severity.length : 0) -
@@ -101,7 +108,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			dataIndex: 'labels',
 			key: 'tags',
 			align: 'center',
-			width: 350,
+			width: 100,
 			render: (value): JSX.Element => {
 				const objectKeys = Object.keys(value);
 				const withOutSeverityKeys = objectKeys.filter((e) => e !== 'severity');
@@ -128,6 +135,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			title: 'Action',
 			dataIndex: 'id',
 			key: 'action',
+			width: 120,
 			render: (id: GettableAlert['id'], record): JSX.Element => (
 				<>
 					<ToggleAlertState disabled={record.disabled} setData={setData} id={id} />
@@ -164,8 +172,13 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					</Button>
 				)}
 			</ButtonContainer>
-
-			<Table rowKey="id" columns={columns} dataSource={data} />
+			<ResizeTableWrapper columns={columns}>
+				<Table
+					rowKey="id"
+					components={{ header: { cell: ResizableHeader } }}
+					dataSource={data}
+				/>
+			</ResizeTableWrapper>
 		</>
 	);
 }

frontend/src/container/ListOfDashboard/index.tsx

@@ -10,6 +10,10 @@ import {
 } from 'antd';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import SearchFilter from 'container/ListOfDashboard/SearchFilter';
@@ -74,20 +78,24 @@ function ListOfAllDashboard(): JSX.Element {
 		{
 			title: 'Name',
 			dataIndex: 'name',
+			width: 100,
 			render: Name,
 		},
 		{
 			title: 'Description',
+			width: 100,
 			dataIndex: 'description',
 		},
 		{
 			title: 'Tags (can be multiple)',
 			dataIndex: 'tags',
+			width: 80,
 			render: Tags,
 		},
 		{
 			title: 'Created At',
 			dataIndex: 'createdBy',
+			width: 80,
 			sorter: (a: Data, b: Data): number => {
 				const prev = new Date(a.createdBy).getTime();
 				const next = new Date(b.createdBy).getTime();
@@ -98,6 +106,7 @@ function ListOfAllDashboard(): JSX.Element {
 		},
 		{
 			title: 'Last Updated Time',
+			width: 90,
 			dataIndex: 'lastUpdatedTime',
 			sorter: (a: Data, b: Data): number => {
 				const prev = new Date(a.lastUpdatedTime).getTime();
@@ -114,6 +123,7 @@ function ListOfAllDashboard(): JSX.Element {
 			title: 'Action',
 			dataIndex: '',
 			key: 'x',
+			width: 40,
 			render: DeleteButton,
 		});
 	}
@@ -271,19 +281,21 @@ function ListOfAllDashboard(): JSX.Element {
 					uploadedGrafana={uploadedGrafana}
 					onModalHandler={(): void => onModalHandler(false)}
 				/>
-				<Table
-					pagination={{
-						pageSize: 9,
-						defaultPageSize: 9,
-					}}
-					showHeader
-					bordered
-					sticky
-					loading={loading}
-					columns={columns}
-					dataSource={data}
-					showSorterTooltip
-				/>
+				<ResizeTableWrapper columns={columns}>
+					<Table
+						pagination={{
+							pageSize: 9,
+							defaultPageSize: 9,
+						}}
+						showHeader
+						bordered
+						sticky
+						loading={loading}
+						components={{ header: { cell: ResizableHeader } }}
+						dataSource={data}
+						showSorterTooltip
+					/>
+				</ResizeTableWrapper>
 			</TableContainer>
 		</Card>
 	);

frontend/src/container/LogDetailedView/TableView.tsx

@@ -2,6 +2,10 @@ import { blue, orange } from '@ant-design/colors';
 import { Input, Table } from 'antd';
 import AddToQueryHOC from 'components/Logs/AddToQueryHOC';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import flatten from 'flat';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import React, { useMemo, useState } from 'react';
@@ -56,7 +60,7 @@ function TableView({ logData }: TableViewProps): JSX.Element | null {
 			title: 'Field',
 			dataIndex: 'field',
 			key: 'field',
-			width: '35%',
+			width: 100,
 			render: (field: string): JSX.Element => {
 				const fieldKey = field.split('.').slice(-1);
 				const renderedField = <span style={{ color: blue[4] }}>{field}</span>;
@@ -75,15 +79,16 @@ function TableView({ logData }: TableViewProps): JSX.Element | null {
 			title: 'Value',
 			dataIndex: 'value',
 			key: 'value',
+			width: 80,
 			ellipsis: false,
 			render: (field: never): JSX.Element => (
 				<CopyClipboardHOC textToCopy={field}>
 					<span style={{ color: orange[6] }}>{field}</span>
 				</CopyClipboardHOC>
 			),
-			width: '60%',
 		},
 	];
+
 	return (
 		<div style={{ position: 'relative' }}>
 			<Input
@@ -92,13 +97,15 @@ function TableView({ logData }: TableViewProps): JSX.Element | null {
 				value={fieldSearchInput}
 				onChange={(e): void => setFieldSearchInput(e.target.value)}
 			/>
-			<Table
-				// scroll={{ x: true }}
-				tableLayout="fixed"
-				dataSource={dataSource}
-				columns={columns as never}
-				pagination={false}
-			/>
+			<ResizeTableWrapper columns={columns as never}>
+				<Table
+					// scroll={{ x: true }}
+					tableLayout="fixed"
+					dataSource={dataSource}
+					components={{ header: { cell: ResizableHeader } }}
+					pagination={false}
+				/>
+			</ResizeTableWrapper>
 		</div>
 	);
 }

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -1,5 +1,9 @@
 import { Table, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
@@ -51,7 +55,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 			title: 'Name',
 			dataIndex: 'name',
 			key: 'name',
-			ellipsis: true,
+			width: 100,
 			render: (text: string): JSX.Element => (
 				<Tooltip placement="topLeft" title={text}>
 					<Typography.Link onClick={(): void => handleOnClick(text)}>
@@ -64,6 +68,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 			title: 'P50  (in ms)',
 			dataIndex: 'p50',
 			key: 'p50',
+			width: 50,
 			sorter: (a: DataProps, b: DataProps): number => a.p50 - b.p50,
 			render: (value: number): string => (value / 1000000).toFixed(2),
 		},
@@ -71,6 +76,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 			title: 'P95  (in ms)',
 			dataIndex: 'p95',
 			key: 'p95',
+			width: 50,
 			sorter: (a: DataProps, b: DataProps): number => a.p95 - b.p95,
 			render: (value: number): string => (value / 1000000).toFixed(2),
 		},
@@ -78,6 +84,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 			title: 'P99  (in ms)',
 			dataIndex: 'p99',
 			key: 'p99',
+			width: 50,
 			sorter: (a: DataProps, b: DataProps): number => a.p99 - b.p99,
 			render: (value: number): string => (value / 1000000).toFixed(2),
 		},
@@ -85,20 +92,23 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 			title: 'Number of Calls',
 			dataIndex: 'numCalls',
 			key: 'numCalls',
+			width: 50,
 			sorter: (a: TopOperationListItem, b: TopOperationListItem): number =>
 				a.numCalls - b.numCalls,
 		},
 	];
 
 	return (
-		<Table
-			showHeader
-			title={(): string => 'Key Operations'}
-			tableLayout="fixed"
-			dataSource={data}
-			columns={columns}
-			rowKey="name"
-		/>
+		<ResizeTableWrapper columns={columns}>
+			<Table
+				showHeader
+				title={(): string => 'Key Operations'}
+				tableLayout="fixed"
+				dataSource={data}
+				components={{ header: { cell: ResizableHeader } }}
+				rowKey="name"
+			/>
+		</ResizeTableWrapper>
 	);
 }
 

frontend/src/container/MetricsTable/index.tsx

@@ -8,6 +8,10 @@ import type {
 } from 'antd/es/table/interface';
 import localStorageGet from 'api/browser/localstorage/get';
 import localStorageSet from 'api/browser/localstorage/set';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import { SKIP_ONBOARDING } from 'constants/onboarding';
 import ROUTES from 'constants/routes';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -101,6 +105,7 @@ function Metrics(): JSX.Element {
 			{
 				title: 'Application',
 				dataIndex: 'serviceName',
+				width: 200,
 				key: 'serviceName',
 				...getColumnSearchProps('serviceName'),
 			},
@@ -108,6 +113,7 @@ function Metrics(): JSX.Element {
 				title: 'P99 latency (in ms)',
 				dataIndex: 'p99',
 				key: 'p99',
+				width: 150,
 				defaultSortOrder: 'descend',
 				sorter: (a: DataProps, b: DataProps): number => a.p99 - b.p99,
 				render: (value: number): string => (value / 1000000).toFixed(2),
@@ -116,6 +122,7 @@ function Metrics(): JSX.Element {
 				title: 'Error Rate (% of total)',
 				dataIndex: 'errorRate',
 				key: 'errorRate',
+				width: 150,
 				sorter: (a: DataProps, b: DataProps): number => a.errorRate - b.errorRate,
 				render: (value: number): string => value.toFixed(2),
 			},
@@ -123,6 +130,7 @@ function Metrics(): JSX.Element {
 				title: 'Operations Per Second',
 				dataIndex: 'callRate',
 				key: 'callRate',
+				width: 150,
 				sorter: (a: DataProps, b: DataProps): number => a.callRate - b.callRate,
 				render: (value: number): string => value.toFixed(2),
 			},
@@ -141,12 +149,14 @@ function Metrics(): JSX.Element {
 
 	return (
 		<Container>
-			<Table
-				loading={loading}
-				dataSource={services}
-				columns={columns}
-				rowKey="serviceName"
-			/>
+			<ResizeTableWrapper columns={columns}>
+				<Table
+					loading={loading}
+					dataSource={services}
+					components={{ header: { cell: ResizableHeader } }}
+					rowKey="serviceName"
+				/>
+			</ResizeTableWrapper>
 		</Container>
 	);
 }

frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx

@@ -2,6 +2,10 @@ import { blue, red } from '@ant-design/colors';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Modal, notification, Row, Space, Table, Tag } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import React, { useRef, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -104,15 +108,18 @@ function VariablesSetting({
 		{
 			title: 'Variable',
 			dataIndex: 'name',
+			width: 100,
 			key: 'name',
 		},
 		{
 			title: 'Definition',
 			dataIndex: 'description',
+			width: 100,
 			key: 'description',
 		},
 		{
 			title: 'Actions',
+			width: 50,
 			key: 'action',
 			render: (_: IDashboardVariable): JSX.Element => (
 				<Space>
@@ -161,7 +168,12 @@ function VariablesSetting({
 							<PlusOutlined /> New Variables
 						</Button>
 					</Row>
-					<Table columns={columns} dataSource={variablesTableData} />
+					<ResizeTableWrapper columns={columns}>
+						<Table
+							components={{ header: { cell: ResizableHeader } }}
+							dataSource={variablesTableData}
+						/>
+					</ResizeTableWrapper>
 				</>
 			)}
 			<Modal

frontend/src/container/OrganizationSettings/AuthDomains/index.tsx

@@ -4,6 +4,10 @@ import { ColumnsType } from 'antd/lib/table';
 import deleteDomain from 'api/SAML/deleteDomain';
 import listAllDomain from 'api/SAML/listAllDomain';
 import updateDomain from 'api/SAML/updateDomain';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import TextToolTip from 'components/TextToolTip';
 import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
 import { FeatureKeys } from 'constants/featureKeys';
@@ -168,6 +172,7 @@ function AuthDomains(): JSX.Element {
 			title: 'Domain',
 			dataIndex: 'name',
 			key: 'name',
+			width: 100,
 		},
 		{
 			title: (
@@ -183,6 +188,7 @@ function AuthDomains(): JSX.Element {
 			),
 			dataIndex: 'ssoEnabled',
 			key: 'ssoEnabled',
+			width: 80,
 			render: (value: boolean, record: AuthDomain): JSX.Element => {
 				if (!SSOFlag) {
 					return (
@@ -209,6 +215,7 @@ function AuthDomains(): JSX.Element {
 			title: '',
 			dataIndex: 'description',
 			key: 'description',
+			width: 100,
 			render: (_, record: AuthDomain): JSX.Element => {
 				if (!SSOFlag) {
 					return (
@@ -233,6 +240,7 @@ function AuthDomains(): JSX.Element {
 			title: 'Action',
 			dataIndex: 'action',
 			key: 'action',
+			width: 50,
 			render: (_, record): JSX.Element => (
 				<Button
 					disabled={!SSOFlag}
@@ -267,12 +275,14 @@ function AuthDomains(): JSX.Element {
 						setIsSettingsOpen={setIsSettingsOpen}
 					/>
 				</Modal>
-				<Table
-					rowKey={(record: AuthDomain): string => record.name + v4()}
-					dataSource={!SSOFlag ? notEntripriseData : []}
-					columns={columns}
-					tableLayout="fixed"
-				/>
+				<ResizeTableWrapper columns={columns}>
+					<Table
+						rowKey={(record: AuthDomain): string => record.name + v4()}
+						dataSource={!SSOFlag ? notEntripriseData : []}
+						components={{ header: { cell: ResizableHeader } }}
+						tableLayout="fixed"
+					/>
+				</ResizeTableWrapper>
 			</Space>
 		);
 	}
@@ -317,13 +327,15 @@ function AuthDomains(): JSX.Element {
 			<Space direction="vertical" size="middle">
 				<AddDomain refetch={refetch} />
 
-				<Table
-					dataSource={tableData}
-					loading={isLoading}
-					columns={columns}
-					tableLayout="fixed"
-					rowKey={(record: AuthDomain): string => record.name + v4()}
-				/>
+				<ResizeTableWrapper columns={columns}>
+					<Table
+						dataSource={tableData}
+						loading={isLoading}
+						components={{ header: { cell: ResizableHeader } }}
+						tableLayout="fixed"
+						rowKey={(record: AuthDomain): string => record.name + v4()}
+					/>
+				</ResizeTableWrapper>
 			</Space>
 		</>
 	);

frontend/src/container/OrganizationSettings/Members/index.tsx

@@ -4,6 +4,10 @@ import deleteUser from 'api/user/deleteUser';
 import editUserApi from 'api/user/editUser';
 import getOrgUser from 'api/user/getOrgUser';
 import updateRole from 'api/user/updateRole';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -258,21 +262,25 @@ function Members(): JSX.Element {
 			title: 'Name',
 			dataIndex: 'name',
 			key: 'name',
+			width: 100,
 		},
 		{
 			title: 'Emails',
 			dataIndex: 'email',
 			key: 'email',
+			width: 100,
 		},
 		{
 			title: 'Access Level',
 			dataIndex: 'accessLevel',
 			key: 'accessLevel',
+			width: 50,
 		},
 		{
 			title: 'Joined On',
 			dataIndex: 'joinedOn',
 			key: 'joinedOn',
+			width: 60,
 			render: (_, record): JSX.Element => {
 				const { joinedOn } = record;
 				return (
@@ -285,6 +293,7 @@ function Members(): JSX.Element {
 		{
 			title: 'Action',
 			dataIndex: 'action',
+			width: 80,
 			render: (_, record): JSX.Element => (
 				<UserFunction
 					{...{
@@ -303,13 +312,15 @@ function Members(): JSX.Element {
 	return (
 		<Space direction="vertical" size="middle">
 			<Typography.Title level={3}>Members</Typography.Title>
-			<Table
-				tableLayout="fixed"
-				dataSource={dataSource}
-				columns={columns}
-				pagination={false}
-				loading={status === 'loading'}
-			/>
+			<ResizeTableWrapper columns={columns}>
+				<Table
+					tableLayout="fixed"
+					dataSource={dataSource}
+					components={{ header: { cell: ResizableHeader } }}
+					pagination={false}
+					loading={status === 'loading'}
+				/>
+			</ResizeTableWrapper>
 		</Space>
 	);
 }

frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx

@@ -4,6 +4,10 @@ import { ColumnsType } from 'antd/lib/table';
 import deleteInvite from 'api/user/deleteInvite';
 import getPendingInvites from 'api/user/getPendingInvites';
 import sendInvite from 'api/user/sendInvite';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import { INVITE_MEMBERS_HASH } from 'constants/app';
 import ROUTES from 'constants/routes';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -141,26 +145,31 @@ function PendingInvitesContainer(): JSX.Element {
 			title: 'Name',
 			dataIndex: 'name',
 			key: 'name',
+			width: 100,
 		},
 		{
 			title: 'Emails',
 			dataIndex: 'email',
 			key: 'email',
+			width: 80,
 		},
 		{
 			title: 'Access Level',
 			dataIndex: 'accessLevel',
 			key: 'accessLevel',
+			width: 50,
 		},
 		{
 			title: 'Invite Link',
 			dataIndex: 'inviteLink',
 			key: 'Invite Link',
 			ellipsis: true,
+			width: 100,
 		},
 		{
 			title: 'Action',
 			dataIndex: 'action',
+			width: 80,
 			key: 'Action',
 			render: (_, record): JSX.Element => (
 				<Space direction="horizontal">
@@ -263,13 +272,15 @@ function PendingInvitesContainer(): JSX.Element {
 						{t('invite_members')}
 					</Button>
 				</TitleWrapper>
-				<Table
-					tableLayout="fixed"
-					dataSource={dataSource}
-					columns={columns}
-					pagination={false}
-					loading={getPendingInvitesResponse.status === 'loading'}
-				/>
+				<ResizeTableWrapper columns={columns}>
+					<Table
+						tableLayout="fixed"
+						dataSource={dataSource}
+						components={{ header: { cell: ResizableHeader } }}
+						pagination={false}
+						loading={getPendingInvitesResponse.status === 'loading'}
+					/>
+				</ResizeTableWrapper>
 			</Space>
 		</div>
 	);

frontend/src/container/Trace/TraceTable/index.tsx

@@ -1,5 +1,9 @@
 import { Table, TableProps, Tag, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import ROUTES from 'constants/routes';
 import {
 	getSpanOrder,
@@ -73,6 +77,7 @@ function TraceTable(): JSX.Element {
 			title: 'Date',
 			dataIndex: 'timestamp',
 			key: 'timestamp',
+			width: 120,
 			sorter: true,
 			render: (value: TableType['timestamp']): JSX.Element => {
 				const day = dayjs(value);
@@ -83,18 +88,21 @@ function TraceTable(): JSX.Element {
 			title: 'Service',
 			dataIndex: 'serviceName',
 			key: 'serviceName',
+			width: 50,
 			render: getValue,
 		},
 		{
 			title: 'Operation',
 			dataIndex: 'operation',
 			key: 'operation',
+			width: 110,
 			render: getValue,
 		},
 		{
 			title: 'Duration',
 			dataIndex: 'durationNano',
 			key: 'durationNano',
+			width: 50,
 			sorter: true,
 			render: (value: TableType['durationNano']): JSX.Element => (
 				<Typography>
@@ -109,12 +117,14 @@ function TraceTable(): JSX.Element {
 			title: 'Method',
 			dataIndex: 'method',
 			key: 'method',
+			width: 50,
 			render: getHttpMethodOrStatus,
 		},
 		{
 			title: 'Status Code',
 			dataIndex: 'statusCode',
 			key: 'statusCode',
+			width: 50,
 			render: getHttpMethodOrStatus,
 		},
 	];
@@ -180,34 +190,36 @@ function TraceTable(): JSX.Element {
 	) as number;
 
 	return (
-		<Table
-			onChange={onChangeHandler}
-			dataSource={spansAggregate.data}
-			loading={loading || filterLoading}
-			columns={columns}
-			rowKey={(record): string => `${record.traceID}-${record.spanID}-${v4()}`}
-			style={{
-				cursor: 'pointer',
-			}}
-			onRow={(record): React.HTMLAttributes<TableType> => ({
-				onClick: (event): void => {
-					event.preventDefault();
-					event.stopPropagation();
-					if (event.metaKey || event.ctrlKey) {
-						window.open(getLink(record), '_blank');
-					} else {
-						history.push(getLink(record));
-					}
-				},
-			})}
-			pagination={{
-				current: spansAggregate.currentPage,
-				pageSize: spansAggregate.pageSize,
-				responsive: true,
-				position: ['bottomLeft'],
-				total: totalCount,
-			}}
-		/>
+		<ResizeTableWrapper columns={columns}>
+			<Table
+				onChange={onChangeHandler}
+				dataSource={spansAggregate.data}
+				loading={loading || filterLoading}
+				components={{ header: { cell: ResizableHeader } }}
+				rowKey={(record): string => `${record.traceID}-${record.spanID}-${v4()}`}
+				style={{
+					cursor: 'pointer',
+				}}
+				onRow={(record): React.HTMLAttributes<TableType> => ({
+					onClick: (event): void => {
+						event.preventDefault();
+						event.stopPropagation();
+						if (event.metaKey || event.ctrlKey) {
+							window.open(getLink(record), '_blank');
+						} else {
+							history.push(getLink(record));
+						}
+					},
+				})}
+				pagination={{
+					current: spansAggregate.currentPage,
+					pageSize: spansAggregate.pageSize,
+					responsive: true,
+					position: ['bottomLeft'],
+					total: totalCount,
+				}}
+			/>
+		</ResizeTableWrapper>
 	);
 }
 

frontend/src/container/TriggeredAlerts/NoFilterTable.tsx

@@ -1,6 +1,10 @@
 /* eslint-disable react/display-name */
 import { Table, Tag, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import {
+	ResizableHeader,
+	ResizeTableWrapper,
+} from 'components/ResizeTableWrapper';
 import AlertStatus from 'container/TriggeredAlerts/TableComponents/AlertStatus';
 import convertDateToAmAndPm from 'lib/convertDateToAmAndPm';
 import getFormattedDate from 'lib/getFormatedDate';
@@ -21,6 +25,7 @@ function NoFilterTable({
 		{
 			title: 'Status',
 			dataIndex: 'status',
+			width: 80,
 			key: 'status',
 			sorter: (a, b): number =>
 				b.labels.severity.length - a.labels.severity.length,
@@ -30,6 +35,7 @@ function NoFilterTable({
 			title: 'Alert Name',
 			dataIndex: 'labels',
 			key: 'alertName',
+			width: 100,
 			sorter: (a, b): number =>
 				(a.labels?.alertname?.charCodeAt(0) || 0) -
 				(b.labels?.alertname?.charCodeAt(0) || 0),
@@ -42,6 +48,7 @@ function NoFilterTable({
 			title: 'Tags',
 			dataIndex: 'labels',
 			key: 'tags',
+			width: 100,
 			render: (labels): JSX.Element => {
 				const objectKeys = Object.keys(labels);
 				const withOutSeverityKeys = objectKeys.filter((e) => e !== 'severity');
@@ -63,6 +70,7 @@ function NoFilterTable({
 			title: 'Severity',
 			dataIndex: 'labels',
 			key: 'severity',
+			width: 100,
 			sorter: (a, b): number => {
 				const severityValueA = a.labels.severity;
 				const severityValueB = b.labels.severity;
@@ -79,6 +87,7 @@ function NoFilterTable({
 		{
 			title: 'Firing Since',
 			dataIndex: 'startsAt',
+			width: 100,
 			sorter: (a, b): number =>
 				new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime(),
 			render: (date): JSX.Element => {
@@ -94,7 +103,13 @@ function NoFilterTable({
 	];
 
 	return (
-		<Table rowKey="startsAt" dataSource={filteredAlerts} columns={columns} />
+		<ResizeTableWrapper columns={columns}>
+			<Table
+				rowKey="startsAt"
+				dataSource={filteredAlerts}
+				components={{ header: { cell: ResizableHeader } }}
+			/>
+		</ResizeTableWrapper>
 	);
 }