Image for post
Image for post

This article is a mix of arguments, reality checks and a code solution at the end. Its focus: device (touch/desktop) driven code split in React with no backend.

Often the road leading to an actual implementation is long and bumpy — priorities, design, budget, colleagues with their own views, talking in different languages. These obstacles are challenging and usually take more energy to deal with than just coding. For that reason they deserve a separate preface here.

Jump to the code section, if this is what you are looking for, otherwise let’s continue.

It would be helpful if you already know what code splitting is. If not yet, the “Code Splitting” writeup in the React docs is a good start.

Confront table limitations and turn its header into a sticky element with React hooks.

Image for post
Image for post

Using a <table /> element instead of flexbox for data presentation is a good thing. Wondering how to make a sticky table header with the help of React in that case? Wondering how to apply the solution into production code? This blog post is for you!

What follows is not a trivial tutorial on how you should solve the task. It is not a theory or fictional implementation, either. Instead, the focus is around a possible solution tested in real projects that you can easily reuse. It also sorts out some of the edge cases when working with <table />.

Go straight to the code, if that’s mostly what your are looking for.


Miroslav Nikolov

• UI developer • Tech author at • OSS maintainer • #javascript, #reactjs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store