Sematable ReactJS & Redux Table

Introducing Sematable – ReactJS & Redux Table

Back in 2011 – more than half a decade ago(!) – we’ve reviewed Top JavaScript Dynamic Table Libraries.  Clearly, a lot has changed since then.  Earlier this year, we started reworking our SPM & 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:

sematable-screenshot

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.

If you are passionate about front-end or full-stack development, note that we’re hiring worldwide!

3 thoughts on “Introducing Sematable – ReactJS & Redux Table

  1. I figured out the solution to the problem above – the sematable wrapped component must be included as a sub-component (I think).

    However after doing that, the problem becomes that when using server- and client-rendering, the server returns a different set of HTML from what the client builds:

    This is what gets logged:
    (client) -reactid=”123″><

    From that excerpt, it looks like the server doesn't include the row level data. Any ideas of why?

  2. I was so excited when I found sematable because its exactly what I need for my project. However, I’ve spent 2 days trying to make it work in my react / redux build, but I just get this error whenever I wrap a Component class with sematable:

    Uncaught Error: React DOM tree root should always have a node reference.
    at invariant (app.js:1398)
    at getNodeFromInstance (app.js:10761)
    at ReactDOMComponent.getPublicInstance (app.js:18070)
    at Object.removeComponentAsRefFrom (app.js:14436)
    at detachRef (app.js:14289)
    at Object.ReactRef.detachRefs (app.js:14341)
    at Object.unmountComponent (app.js:14163)
    at ReactCompositeComponentWrapper.unmountComponent (app.js:21730)
    at Object.unmountComponent (app.js:14164)
    at Object.unmountChildren (app.js:21167)

    Any idea of what I am doing wrong?

Leave a Reply