Build a Customizable JavaScript Data Grid in Minutes
Tags: webdev, devops, javascript, tutorial
Published: 2023-12-06 22:01:25

---
canonical_url: https://developer.mescius.com/blogs/build-a-javascript-data-grid-in-minutes
description: Learn how to build a JavaScript datagrid in your web application. See more from Wijmo today.
---
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](https://developer.mescius.com/wijmo/flexgrid-javascript-data-grid), 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).

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](https://developer.mescius.com/en/blogs/how-to-build-an-angular-data-grid-in-minutes), [React](https://developer.mescius.com/en/blogs/build-a-react-data-grid-in-minutes), and [Vue](https://developer.mescius.com/en/blogs/how-to-build-a-vue-data-grid-in-minutes).

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](//cdn.mescius.io/umb/media/xlnlsyts/image.png?rmode=max&width=529&height=461)

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](https://developer.mescius.com/en/wijmo-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](https://stackblitz.com/edit/build-a-customizable-javascript-data-grid-in-minutes?file=index.js).

We used [stackblitz](https://stackblitz.com//) 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:

1.  Open [stackblitz](https://stackblitz.com/edit/js-4nevfd)
2.  Click the "JavaScript/Blank Project" button at the bottom of the screen
3.  Add Wijmo to the project by typing "wijmo" into the dependencies list:

![Create the Angular App](https://gccontent.blob.core.windows.net/gccontent/blogs/wijmo/20190129-build-an-angular-data-grid/1flex.png)

### 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](https://developer.mescius.com/wijmo/flexgrid-javascript-data-grid), 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.

### Run the Plain JavaScript Application

That's it! The Plain JavaScript version of the "2023 Sedans" app is ready. See it on [StackBlitz](https://stackblitz.com/edit/build-a-customizable-javascript-data-grid-in-minutes?file=index.js).

#### Continue Reading

##### Build a data grid in the following frameworks:

*   [Build an Angular Grid in Minutes](https://developer.mescius.com/blogs/how-to-build-an-angular-data-grid-in-minutes)
*   [Build a React Grid in Minutes](https://developer.mescius.com/blogs/build-a-react-data-grid-in-minutes)
*   [Build a Vue Grid in Minutes](https://developer.mescius.com/blogs/how-to-build-a-vue-data-grid-in-minutes)

Happy coding! If you have questions or comments, please feel free to enter them below.