I have a hacky use-at-your-own-risk solution which uses the Markdown component with JavaScript injection. IA has said that they plan on patching script injection, but for the time being it works. It could be worth looking into @bmusson's Embr-Periscope module which provides a way of executing JavaScript.
To get it to work you'll have to:
- Set your table's
meta.domIdto match the ID in the script, currently "scrolling-table" (or change the ID) - Set
props.virtualizedto false on the table - Create the Markdown component by copying and pasting the JSON below
Markdown component with script:
[
{
"type": "ia.display.markdown",
"version": 0,
"props": {
"markdown": {
"sourcePos": true,
"escapeHtml": false
},
"source": "<img src=\"x\" style=\"display:none\" onerror=\"(() => {\n const ID = '#scrolling-table';\n const PAUSE = 3000;\n const init = () => {\n const el = document.querySelector(ID);\n if (!el) return setTimeout(init, 500);\n if (el.initialized) return;\n el.initialized = true;\n el.scrollIsReset = false;\n const startScroll = () => {\n if (el.scrollInterval || el.scrollIsReset) return;\n el.scrollInterval = setInterval(() => {\n const body = el.querySelector('.flexBody');\n if (!body || el.scrollIsReset) return;\n if (body.scrollTop + body.offsetHeight >= body.scrollHeight - 2) {\n el.scrollIsReset = true;\n el.scrollTimeout = setTimeout(() => {\n body.scrollTo({ top: 0, behavior: 'smooth' });\n body.addEventListener('scrollend', function onEnd() {\n body.removeEventListener('scrollend', onEnd);\n el.scrollTimeout = setTimeout(() => { el.scrollIsReset = false; }, PAUSE);\n }, { once: true });\n }, PAUSE);\n } else {\n body.scrollTop += 1;\n }\n }, 30);\n };\n el.addEventListener('mouseover', () => { \n clearInterval(el.scrollInterval); el.scrollInterval = null;\n clearTimeout(el.scrollTimeout); el.scrollIsReset = false;\n const body = el.querySelector('.flexBody');\n if (body) { body.scrollTop = body.scrollTop; }\n }, true);\n el.addEventListener('mouseout', (e) => {\n if (!el.contains(e.relatedTarget)) startScroll();\n }, true);\n el.scrollIsReset = true;\n el.scrollTimeout = setTimeout(() => { el.scrollIsReset = false; startScroll(); }, PAUSE);\n };\n init();\n})()\">"
},
"meta": {
"name": "AutoScrollTable"
},
"position": {
"shrink": 0,
"display": false
},
"custom": {},
"propConfig": {
"props.source": {
"access": "PUBLIC"
}
}
}
]