beeleelaw

☰

JSON Table

Personal Summary

About

A JSON table is something I've constructed in React many times, so I knew many of the challenges going in. Simply displaying a table is easy enough, but when you want to implement features like sorting and filtering, things can get tricky, and the customizaiton options can be endless. This is why it's important to go into a project with a well defined scope.

My scope was simple enough. I wanted to filter, sort and paginate. Filtering and sorting accept one parameter per column (No sorting by multiple columns, and no multi-filters like greater than X AND not equal to Y OR not null). Still, even simple sorting requires some kind of data type defintions.

The data types I went with are: strings, numbers, dates, and tables. I thought tables would be a fun data type to flex some recursion. I've also done this in the past when displaying itemized invoices in a React table. For some more recursion flexing, the data type detection function is itself recursive.

The data type detection function may be slow when iterating over every single row and column of data when presented with a large data set. To offset this, I set up a system that, when the data count is above a certian constant, takes a random sample of the data to iterate through. This system isn't perfect, but it's also one of the major difficulties when designing and integrating tables and data, and there will never be a perfect solution.

Will this table work for you? In some capacity, yes. But in my experience, there will always be feature requests for further customization. For example, if you wanted to display invoice data, you'd want dollar amounts to be represented with a symbol (such as "$"), and trailing zeroes. Imagine the challenges this might present: you will definitely need to create a new "data type" (currency), and you may need to supply the table with a predefined schema. Not a bad solution! But my scope was to simply display any kind of JSON data into a basic table.

JSON (JavaScript Object Notation) is by far the most common data format when communicating information through the internet. JSON data appears as a list or array of key value pairs: [{key1: value1, key2: value2}, {key1: value3, key2: value4}, {key3: value5} ...]. In a well-structured database, every item in the list would have the same keys. This would be commom when using an API to query a relational database. However, in some data storage formats, such as NoSQL (which you'll find with MongoDB), there is no such requirement when it comes to keys.

In this table component, we can input SQL or NoSQL JSON data and get a multi-featured table. The features include: pagination, filtering, and sorting. Data type detection is also used to aid in filtering and sorting. Another feature allows recursive tables: if data type detection detects a JSON list, it'll attempt to output a table inside the cell.

Copy/paste your own JSON data (with some limitations) to try it out yourself, or use my own sample data. When using custom data, keys must be surrounded by double quotes. Use the GitHub link at the bottom of the page if you want to take a look under the hood or workshop some ideas.

Brandon Lawrence

Grand Rapids, MI 2025