Add Custom Scrollbar from Grafana UI

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-## 2.3.0 (IN PROGRESS)
+## 2.3.0 (2025-02-23)
 
 ### Features / Enhancements
 
@@ -10,6 +10,7 @@
 - Added contrast color for cell text if cell have data links (#253)
 - Updated to Grafana 11.5 and dependencies (#262)
 - Updated release workflow to include attestation (#262)
+- Added Custom Scrollbar from Grafana UI (#251)
 
 ## 2.2.0 (2025-02-10)
 

src/components/TablePanel/TablePanel.test.tsx

@@ -1,4 +1,5 @@
 import { EventBusSrv } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { getJestSelectors } from '@volkovlabs/jest-selectors';
 import React, { useMemo, useState } from 'react';
@@ -109,6 +110,13 @@ describe('TablePanel', () => {
   };
 
   beforeEach(() => {
+    /**
+     * Set default version
+     * by default config returns invalid version 1.0 cause error in test
+     */
+    Object.assign(config, {
+      buildInfo: { version: '11.3.0' },
+    });
     jest.mocked(useTable).mockImplementation(useTableMock);
     jest.mocked(usePagination).mockImplementation(usePaginationMock);
     // jest.mocked(useLocalStorage).mockImplementation(useLocalStorageMock);
@@ -286,6 +294,43 @@ describe('TablePanel', () => {
     expect(selectors.buttonFormat()).toHaveTextContent('csv');
   });
 
+  it('Should show ScrollContainer since grafana 11.5.0', async () => {
+    /**
+     * Set version 11.5.0
+     * by default config returns invalid version 1.0 cause error in test
+     */
+    Object.assign(config, {
+      buildInfo: { version: '11.5.0' },
+    });
+    const tables = [
+      createTableConfig({
+        name: 'group1',
+        items: [
+          createColumnConfig({
+            field: { name: 'group1Field', source: '' },
+          }),
+        ],
+      }),
+      createTableConfig({
+        name: 'group2',
+        items: [],
+      }),
+    ];
+
+    await act(async () =>
+      render(
+        getComponent({
+          options: createPanelOptions({
+            tables,
+          }),
+        })
+      )
+    );
+
+    expect(selectors.defaultScrollContainer(true)).not.toBeInTheDocument();
+    expect(selectors.scrollContainer()).toBeInTheDocument();
+  });
+
   it('Should switch tables and apply different highlight options', async () => {
     const tables = [
       createTableConfig({

src/components/TablePanel/TablePanel.tsx

@@ -6,13 +6,15 @@ import {
   ClickOutsideWrapper,
   Dropdown,
   MenuItem,
+  ScrollContainer,
   ToolbarButton,
   ToolbarButtonRow,
   useStyles2,
 } from '@grafana/ui';
 import { Table as TableInstance } from '@tanstack/react-table';
 import { AlertWithDetails } from '@volkovlabs/components';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import semver from 'semver';
 
 import { TEST_IDS } from '@/constants';
 import {
@@ -249,6 +251,90 @@ export const TablePanel: React.FC<Props> = ({
     shouldScroll.current = false;
   }, []);
 
+  /**
+   * Table Panel content
+   */
+  const panelContent = () => {
+    return (
+      <>
+        {!!error && (
+          <AlertWithDetails details={error} variant="error" title="Request error" onRemove={() => setError('')} />
+        )}
+        {isToolbarVisible && (
+          <div ref={headerRef} className={styles.header}>
+            <ToolbarButtonRow alignment={options.toolbar.alignment} key={currentGroup} className={styles.tabs}>
+              {sortedGroups.length > 1 &&
+                sortedGroups.map((group, index) => (
+                  <ToolbarButton
+                    key={group.name}
+                    variant={currentGroup === group.name ? 'active' : 'default'}
+                    onClick={() => {
+                      setCurrentGroup(group.name);
+                      shouldScroll.current = true;
+                    }}
+                    className={styles.tabButton}
+                    style={{
+                      maxWidth: index === 0 ? width - 60 : undefined,
+                    }}
+                    {...TEST_IDS.panel.tab.apply(group.name)}
+                  >
+                    {group.name}
+                  </ToolbarButton>
+                ))}
+              {options.toolbar.export && (
+                <ButtonGroup className={styles.downloadButtons}>
+                  <Button
+                    icon="download-alt"
+                    onClick={() => onExport({ table: tableInstance.current as never })}
+                    variant="secondary"
+                    size="sm"
+                    {...TEST_IDS.panel.buttonDownload.apply()}
+                  >
+                    Download
+                  </Button>
+                  <Dropdown overlay={menu} {...TEST_IDS.panel.dropdown.apply()}>
+                    <Button variant="secondary" size="sm" icon="angle-down" {...TEST_IDS.panel.buttonFormat.apply()}>
+                      {downloadFormat}
+                    </Button>
+                  </Dropdown>
+                </ButtonGroup>
+              )}
+            </ToolbarButtonRow>
+          </div>
+        )}
+        <Table
+          key={currentTable?.name}
+          expandedByDefault={currentTable?.expanded ?? false}
+          data={tableData}
+          columns={columns}
+          tableRef={tableRef}
+          tableHeaderRef={tableHeaderRef}
+          topOffset={tableTopOffset}
+          tableFooterRef={tableFooterRef}
+          scrollPaddingEnd={scrollPaddingEnd}
+          scrollableContainerRef={scrollableContainerRef}
+          eventBus={eventBus}
+          onUpdateRow={onUpdateRow}
+          bottomOffset={tableBottomOffset}
+          paginationRef={paginationRef}
+          showHeader={currentTable?.showHeader ?? true}
+          width={width}
+          pagination={pagination}
+          tableInstance={tableInstance as never}
+          onAddRow={onAddRow}
+          isAddRowEnabled={isAddRowEnabled}
+          onDeleteRow={onDeleteRow}
+          isDeleteRowEnabled={isDeleteRowEnabled}
+          rowHighlightConfig={currentTable?.rowHighlight}
+          isFocused={isFocused}
+          shouldScroll={shouldScroll}
+          scrollBehavior={currentTable?.rowHighlight.smooth ? 'smooth' : 'auto'}
+          onAfterScroll={onAfterScroll}
+        />
+      </>
+    );
+  };
+
   /**
    * Return
    */
@@ -273,94 +359,23 @@ export const TablePanel: React.FC<Props> = ({
             isFocused.current = true;
           }}
         >
-          <div
-            ref={scrollableContainerRef}
-            className={styles.content}
-            style={{
-              width,
-              height,
-            }}
-          >
-            {!!error && (
-              <AlertWithDetails details={error} variant="error" title="Request error" onRemove={() => setError('')} />
-            )}
-            {isToolbarVisible && (
-              <div ref={headerRef} className={styles.header}>
-                <ToolbarButtonRow alignment={options.toolbar.alignment} key={currentGroup} className={styles.tabs}>
-                  {sortedGroups.length > 1 &&
-                    sortedGroups.map((group, index) => (
-                      <ToolbarButton
-                        key={group.name}
-                        variant={currentGroup === group.name ? 'active' : 'default'}
-                        onClick={() => {
-                          setCurrentGroup(group.name);
-                          shouldScroll.current = true;
-                        }}
-                        className={styles.tabButton}
-                        style={{
-                          maxWidth: index === 0 ? width - 60 : undefined,
-                        }}
-                        {...TEST_IDS.panel.tab.apply(group.name)}
-                      >
-                        {group.name}
-                      </ToolbarButton>
-                    ))}
-                  {options.toolbar.export && (
-                    <ButtonGroup className={styles.downloadButtons}>
-                      <Button
-                        icon="download-alt"
-                        onClick={() => onExport({ table: tableInstance.current as never })}
-                        variant="secondary"
-                        size="sm"
-                        {...TEST_IDS.panel.buttonDownload.apply()}
-                      >
-                        Download
-                      </Button>
-                      <Dropdown overlay={menu} {...TEST_IDS.panel.dropdown.apply()}>
-                        <Button
-                          variant="secondary"
-                          size="sm"
-                          icon="angle-down"
-                          {...TEST_IDS.panel.buttonFormat.apply()}
-                        >
-                          {downloadFormat}
-                        </Button>
-                      </Dropdown>
-                    </ButtonGroup>
-                  )}
-                </ToolbarButtonRow>
-              </div>
-            )}
-            <Table
-              key={currentTable?.name}
-              expandedByDefault={currentTable?.expanded ?? false}
-              data={tableData}
-              columns={columns}
-              tableRef={tableRef}
-              tableHeaderRef={tableHeaderRef}
-              tableFooterRef={tableFooterRef}
-              scrollPaddingEnd={scrollPaddingEnd}
-              topOffset={tableTopOffset}
-              scrollableContainerRef={scrollableContainerRef}
-              eventBus={eventBus}
-              onUpdateRow={onUpdateRow}
-              bottomOffset={tableBottomOffset}
-              paginationRef={paginationRef}
-              showHeader={currentTable?.showHeader ?? true}
-              width={width}
-              pagination={pagination}
-              tableInstance={tableInstance as never}
-              onAddRow={onAddRow}
-              isAddRowEnabled={isAddRowEnabled}
-              onDeleteRow={onDeleteRow}
-              isDeleteRowEnabled={isDeleteRowEnabled}
-              rowHighlightConfig={currentTable?.rowHighlight}
-              isFocused={isFocused}
-              shouldScroll={shouldScroll}
-              scrollBehavior={currentTable?.rowHighlight.smooth ? 'smooth' : 'auto'}
-              onAfterScroll={onAfterScroll}
-            />
-          </div>
+          {semver.lt(config.buildInfo.version, '11.5.0') ? (
+            <div
+              ref={scrollableContainerRef}
+              className={styles.content}
+              style={{
+                width,
+                height,
+              }}
+              {...TEST_IDS.panel.defaultScrollContainer.apply()}
+            >
+              {panelContent()}
+            </div>
+          ) : (
+            <ScrollContainer height={height} ref={scrollableContainerRef} {...TEST_IDS.panel.scrollContainer.apply()}>
+              {panelContent()}
+            </ScrollContainer>
+          )}
         </div>
       </tablePanelContext.Provider>
     </ClickOutsideWrapper>

src/constants.ts

@@ -88,6 +88,8 @@ export const ROW_HIGHLIGHT_STATE_KEY = '__rowHighlightStateKey';
 export const TEST_IDS = {
   panel: {
     root: createSelector('data-testid panel'),
+    defaultScrollContainer: createSelector('data-testid panel default-scroll-container'),
+    scrollContainer: createSelector('data-testid panel scroll-container'),
     tab: createSelector((name: unknown) => `data-testid panel tab-${name}`),
     buttonDownload: createSelector('data-testid panel button-download'),
     buttonFormat: createSelector('data-testid panel button-format'),