diff --git a/frontend/src/container/GridPanelSwitch/index.tsx b/frontend/src/container/GridPanelSwitch/index.tsx index 641f06e885..24fbde3c85 100644 --- a/frontend/src/container/GridPanelSwitch/index.tsx +++ b/frontend/src/container/GridPanelSwitch/index.tsx @@ -40,6 +40,7 @@ const GridPanelSwitch = forwardRef< data: panelData, query, thresholds, + sticky: true, }, [PANEL_TYPES.LIST]: null, [PANEL_TYPES.PIE]: null, diff --git a/frontend/src/container/GridTableComponent/index.tsx b/frontend/src/container/GridTableComponent/index.tsx index fab4d85e8b..676a745b65 100644 --- a/frontend/src/container/GridTableComponent/index.tsx +++ b/frontend/src/container/GridTableComponent/index.tsx @@ -23,6 +23,7 @@ function GridTableComponent({ thresholds, columnUnits, tableProcessedDataRef, + sticky, ...props }: GridTableComponentProps): JSX.Element { const { t } = useTranslation(['valueGraph']); @@ -146,6 +147,7 @@ function GridTableComponent({ loading={false} columns={newColumnData} dataSource={dataSource} + sticky={sticky} // eslint-disable-next-line react/jsx-props-no-spreading {...props} /> diff --git a/frontend/src/container/GridTableComponent/types.ts b/frontend/src/container/GridTableComponent/types.ts index 25ca647933..6088f9dcb8 100644 --- a/frontend/src/container/GridTableComponent/types.ts +++ b/frontend/src/container/GridTableComponent/types.ts @@ -13,6 +13,7 @@ export type GridTableComponentProps = { thresholds?: ThresholdProps[]; columnUnits?: ColumnUnit; tableProcessedDataRef?: React.MutableRefObject; + sticky?: TableProps['sticky']; } & Pick & Omit, 'columns' | 'dataSource'>; diff --git a/frontend/src/container/LogsExplorerTable/index.tsx b/frontend/src/container/LogsExplorerTable/index.tsx index 13883d3a62..e65bd61464 100644 --- a/frontend/src/container/LogsExplorerTable/index.tsx +++ b/frontend/src/container/LogsExplorerTable/index.tsx @@ -30,6 +30,7 @@ function LogsExplorerTable({ queryTableData={data} loading={isLoading} rootClassName="logs-table" + sticky /> ); } diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx index 22224862a4..ed77512d89 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx @@ -114,6 +114,7 @@ function TopOperationMetrics(): JSX.Element { loading={isLoading} renderColumnCell={renderColumnCell} downloadOption={topOperationMetricsDownloadOptions} + sticky /> ); } diff --git a/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx b/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx index db2098554a..0eab4143a2 100644 --- a/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx +++ b/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx @@ -1,3 +1,4 @@ +import { PANEL_TYPES } from 'constants/queryBuilder'; import GridTableComponent from 'container/GridTableComponent'; import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config'; @@ -18,6 +19,7 @@ function TablePanelWrapper({ thresholds={thresholds} columnUnits={widget.columnUnits} tableProcessedDataRef={tableProcessedDataRef} + sticky={widget.panelTypes === PANEL_TYPES.TABLE} // eslint-disable-next-line react/jsx-props-no-spreading {...GRID_TABLE_CONFIG} /> diff --git a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap index d37ccf5841..1a930f740c 100644 --- a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap +++ b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap @@ -70,20 +70,13 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-container" >
- - - - + @@ -222,6 +215,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp +
+
+
+ + + + + diff --git a/frontend/src/container/QueryTable/QueryTable.intefaces.ts b/frontend/src/container/QueryTable/QueryTable.intefaces.ts index f73c407d85..7576d796ec 100644 --- a/frontend/src/container/QueryTable/QueryTable.intefaces.ts +++ b/frontend/src/container/QueryTable/QueryTable.intefaces.ts @@ -18,4 +18,5 @@ export type QueryTableProps = Omit< downloadOption?: DownloadOptions; columns?: ColumnsType; dataSource?: RowData[]; + sticky?: TableProps['sticky']; }; diff --git a/frontend/src/container/QueryTable/QueryTable.styles.scss b/frontend/src/container/QueryTable/QueryTable.styles.scss index e78a4df239..e116356f9d 100644 --- a/frontend/src/container/QueryTable/QueryTable.styles.scss +++ b/frontend/src/container/QueryTable/QueryTable.styles.scss @@ -1,10 +1,16 @@ .query-table { - position: relative; - height: inherit; - .query-table--download { - position: absolute; - top: 15px; - right: 0px; - z-index: 1; - } -} \ No newline at end of file + position: relative; + height: inherit; + .query-table--download { + position: absolute; + top: 15px; + right: 0px; + z-index: 1; + } + + .ant-table { + &::-webkit-scrollbar { + width: 0.1rem; + } + } +} diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx index ccf8221bfe..1786e5d4e3 100644 --- a/frontend/src/container/QueryTable/QueryTable.tsx +++ b/frontend/src/container/QueryTable/QueryTable.tsx @@ -19,6 +19,7 @@ export function QueryTable({ downloadOption, columns, dataSource, + sticky, ...props }: QueryTableProps): JSX.Element { const { isDownloadEnabled = false, fileName = '' } = downloadOption || {}; @@ -71,6 +72,7 @@ export function QueryTable({ dataSource={newDataSource} scroll={{ x: true }} pagination={paginationConfig} + sticky={sticky} // eslint-disable-next-line react/jsx-props-no-spreading {...props} /> diff --git a/frontend/src/container/TracesExplorer/TableView/index.tsx b/frontend/src/container/TracesExplorer/TableView/index.tsx index 775db816c4..849ea9bd8f 100644 --- a/frontend/src/container/TracesExplorer/TableView/index.tsx +++ b/frontend/src/container/TracesExplorer/TableView/index.tsx @@ -47,6 +47,7 @@ function TableView(): JSX.Element { query={stagedQuery || initialQueriesMap.traces} queryTableData={data?.payload?.data?.newResult?.data?.result || []} loading={isLoading} + sticky /> );