Building a responsive table in React Native with Hooks
Jun 2, 2019
4 minute read
This post details a technique that you can use in a dual orientation app to render more (or less) data in your tables–as space permits—using a couple of simple hooks. Keeping in mind that the last thing our app users want is to be unable to access the data they’re looking for, we’ll provide a hint showing how they can rotate their device to reveal even more.
Let’s begin with an example of how your app can look when you try to cram everything onto a small screen. This is the situation we’ll aim to avoid:
The first thing you’ll need is some tabular data in your app. For my sample app (code can be found here: blefebvre/react-native-responsive-table ), I have used the react-native-table-component package for rendering my table. This package provides a simple API and some handy extension points for styling various aspects of the table. The sample app includes six columns of data, representing securities in a stock portfolio:
Next, you’ll need to decide which columns of data you’d like to prioritize on small and medium screens. In my case, I chose to show “Ticker”, “Quantity”, and “Market Value” on small screens. On medium screens I chose to show everything except “Total Cost”. Put your selections into two arrays:
We will also need a function that can figure out which items should be included given a device breakpoint, and return the reduced set of data. Here’s an example of how this function could be implemented:
A keen eye will have noticed the Breakpoint TypeScript type above. This parameter type is an enum, and is defined in useBreakpoint.ts as follows:
We will need a way to determine the breakpoint for use by the reduceDataForScreenSize(..) function. I wrote a small hook called useBreakpoint to return the current matching breakpoint:
useBreakpoint relies on another hook called useScreenDimensions to figure out the device’s screen size each time it changes:
The two hooks compose together nicely, so all that needs to be done from our responsive table component is call const breakpoint = useBreakpoint(); and pass the result along to the reduceDataForScreenSize(..) function.