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. …

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. …