react-auto-scroll-table

Installation

npm install react-auto-scroll-table

Example

The table will start scrolling when the height is less than the required client height to render the inner tbody. Try adjusting the height of the container and scroll speed.

Height:
speed:

Flight No.	Airline	Departing	Destination
FL1	Airline 1	SEA	BOS
FL2	Airline 2	MCO	LAX
FL3	Airline 3	BOS	DFW
FL4	Airline 4	LAS	SEA
FL5	Airline 5	JFK	PHX
FL6	Airline 6	SEA	BOS
FL7	Airline 7	MCO	ATL
FL8	Airline 8	DFW	MIA
FL9	Airline 9	PHX	MIA
FL10	Airline 10	JFK	SFO
FL11	Airline 11	MCO	LAS
FL12	Airline 12	BOS	IAH
FL13	Airline 13	JFK	MCO
FL14	Airline 14	DFW	LAS
FL15	Airline 15	JFK	SEA

Usage/Props

tbodyRows: ReactNode[]: rows of the table. These should probably be <tr>elements.
speed?: number: Scroll speed. Defaults to 1.
thead?: ReactNode: Optional thead element.
spacer?: ReactNode: Optional component to render between the last row of the table and the first element when scrolling.
tableClassName?: string: Optional CSS class name appended to underlying table element.
containerClassName?: string: Optional CSS class name appended to underlying table element.

Implementation Notes

When the table can fully render in the given area, it will not auto-scroll
Implementation uses CSS Animations to translate 2 duplicated/stacked<tbody> elements.
This is a bit of a hack and may have implication for performance for very large tables (due to duplicated notes in the DOM).
It also probably isn't well suited for tables where many event handlers are registered withing table row elements. Although, given this is intended for use in passive (ie. not interactive) tables, this is unlikely.