feat: modified resize table component (#2175)

* fix: Removed Strict mode to stop render twice

* feat: modified resize table component

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -1,12 +1,14 @@
+import { Table } from 'antd';
+import type { TableProps } from 'antd/es/table';
 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);
+import ResizableHeader from './ResizableHeader';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function ResizeTable({ columns, ...restprops }: TableProps<any>): JSX.Element {
+	const [columnsData, setColumns] = useState<ColumnsType>(columns || []);
 
 	const handleResize = useCallback(
 		(index: number) => (
@@ -35,13 +37,15 @@ function ResizeTableWrapper({
 		[columnsData, handleResize],
 	);
 
-	return <> {React.cloneElement(children, { columns: mergeColumns })}</>;
+	return (
+		<Table
+			// eslint-disable-next-line react/jsx-props-no-spreading
+			{...restprops}
+			components={{ header: { cell: ResizableHeader } }}
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			columns={mergeColumns as ColumnsType<any>}
+		/>
+	);
 }
 
-interface ResizeTableWrapperProps {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	columns: ColumnsType<any>;
-	children: JSX.Element;
-}
-
-export default ResizeTableWrapper;
+export default ResizeTable;

frontend/src/components/ResizeTable/index.ts

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

frontend/src/components/ResizeTableWrapper/index.ts

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

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,10 +1,7 @@
 /* eslint-disable react/display-name */
-import { Button, notification, Table } from 'antd';
+import { Button, notification } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
@@ -69,13 +66,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	return (
 		<>
 			{Element}
-			<ResizeTableWrapper columns={columns}>
-				<Table
-					components={{ header: { cell: ResizableHeader } }}
-					dataSource={channels}
-					rowKey="id"
-				/>
-			</ResizeTableWrapper>
+			<ResizeTable columns={columns} dataSource={channels} rowKey="id" />
 		</>
 	);
 }

frontend/src/container/AllError/index.tsx

@@ -5,7 +5,6 @@ import {
 	Input,
 	notification,
 	Space,
-	Table,
 	TableProps,
 	Tooltip,
 	Typography,
@@ -16,10 +15,7 @@ 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 { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -392,23 +388,21 @@ function AllErrors(): JSX.Element {
 	return (
 		<>
 			{NotificationElement}
-			<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>
+			<ResizeTable
+				columns={columns}
+				tableLayout="fixed"
+				dataSource={data?.payload as Exception[]}
+				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}
+			/>
 		</>
 	);
 }

frontend/src/container/ErrorDetails/index.tsx

@@ -1,10 +1,7 @@
-import { Button, Divider, notification, Space, Table, Typography } from 'antd';
+import { Button, Divider, notification, Space, Typography } from 'antd';
 import getNextPrevId from 'api/errors/getNextPrevId';
 import Editor from 'components/Editor';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import { getNanoSeconds } from 'container/AllError/utils';
 import dayjs from 'dayjs';
 import history from 'lib/history';
@@ -176,13 +173,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 			<EditorContainer>
 				<Space direction="vertical">
-					<ResizeTableWrapper columns={columns}>
-						<Table
-							components={{ header: { cell: ResizableHeader } }}
-							tableLayout="fixed"
-							dataSource={data}
-						/>
-					</ResizeTableWrapper>
+					<ResizeTable columns={columns} tableLayout="fixed" dataSource={data} />
 				</Space>
 			</EditorContainer>
 		</>

frontend/src/container/Licenses/ListLicenses.tsx

@@ -1,9 +1,5 @@
-import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { License } from 'types/api/licenses/def';
@@ -39,15 +35,7 @@ function ListLicenses({ licenses }: ListLicensesProps): JSX.Element {
 		},
 	];
 
-	return (
-		<ResizeTableWrapper columns={columns}>
-			<Table
-				rowKey="id"
-				dataSource={licenses}
-				components={{ header: { cell: ResizableHeader } }}
-			/>
-		</ResizeTableWrapper>
-	);
+	return <ResizeTable columns={columns} rowKey="id" dataSource={licenses} />;
 }
 
 interface ListLicensesProps {

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,11 +1,8 @@
 /* eslint-disable react/display-name */
 import { PlusOutlined } from '@ant-design/icons';
-import { notification, Table, Typography } from 'antd';
+import { notification, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -172,13 +169,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					</Button>
 				)}
 			</ButtonContainer>
-			<ResizeTableWrapper columns={columns}>
-				<Table
-					rowKey="id"
-					components={{ header: { cell: ResizableHeader } }}
-					dataSource={data}
-				/>
-			</ResizeTableWrapper>
+			<ResizeTable columns={columns} rowKey="id" dataSource={data} />
 		</>
 	);
 }

