Build a Customizable JavaScript Data Grid in Minutes

November 15 2023

Data grids have been one of the most common visual software elements since the advent of UIs themselves. They provide a powerful and flexible way to display data in a tabular format. Whether you're building an app to track manufacturing stats or analyze financial data, Wijmo's JavaScript DataGrid, FlexGrid, will provide the best data grid UX with outstanding performance.

Wijmo supports all major JavaScript frameworks (Angular, React, and Vue) by including thin wrappers that expose FlexGrid and other Wijmo controls as native framework components.

To demonstrate the flexibility of Wijmo's FlexGrid, we'll build several JavaScript data grids quickly and easily. The purpose is not to compare the frameworks but to show how other Wijmo controls easily and seamlessly integrate with whatever framework you choose (of course, FlexGrid, and then you can also use Wijmo with plain JavaScript or TypeScript and no framework at all).

Ready to Get Started? Download Wijmo Today!

We'll describe the implementation of a simple application called "2023 Sedans" using plain JavaScript, and in additional posts, we'll create one in Angular, React, and Vue.

The app loads some JSON data with information about cars (makes, models, prices) and shows it in a grid with collapsible groups, data aggregates, and column filtering.

JavaScript Datagrid Example

The screenshot shows the plain JavaScript version of the app.

The app shows 129 car models from 27 makes, along with their prices. Items are grouped by make. Group headers show the item count and average price. Users may select one or more models and copy the selection to the clipboard. They may also filter the list by model and by price.

Let's put FlexGrid to work, building a customizable data grid in your app using pure JavaScript.

This is the plain JavaScript version of the "2023 Sedans" app, which can be found here.

We used stackblitz to create the sample, making it easy to maintain and share.

Create the Plain JavaScript App

To create your own copy of the app, follow these steps:

Open stackblitz
Click the "JavaScript/Blank Project" button at the bottom of the screen
Add Wijmo to the project by typing "wijmo" into the dependencies list:

Create the Angular App

Create the HTML

The index.html file defines the application's UI:

<!-- index.html -->
<h1>
  2023 Sedans (Plain JavaScript)
</h1>
<p>
  Sort by model and price …</p>
<p>
  Showing
  <b id="models">0</b> models from
  <b id="makes">0</b> makes.</p>

<div id="theGrid"></div>

The "theGrid" element will host FlexGrid. The "models" and "makes" elements will show the model and make counts and will be updated when the data is loaded and when it is filtered.

Style the App

To style the app, edit the styles.css file as follows:

/* styles.css */
body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
}

Import the Required Modules

Add this code to the index.js file to import the classes and styles the app needs:

// index.js
import './style.css';
import { CollectionView } from 'wijmo/wijmo'; // hold the data
import { FlexGrid } from 'wijmo/wijmo.grid'; // show the data
import { FlexGridFilter } from 'wijmo/wijmo.grid.filter'; // filter the data
import 'wijmo/styles/themes/wijmo.theme.material.css'; // material theme

The code imports the CollectionView, FlexGrid, and FlexGridFilter classes as well as Wijmo's material theme.

Add the Data Source

Add this code to the index.js file to load the data into a grouped CollectionView:

var data = new CollectionView([], {
  // grouped CollectionView
  groupDescriptions: ['make'],
});

data.sourceCollection = sedanData;
updateCounts();

// update model and make counts
function updateCounts() {
  document.getElementById('models').textContent = data.items.length;
  document.getElementById('makes').textContent = data.groups.length;
}

The code creates a CollectionView grouped by "make" and then uses the fetch API to load the data asynchronously from the JSON data source. When the data arrives, the code assigns it to CollectionView's sourceCollection property, updates the model, and makes count elements on the page.

Add FlexGrid

Add this code to the index.js file to create FlexGrid and display the data:

// index.js
var theGrid = new FlexGrid('#theGrid', {
  allowResizing: 'None',
  showAlternatingRows: false,
  isReadOnly: true,
  selectionMode: 'ListBox',
  headersVisibility: 'Column',
  autoGenerateColumns: false,
  columns: [
    {binding:'make', header:'Make', width:"*", visible:false},
    {binding:'model', header:'Model', width:"*"},
    {binding:'price', header:'Price', width:".5*", format: 'c0',
      aggregate: 'Avg'},
  ],
  itemsSource: data
});
var filter = new FlexGridFilter(theGrid, {
  filterApplied: (s, e) => {
    updateCounts();
  }
});

This code instantiates and initializes our JavaScript DataGrid, setting its itemsSource property to the CollectionView created in the previous step.

It also defines the grid's columns by specifying their binding, header, format, and width properties. Additionally, the code sets the aggregate property on the "price" column to "Avg" so the group header rows will show the average price for each make.

Finally, the code attaches a FlexGridFilter attached to the grid so users will be able to filter the data by model or make using an Excel-like UI. The code also attaches a handler to the filter's filterApplied event to update the model and make counts on the page.