fix: make header sticky for table panel (#5892)

* fix: make header sticky for table panel

* fix: added sticky prop conditionally and updated test cases

* fix: added a smaller scrollbar

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

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,

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}
 			/>

frontend/src/container/GridTableComponent/types.ts

@@ -13,6 +13,7 @@ export type GridTableComponentProps = {
 	thresholds?: ThresholdProps[];
 	columnUnits?: ColumnUnit;
 	tableProcessedDataRef?: React.MutableRefObject<RowData[]>;
+	sticky?: TableProps<RowData>['sticky'];
 } & Pick<LogsExplorerTableProps, 'data'> &
 	Omit<TableProps<RowData>, 'columns' | 'dataSource'>;
 

frontend/src/container/LogsExplorerTable/index.tsx

@@ -30,6 +30,7 @@ function LogsExplorerTable({
 			queryTableData={data}
 			loading={isLoading}
 			rootClassName="logs-table"
+			sticky
 		/>
 	);
 }

frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx

@@ -114,6 +114,7 @@ function TopOperationMetrics(): JSX.Element {
 			loading={isLoading}
 			renderColumnCell={renderColumnCell}
 			downloadOption={topOperationMetricsDownloadOptions}
+			sticky
 		/>
 	);
 }

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}
 		/>

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"
               >
                 <div
-                  class="ant-table-content"
+                  class="ant-table-header ant-table-sticky-holder"
-                  style="overflow-x: auto; overflow-y: hidden;"
+                  style="overflow: hidden; top: 0px;"
                 >
                   <table
-                    style="width: auto; min-width: 100%; table-layout: fixed;"
+                    style="table-layout: fixed; visibility: hidden;"
                   >
-                    <colgroup>
+                    <colgroup />
-                      <col
-                        style="width: 145px;"
-                      />
-                      <col
-                        style="width: 145px;"
-                      />
-                    </colgroup>
                     <thead
                       class="ant-table-thead"
                     >
@@ -222,6 +215,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         </th>
                       </tr>
                     </thead>
+                  </table>
+                </div>
+                <div
+                  class="ant-table-body"
+                  style="overflow-x: auto; overflow-y: hidden;"
+                >
+                  <table
+                    style="width: auto; min-width: 100%; table-layout: fixed;"
+                  >
+                    <colgroup>
+                      <col
+                        style="width: 145px;"
+                      />
+                      <col
+                        style="width: 145px;"
+                      />
+                    </colgroup>
                     <tbody
                       class="ant-table-tbody"
                     >

frontend/src/container/QueryTable/QueryTable.intefaces.ts

@@ -18,4 +18,5 @@ export type QueryTableProps = Omit<
 	downloadOption?: DownloadOptions;
 	columns?: ColumnsType<RowData>;
 	dataSource?: RowData[];
+	sticky?: TableProps<RowData>['sticky'];
 };

frontend/src/container/QueryTable/QueryTable.styles.scss

@@ -7,4 +7,10 @@
 		right: 0px;
 		z-index: 1;
 	}
+
+	.ant-table {
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+	}
 }

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}
 			/>

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
 			/>
 		</Space.Compact>
 	);