frontend/src/container/ListOfDashboard/index.tsx

@@ -1,19 +1,8 @@
 import { PlusOutlined } from '@ant-design/icons';
-import {
-	Card,
-	Dropdown,
-	Menu,
-	Row,
-	Table,
-	TableColumnProps,
-	Typography,
-} from 'antd';
+import { Card, Dropdown, Menu, Row, TableColumnProps, Typography } from 'antd';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import SearchFilter from 'container/ListOfDashboard/SearchFilter';
@@ -281,21 +270,19 @@ function ListOfAllDashboard(): JSX.Element {
 					uploadedGrafana={uploadedGrafana}
 					onModalHandler={(): void => onModalHandler(false)}
 				/>
-				<ResizeTableWrapper columns={columns}>
-					<Table
-						pagination={{
-							pageSize: 9,
-							defaultPageSize: 9,
-						}}
-						showHeader
-						bordered
-						sticky
-						loading={loading}
-						components={{ header: { cell: ResizableHeader } }}
-						dataSource={data}
-						showSorterTooltip
-					/>
-				</ResizeTableWrapper>
+				<ResizeTable
+					columns={columns}
+					pagination={{
+						pageSize: 9,
+						defaultPageSize: 9,
+					}}
+					showHeader
+					bordered
+					sticky
+					loading={loading}
+					dataSource={data}
+					showSorterTooltip
+				/>
 			</TableContainer>
 		</Card>
 	);

frontend/src/container/LogDetailedView/TableView.tsx

@@ -1,11 +1,8 @@
 import { blue, orange } from '@ant-design/colors';
-import { Input, Table } from 'antd';
+import { Input } from 'antd';
 import AddToQueryHOC from 'components/Logs/AddToQueryHOC';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import flatten from 'flat';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import React, { useMemo, useState } from 'react';
@@ -97,15 +94,12 @@ function TableView({ logData }: TableViewProps): JSX.Element | null {
 				value={fieldSearchInput}
 				onChange={(e): void => setFieldSearchInput(e.target.value)}
 			/>
-			<ResizeTableWrapper columns={columns as never}>
-				<Table
-					// scroll={{ x: true }}
-					tableLayout="fixed"
-					dataSource={dataSource}
-					components={{ header: { cell: ResizableHeader } }}
-					pagination={false}
-				/>
-			</ResizeTableWrapper>
+			<ResizeTable
+				columns={columns as never}
+				tableLayout="fixed"
+				dataSource={dataSource}
+				pagination={false}
+			/>
 		</div>
 	);
 }

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -1,9 +1,6 @@
-import { Table, Tooltip, Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
@@ -99,16 +96,14 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 	];
 
 	return (
-		<ResizeTableWrapper columns={columns}>
-			<Table
-				showHeader
-				title={(): string => 'Key Operations'}
-				tableLayout="fixed"
-				dataSource={data}
-				components={{ header: { cell: ResizableHeader } }}
-				rowKey="name"
-			/>
-		</ResizeTableWrapper>
+		<ResizeTable
+			columns={columns}
+			showHeader
+			title={(): string => 'Key Operations'}
+			tableLayout="fixed"
+			dataSource={data}
+			rowKey="name"
+		/>
 	);
 }
 

