Introducing Sematable: React and Redux Table

Back in 2011 – more than half a decade ago(!) – we’ve reviewed the Top JavaScript Dynamic Table Libraries.  Clearly, a lot has changed since then.  Earlier this year, we started reworking our SPM and Logsene front-ends, building them on top of ReactJS, Redux, and ES6.  In the past, we’ve used DataTables, but it turns out DataTables doesn’t play well with React.  We set off looking for a modern alternative that works well with React but, to our disappointment, we could not find anything that fit our needs. We needed something that:

• Can filter and search data by text or by column values
• Can paginate data
• Can sort data
• Plays well with React and Redux so we can easily store filter state in Redux, or display data in some custom way

For example, Facebook’s fixed-data-table didn’t meet our needs since its main use case is handling huge amounts of data, and in most cases we just need to show a small number of rows, and allow the user to sort, paginate, and filter the data. Other libraries were not being actively maintained, or made too many decisions on how the data is displayed, or were missing filtering and pagination.

So what did we do? We implemented a nice and clean, easy to use React and Redux friendly data table component and called it sematable.

We needed something that is focused on working with data, not on how the data is displayed. We still provide a Table component for showing the data which is based on Bootstrap 4 and uses Font-Awesome icons, but you can also use some other table component to display the data which sematable provides.

Sematable wraps a table component and provides:

• filtering by text or column values
• searching by matching column value substrings
• sorting
• row selection
• pagination

… with the ability to persist the table state in application state with Redux, so filters, sort info, selected rows, and pagination info survive route navigations. Here is what it looks like:

We use sematable wherever we need to show tabular client-side data, and want the user to have some common functionality such as pagination, sorting, searching, and filtering.

Sematable is not the right choice if you want to show huge amounts of data on just one page since the default table component doesn’t implement windowing, or if filtering and pagination should be implemented server-side. For that we use react-virtualized for handling infinite loading and huge amounts of data, like our logs view in Logsene.