Skip to content

Virtualized table that has freezable header rows/columns. Inspired HEAVILY by https://github.com/bvaughn/react-window/

Notifications You must be signed in to change notification settings

ranneyd/sticky-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project was bootstrapped with Create React App.

Demo made with the lovely Storybook Project.

This is a remake of the incredible react-window lib by @bvaughn. It has optionally "locked" headers on all sides implemented with position: sticky.

Live Demo.

Why

The latest version of Chrome for MacOSX (and it looks like other platforms too) computes scrolling in a separate thread. This is to get the "smooth scrolling effect". However, this means scrolling animates faster than V8/Chrome redraw. Thus, if you want to hook into something scrolling and do something with JavaScript, it won't be synchronized. If you want "sticky headers", this is a big problem. You can get it pretty performant using absolute positioning (see SyncedTable in this repo), which will be perfectly synchronized on standard monitors. However, it failed on a Macbook Pro screen.

I turned to position: sticky, which is essentially designed for this use case. This component (and the component in the demo) is StickyTable.

Compatibility

This uses hooks and requires React 16.8+.

position: sticky, and thus this, won't work in some browsers, including IE11. There are ways to work around it, namely this library.

npm start

Runs the storybook demo. Open http://localhost:6006/ to view it in the browser.

About

Virtualized table that has freezable header rows/columns. Inspired HEAVILY by https://github.com/bvaughn/react-window/

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published