frontend/src/container/MetricsTable/index.tsx

@@ -1,6 +1,6 @@
 import { blue } from '@ant-design/colors';
 import { SearchOutlined } from '@ant-design/icons';
-import { Button, Card, Input, Space, Table } from 'antd';
+import { Button, Card, Input, Space } from 'antd';
 import type { ColumnsType, ColumnType } from 'antd/es/table';
 import type {
 	FilterConfirmProps,
@@ -8,10 +8,7 @@ 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 { ResizeTable } from 'components/ResizeTable';
 import { SKIP_ONBOARDING } from 'constants/onboarding';
 import ROUTES from 'constants/routes';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -149,14 +146,12 @@ function Metrics(): JSX.Element {
 
 	return (
 		<Container>
-			<ResizeTableWrapper columns={columns}>
-				<Table
-					loading={loading}
-					dataSource={services}
-					components={{ header: { cell: ResizableHeader } }}
-					rowKey="serviceName"
-				/>
-			</ResizeTableWrapper>
+			<ResizeTable
+				columns={columns}
+				loading={loading}
+				dataSource={services}
+				rowKey="serviceName"
+			/>
 		</Container>
 	);
 }

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

@@ -1,11 +1,8 @@
 import { blue, red } from '@ant-design/colors';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Modal, notification, Row, Space, Table, Tag } from 'antd';
+import { Button, Modal, notification, Row, Space, Tag } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import React, { useRef, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -168,12 +165,7 @@ function VariablesSetting({
 							<PlusOutlined /> New Variables
 						</Button>
 					</Row>
-					<ResizeTableWrapper columns={columns}>
-						<Table
-							components={{ header: { cell: ResizableHeader } }}
-							dataSource={variablesTableData}
-						/>
-					</ResizeTableWrapper>
+					<ResizeTable columns={columns} dataSource={variablesTableData} />
 				</>
 			)}
 			<Modal

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

@@ -1,13 +1,10 @@
 import { LockTwoTone } from '@ant-design/icons';
-import { Button, Modal, notification, Space, Table, Typography } from 'antd';
+import { Button, Modal, notification, Space, Typography } from 'antd';
 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 { ResizeTable } from 'components/ResizeTable';
 import TextToolTip from 'components/TextToolTip';
 import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
 import { FeatureKeys } from 'constants/featureKeys';
@@ -275,14 +272,12 @@ function AuthDomains(): JSX.Element {
 						setIsSettingsOpen={setIsSettingsOpen}
 					/>
 				</Modal>
-				<ResizeTableWrapper columns={columns}>
-					<Table
-						rowKey={(record: AuthDomain): string => record.name + v4()}
-						dataSource={!SSOFlag ? notEntripriseData : []}
-						components={{ header: { cell: ResizableHeader } }}
-						tableLayout="fixed"
-					/>
-				</ResizeTableWrapper>
+				<ResizeTable
+					columns={columns}
+					rowKey={(record: AuthDomain): string => record.name + v4()}
+					dataSource={!SSOFlag ? notEntripriseData : []}
+					tableLayout="fixed"
+				/>
 			</Space>
 		);
 	}
@@ -327,15 +322,13 @@ function AuthDomains(): JSX.Element {
 			<Space direction="vertical" size="middle">
 				<AddDomain refetch={refetch} />
 
-				<ResizeTableWrapper columns={columns}>
-					<Table
-						dataSource={tableData}
-						loading={isLoading}
-						components={{ header: { cell: ResizableHeader } }}
-						tableLayout="fixed"
-						rowKey={(record: AuthDomain): string => record.name + v4()}
-					/>
-				</ResizeTableWrapper>
+				<ResizeTable
+					columns={columns}
+					dataSource={tableData}
+					loading={isLoading}
+					tableLayout="fixed"
+					rowKey={(record: AuthDomain): string => record.name + v4()}
+				/>
 			</Space>
 		</>
 	);

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

