Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introducing Sematable: React and Redux Table

DZone's Guide to

Introducing Sematable: React and Redux Table

DataTables not playing well with React? Check out the alternative solution that Sematext came up with.

· Big Data Zone ·
Free Resource

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

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.

screen-shot-2016-12-07-at-17-52-47

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.

Hortonworks Community Connection (HCC) is an online collaboration destination for developers, DevOps, customers and partners to get answers to questions, collaborate on technical articles and share code examples from GitHub.  Join the discussion.

Topics:
react ,redux ,table ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}