Build a powerful table using React Table

Here were some of the high-level feature requirements from our design team:

We weren’t able to get to the last two items due to time restraints, but we may get to it in the future.

Here is a CodeSandbox of the end result:

Let’s go through some of the design requirements.

It took me a while to figure this out, but it turned out to be an easy solution.

Here’s how we render the row number:

This is the main line of code that makes this work:

If the cell is in the first position of the table, we add the row number(index +1); otherwise, we render the cell as we normally would.

In our data array, we include URL values with the same accessor key as the cell we want to display as a link.

The columns that we want to display as a link should include url: true

Then in our table code, we can retrieve the URL value based on the cell’s accessor, which we can get by calling cell.column.id and then passing it to the href attribute.

Here is our custom sort function that we pass to column.sortType instead of using the default sort algorithm.

The general flow is: if the column type is equal to date, we parse the dates and compare them. Else, we use the default alphanumeric sort from React Table.

At Greenhouse, users can choose their date format preference as MM/DD/YYYY, DD/MM/YYYY, or YYYY/MM/DD. If you have a similar setup in which the date format may vary, you will need to replace the dateFormat variable with your user’s date format preference in order to correctly sort the date column.

We use the parse function from the date-fns library to return a date object based on the user’s date format, and then we compare the two dates.

The alphanumeric sort is largely the same as the one used by React Table with a slight modification. In the toString function, we trim the leading and trailing whitespace, as well as lowercase the string.

This allows us to have case insensitive sorting and handle cell values with a leading whitespace, which causes the value to always be at the top or the bottom of the table.

I won’t go into the remaining design requirements for the sake of brevity and because I used the examples provided by React Table with slight modifications that were mostly related to styling. Here are the examples I followed:

Here are some other features included in the CodeSandbox example that I didn’t explore in this post since they are fairly simple to figure out by perusing the code:

As you can see, building your own table provides a lot of flexibility, but it also comes with its fair share of complexity. Here are some feature requirements that I didn’t include in this post for simplicity’s sake, which perhaps I’ll go through in a future post:

It took me weeks to figure all of this out since we have a lot of specific edge cases to consider at Greenhouse for our Reporting needs. I hope you’ve found this post helpful and that it saves you some time!

Related posts:

We are born with a strong internal guidance system. Baby’s don’t think a split second before showing their discontent in an outrageous cry. Yet somehow on our way to adulthood, we are led to believe…

I wrote an article about temporal modeling not long ago about shifting scheduled tasks to be captured as part of your domain. In a nutshell, you gather your business invariants and analyze which ones…

Could you imagine a world with no boundaries, limits or expectations? A world where you could be whoever you wanted to be? A world with no assumptions or judgment? Because it’s easier said than done…