@@ -1,13 +1,10 @@
-import { Button, Modal, notification, Space, Table, Typography } from 'antd';
+import { Button, Modal, notification, Space, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 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 { ResizeTable } from 'components/ResizeTable';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -312,15 +309,13 @@ function Members(): JSX.Element {
 	return (
 		<Space direction="vertical" size="middle">
 			<Typography.Title level={3}>Members</Typography.Title>
-			<ResizeTableWrapper columns={columns}>
-				<Table
-					tableLayout="fixed"
-					dataSource={dataSource}
-					components={{ header: { cell: ResizableHeader } }}
-					pagination={false}
-					loading={status === 'loading'}
-				/>
-			</ResizeTableWrapper>
+			<ResizeTable
+				columns={columns}
+				tableLayout="fixed"
+				dataSource={dataSource}
+				pagination={false}
+				loading={status === 'loading'}
+			/>
 		</Space>
 	);
 }

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

@@ -1,13 +1,10 @@
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Modal, notification, Space, Table, Typography } from 'antd';
+import { Button, Modal, notification, Space, Typography } from 'antd';
 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 { ResizeTable } from 'components/ResizeTable';
 import { INVITE_MEMBERS_HASH } from 'constants/app';
 import ROUTES from 'constants/routes';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -272,15 +269,13 @@ function PendingInvitesContainer(): JSX.Element {
 						{t('invite_members')}
 					</Button>
 				</TitleWrapper>
-				<ResizeTableWrapper columns={columns}>
-					<Table
-						tableLayout="fixed"
-						dataSource={dataSource}
-						components={{ header: { cell: ResizableHeader } }}
-						pagination={false}
-						loading={getPendingInvitesResponse.status === 'loading'}
-					/>
-				</ResizeTableWrapper>
+				<ResizeTable
+					columns={columns}
+					tableLayout="fixed"
+					dataSource={dataSource}
+					pagination={false}
+					loading={getPendingInvitesResponse.status === 'loading'}
+				/>
 			</Space>
 		</div>
 	);

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

@@ -1,9 +1,6 @@
-import { Table, TableProps, Tag, Typography } from 'antd';
+import { TableProps, Tag, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import {
 	getSpanOrder,
@@ -190,36 +187,36 @@ function TraceTable(): JSX.Element {
 	) as number;
 
 	return (
-		<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>
+		<ResizeTable
+			columns={columns}
+			onChange={onChangeHandler}
+			dataSource={spansAggregate.data}
+			loading={loading || filterLoading}
+			rowKey={(record: { traceID: string; spanID: string }): string =>
+				`${record.traceID}-${record.spanID}-${v4()}`
+			}
+			style={{
+				cursor: 'pointer',
+			}}
+			onRow={(record: TableType): 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,
+			}}
+		/>
 	);
 }
 

frontend/src/container/TriggeredAlerts/NoFilterTable.tsx

@@ -1,10 +1,7 @@
 /* eslint-disable react/display-name */
-import { Table, Tag, Typography } from 'antd';
+import { Tag, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import {
-	ResizableHeader,
-	ResizeTableWrapper,
-} from 'components/ResizeTableWrapper';
+import { ResizeTable } from 'components/ResizeTable';
 import AlertStatus from 'container/TriggeredAlerts/TableComponents/AlertStatus';
 import convertDateToAmAndPm from 'lib/convertDateToAmAndPm';
 import getFormattedDate from 'lib/getFormatedDate';
@@ -103,13 +100,11 @@ function NoFilterTable({
 	];
 
 	return (
-		<ResizeTableWrapper columns={columns}>
-			<Table
-				rowKey="startsAt"
-				dataSource={filteredAlerts}
-				components={{ header: { cell: ResizableHeader } }}
-			/>
-		</ResizeTableWrapper>
+		<ResizeTable
+			columns={columns}
+			rowKey="startsAt"
+			dataSource={filteredAlerts}
+		/>
 	);
 }