How to autoscroll a table in the dashboard

Grafana Table Panel
,
1

Hello,

I would like to set up an autoscroll on a dashboard table.
This is because the dashboard will be on a monitor.
Could you tell me if there is a feature that could help me?
I haven’t found anything about it yet.

Thanks in advance

2

Hi @jse ,

Well, we do not have such functionality which can do auto scroll of a Dashboard.

Also, to my understanding, you want to use the Tabel Panel and do auto-scroll.

One alternative way is to enable this feature by using (an extension) or JavaScript code within the browser.

2nd option would be to use Pagination in the table panel (which is not auto-scroll but can navigate the user correctly).

I hope this helps.

3

@jse, It’s an interesting question. I would try scrolling through the Dynamic Text panel with the additional JavaScript code functionality we implemented recently.

2 Likes
4

Would you happen to have an example of how to autoscroll the Dynamic Text plugin? I have the plugin working, and I can get it to autoscroll with javascript but I’m not sure what event handler to start triggering the scroll with Plus, I’m not confident in how to reference the objects in the panel correctly.

5

After more work on the auto scroll, I came up with a solution using the Dynamic Text plugin and its JavaScript Code function. I thought I would share incase it helps someone else.

I created a table in the Dynamic Text plugin Content with an id (i.e. <table id=“dataTable”…)

Then I use this JavaScript Code…

$(function() {
	dataTable = document.getElementById('dataTable');

	if (dataTable.parentElement.scrollHeight >= dataTable.parentElement.parentElement.offsetHeight) {
		if (dataTable.parentElement.parentElement.getAttribute('listener') !== 'true') {
			dataTable.parentElement.parentElement.setAttribute('listener', 'true');
			scrollWindow();
		};
	};
});

function scrollWindow() {
	parentWindow = document.getElementById('dataTable').parentElement.parentElement;

	bottomOfWindow = parentWindow.scrollHeight - parentWindow.offsetHeight;

	if (parentWindow.scrollTop < bottomOfWindow) {
		parentWindow.scrollBy(0,1);
		setTimeout(scrollWindow, 50);
	} else {
		setTimeout(function() {
			parentWindow.scrollTo({top: 0, behavior: 'smooth'})
		}, 5000);

		setTimeout(scrollWindow, 10000);
	};
};

This causes the panel to scroll if needed. When it gets to the bottom it waits 5 sec, scrolls back to the top, waits another 5 sec, and starts scrolling again.

1 Like
6

@cmartin510 Awesome, and thank you for sharing the solution!

I will test and add it to the documentation.

7

@cmartin510 Works like a charm.

scrolling

Updated in the documentation.

I refactored code a little

const scrollWindow = () => {
  parentWindow =
    document.getElementById("dataTable").parentElement.parentElement;
  bottomOfWindow = parentWindow.scrollHeight - parentWindow.offsetHeight;

  /**
   * Scroll
   */
  if (parentWindow.scrollTop < bottomOfWindow) {
    parentWindow.scrollBy(0, 1);
    setTimeout(scrollWindow, 50);
    return;
  }

  /**
   * Scroll to the Top
   */
  setTimeout(function () {
    parentWindow.scrollTo({ top: 0, behavior: "smooth" });
  }, 1000);

  /**
   * Start scrolling again
   */
  setTimeout(scrollWindow, 1000);
};

$(() => {
  dataTable = document.getElementById("dataTable");

  /**
   * Avoid scrolling for short tables
   */
  if (
    dataTable.parentElement.scrollHeight <
    dataTable.parentElement.parentElement.offsetHeight
  ) {
    return;
  }

  /**
   * Already set to scroll
   */
  if (dataTable.parentElement.parentElement.getAttribute("listener")) {
    return;
  }

  dataTable.parentElement.parentElement.setAttribute("listener", true);
  scrollWindow();
});
8

Just wanted to say this is really cool stuff !! :sunglasses:

1 Like
9

Dear, good morning!
Does the table increase automatically as data increases in the rows, without needing this scroll ?