A React Data Grid Template Powered By ElasticSearch

Are you looking for a reusable boilerplate for your next ▦ data grid project? You’ve come to the right place. We have created a React based data grid template that is powered by an ElasticSearch backend. It is searchable, filterable and can render thousands of rows on the frontend thanks to react-virtualized.

We hear you! While there are plenty of data grid libraries and templates available that offer an amazing assortment of frontend functionalities, they often don’t consider the performance impact of rendering everything into the DOM and/or how to connect to a backend that doesn’t become limiting as data, filtering and search needs scale.

Given that ElasticSearch’s main use-case is providing a blazing fast ️ and scalable search and aggregations backend, we offer a React data grid UI that’s powered using ElasticSearch as its backend. The frontend is based on Dejavu’s architecture — one of the most popular data browsers for ElasticSearch (over 1MM+ downloads). You can configure the template to work with your own ElasticSearch index. You can also configure a variety of UI options for searching, filtering, sorting, setting page size, switch b/w using pagination and infinite scrolling as well as setting the column visibility.

In this post, we also explain how you can build a data grid app from ground up using ReactiveSearch, react-virtualized, and ElasticSearch.

You can buy the data grid template with the source code for $49 over here. The template comes with a walkthrough video and you will receive free updates for the next 6 months.

Template Features:

  • Apply the template to your dataset and ElasticSearch index
  • Infinite scrolling, pagination, and data grouping with global search
  • Sorting and filtering data on a column-by-column basis
  • Blazing fast search experience
  • Ability to customize columns and rows elements

You can try out the live demo over here.

This template is meant for web developers who are looking for building a scalable data grid that doesn’t become limiting down the road.

Whether you’re considering building your next dashboard project, or your e-commerce search for end users, data grids provide the most flexible way to slice and dice any structured data.

While the template is powered by ElasticSearch, you don’t need to have experience with it to be able to configure / make the most of it. Our walkthrough video and use of declarative props make it accessible to developers with no prior experience working with it.

With this template, you can:

  • Render tens of thousands of records of data seamlessly,
  • Build a delightful search experience powered by appbase.io/ElasticSearch,
  • Extend and customize the UI components,
  • Use the built-in features for changing filtering, sorting and pagination options.

This template uses ReactiveSearch and react-virtualized libraries to render the data grid UI.

  1. ReactiveSearch — ReactiveSearch is search UI library for data-driven components. We have used ReactiveSearch for querying ElasticSearch using declarative props. It comes with a rich API for customizing the queries and comes with over 30 UI component presets.
  2. react-virtualized — For rendering large set of data for grid, we have used react-virtualized library which uses virtual rendering techniques to render data without lagging the interface.

You can check the walkthrough video below:

ElasticSearch is a NoSQL database which can search through large amounts of data in a short time. It performs a full-text search on the data which is stored in the form of documents (like objects) by examining all the words in every document.

Here’s what the ElasticSearch docs say:

ElasticSearch is a highly scalable open-source full-text search and analytics engine. It allows you to store, search, and analyze big volumes of data quickly and in near real time.

Even if you’ve never used ElasticSearch before, you should be able to follow along with this post and build your very own ElasticSearch powered search using React and ReactiveSearch.

We will be using ReactiveSearch — An open-source UI library for building data-driven components for ElasticSearch. In order to search and filter data with ElasticSearch, you need to use the Query DSL — an imperative ElasticSearch specific query language that takes some getting used to if you haven’t worked with search engines in the past. ReactiveSearch simplifies the entire process by offering declarative props, with the ability to override them by writing the QueryDSL.

In this template, we have used ReactiveList, SelectedFilters, ReactiveBase, MultiList and DataSearch components from the ReactiveSearch library.

All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which glues the ElasticSearch index and the ReactiveSearch components together. Read more about it over here.

We’ll be using ReactiveList inside the DataTableWrapper component composed with react-virtualized. ReactiveList is responsible for rendering list records of data perform Infinite scrolling or pagination.

https://cdn-images-1.medium.com/max/1600/0*tjWxRo7I0FbsBj5Q.pngImage: ReactiveList with pagination enabled.Image: ReactiveList with infinite scrolling enabled.

Read more about it over here.

This component creates a search bar UI which allows us to search for data inside the Table. It has ability to remain linked with ReactiveList which helps to render search results seamlessly.

https://cdn-images-1.medium.com/max/1600/0*U4vntBdR9R-Sval2.pngImage: Global search (using DataSearch component)Image: Example with search highlighting

Read more about it over here.

SelectedFilters creates a selectable filter UI view displaying the current selected values from other components

Read more about it over here.

Working with data in React is relatively easy because React has capability to isolate data into its component’s state and its children. The hassle begins when the amount of data you need to render becomes massive.

For a common data grid, one of the main issues that still persists is to have a smooth rendering of data. To overcome this challenge, we use virtual rendering techniques which will only render list of data visible on screen and will fetch more data while user scrolls eventually.

Here we have used react-virtualized to enable displaying large amounts of data without making the browser unresponsive. If you are unfamiliar with it and want to check how react-virtualized works, this post should help you out.

If you are looking to build powerful and flexible React data grid powered by ElasticSearch, this template should be a good starting point for you. ReactiveSearch enables querying ElasticSearch declaratively — making it accessible to build powerful search UIs. This also makes it easy to tailor both the queries and UIs as per your use-case.

Try out the live demo over here.

You can buy the template for a one time use for $49 from here.

This template is part of the ReactiveSearch Marketplace which contains a variety of other examples such as:

Leave a Comment

Your email address will not be published. Required fields are marked *