DZone
Big Data Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Big Data Zone > Introducing Sematable: React and Redux Table

Introducing Sematable: React and Redux Table

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

Denisa Tudor user avatar by
Denisa Tudor
·
Dec. 08, 16 · Big Data Zone · Opinion
Like (3)
Save
Tweet
6.54K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Database React (JavaScript library) Data (computing)

Published at DZone with permission of Denisa Tudor, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Spring, IoC Containers, and Static Code: Design Principles
  • Top 7 Features in Jakarta EE 10 Release
  • Migrating Legacy Applications and Services to Low Code
  • When Writing Code Isn't Enough: Citizen Development and the Developer Experience

Comments

Big Data Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo