Connecting Your JavaScript DataGrid to a PostgreSQL Database with Express

Web applications have become increasingly data-driven, and one of the most common requirements developers face is displaying relational data from a database in a fast, interactive, and scalable UI. Whether you’re building internal tools, dashboards, or full-scale enterprise applications, connecting a JavaScript DataGrid to a backend database is a foundational skill, and one that benefits from using the right technologies at each layer of the stack.

In this article, we’ll walk through how to connect Wijmo’s FlexGrid to a PostgreSQL database using Node.js and Express as a lightweight API layer. The goal is to show a clear, practical end-to-end flow: querying data from Postgres on the server, exposing it through an Express-based REST endpoint, and then loading and displaying it efficiently in a JavaScript application using Wijmo’s FlexGrid.

Ready to get started? Download Wijmo Today!

Why PostgreSQL and Express?

We chose PostgreSQL because it’s one of the most widely used open-source relational databases in production today. It offers strong performance, excellent standards compliance, robust indexing, and advanced features, making it a natural choice for real-world applications. Many development teams already rely on Postgres, making it a realistic and relatable backend for this example.

For the server layer, Express provides a simple and flexible way to expose database data to the frontend. Rather than connecting directly from the database to the browser - which isn’t secure or scalable - Express acts as a clean API boundary. This approach mirrors how most production applications are structured and keeps the example aligned with best practices.

On the client side, Wijmo’s FlexGrid is specifically designed to work with both structured and unstructured data. It provides high-performance rendering, flexible data binding, and enterprise-ready features, making it well-suited for displaying data retrieved from backend services such as Postgres.

What This Article Covers

By the end of this article, you’ll have a working example that demonstrates how these pieces fit together. Specifically, we’ll cover:

• Setting up a PostgreSQL database with sample data
• Creating an Express server that connects to Postgres and exposes a REST API
• Fetching data from the Express API in a JavaScript application
• Binding the retrieved data to Wijmo FlexGrid for display

This walkthrough is intended for developers with some familiarity with JavaScript and web development, but it doesn’t assume deep experience with PostgreSQL, Express, or Wijmo.

We’ll start by setting up the PostgreSQL database that will serve as the data source for our grid.

Setting Up a PostgreSQL Database

The first thing we need to do is set up the PostgreSQL database so we can retrieve data via the Express server.

For our database, we’re going to store information about different vehicles that can be retrieved and displayed in our datagrid. To get started, we’re going to need to create our table, which we will call ford, into our Vehicles database:

CREATE TABLE ford (
    id BIGSERIAL PRIMARY KEY,
    model VARCHAR(50) NOT NULL,
    trim VARCHAR(50),
    year INTEGER NOT NULL CHECK (year >= 1886),
    body_type VARCHAR(30),
    vehicle_type VARCHAR(30),
    engine_type VARCHAR(50),
    fuel_type VARCHAR(20)
);

This table will contain 8 fields that hold information about the different types of Ford vehicles stored here.

Now that the table is created, we’ll need to insert some data that we can retrieve with our client. To do so, we’re going to run an INSERT statement:

INSERT INTO ford (
    model,
    trim,
    year,
    body_type,
    vehicle_type,
    engine_type,
    fuel_type
)
VALUES
('F-150', 'XL', 2022, 'Truck', 'Commercial', 'V6', 'Gasoline'),
('F-150', 'XLT', 2023, 'Truck', 'Commercial', 'V6 Turbo', 'Gasoline'),
('F-150', 'Lightning', 2023, 'Truck', 'Commercial', 'Electric', 'Electric'),
('Mustang', 'EcoBoost',  2021, 'Coupe', 'Passenger', 'I4 Turbo', 'Gasoline'),
('Mustang', 'GT', 2022, 'Coupe', 'Passenger', 'V8', 'Gasoline'),
('Mustang', 'Mach-E', 2023, 'SUV', 'Passenger', 'Electric', 'Electric'),
('Explorer', 'XLT', 2022, 'SUV', 'Passenger', 'V6', 'Gasoline'),
('Explorer', 'Limited', 2023, 'SUV', 'Passenger', 'Hybrid', 'Hybrid'),
('Escape', 'SE', 2021, 'SUV', 'Passenger', 'I4', 'Gasoline'),
('Escape', 'Hybrid', 2022, 'SUV', 'Passenger', 'Hybrid', 'Hybrid'),
('Edge', 'SEL', 2020, 'SUV', 'Passenger', 'V6', 'Gasoline'),
('Bronco', 'Base', 2022, 'SUV', 'Passenger', 'I4 Turbo', 'Gasoline'),
('Bronco', 'Badlands', 2023, 'SUV', 'Passenger', 'V6 Turbo', 'Gasoline'),
('Ranger', 'Lariat', 2021, 'Truck', 'Commercial', 'I4 Turbo', 'Gasoline'),
('Transit', 'Cargo', 2022, 'Van', 'Commercial', 'V6', 'Gasoline'),
('Transit', 'Passenger', 2023, 'Van', 'Commercial', 'V6', 'Gasoline'),
('Expedition', 'XLT', 2022, 'SUV', 'Passenger', 'V6 Turbo', 'Gasoline'),
('Fusion', 'SE', 2020, 'Sedan', 'Passenger', 'I4', 'Gasoline'),
('Fusion', 'Hybrid', 2020, 'Sedan', 'Passenger', 'Hybrid', 'Hybrid');

This will give us 20 rows of data within our ford column to work with.

Finally, if you’d like to test and make sure that everything looks correct, you can run the following command:

SELECT * FROM ford;

If you’re using pgAdmin, you should see something like this in the Data Output section of the application:

Now that our table is set up, we can move on to configuring the Express server to retrieve data from our database and send it to our frontend.

Creating an Express Server to Connect to PostgreSQL

To get started, we’re going to be using VisualStudio Code as our IDE of choice. Open the application, select a folder to store your Express server and JavaScript application, and create a new folder named express-server. Navigate inside that folder, and in the VSCode terminal, run the following command:

npm init

This will guide you through initializing a package.json file to set up the server. Feel free to name it whatever you want and give it any description you like, but note the entry point for the application: index.js. You can change this if you wish, but note that this file will serve as the entry point for our Express server.

Next, we’ll need to install a couple of packages:

npm install express cors pg

• Express is the package that we’ll use to create our server
• Cors will be used to allow us to make cross-origin requests
• Pg is used so that we can query Postgres via our Express server

Once those are installed, we’ll then create two files:

• index.js - the entry point to our Express server
• queries.js - will be used to set up database queries that Express can use

The first thing that we’ll do is open up our queries.js file and add the required code there:

const Pool = require('pg').Pool;
const pool = new Pool({
  user: USER,
  host: 'localhost',
  database: 'Vehicles',
  password: PASSWORD,
  port: 5432
});

module.exports = {
  query: (text, params) => pool.query(text, params), pool,
}

This creates a Pool object that allows us to manage our database connections and queries. As you can see, we’re setting user, host, database, password, and port properties; your user and password will differ from ours, but if you set everything else up correctly and didn’t change the default port, the other settings should work fine for you.

Next, over in the index.js file, we’ll set up our Express server:

const express = require('express');
var cors = require('cors');
const app = express();
const port = 3000;
const db = require('./queries');

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
    res.json({ info: 'Node.js, Express, Postgres API, and Wijmo FlexGrid' })
});

app.get('/ford', async (req, res) => {
    try {
        const results = await db.query('SELECT * FROM ford');
        res.status(200).json(results.rows);
    } catch (err) {
        res.status(500).send('Server Error');
    }
});

app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

The first thing we do is import Express and Cors into the file so we can use them. We then use express() to set up the app, define the port, and import the query that we just set up. We’ll also need to ensure the app uses the Cors library we imported and has access to the express.json() functionality to send our data to the frontend.

Next, we set up two get() methods. The first is just a generic route that returns JSON to confirm the server is running. The second method, however, is the one that will actually query our database.

All we need to do for this route is set up a try/catch method, wait for the database query to complete (which we’re just calling Select * From ford to retrieve all of the data in the table), and then return it to the client using express.json().

The last thing we do is set up our listen method using the port that we defined at the head of this file. Then, by running node index.js, our server will be up and running, waiting for client requests to retrieve data from our database.

Fetching Data from the Express API in a JavaScript Application

With our database and server complete, the last things to do are to set up our JavaScript application to retrieve the data and then load it into a Wijmo FlexGrid control.

Before we do any of that, however, we’ll need to set up our Vite application. To do so, run the following command:

npm create vite@latest

For our application, we’ll select Vanilla as our framework; that way, we get a standard JavaScript application scaffolded with Vite.

Next, we’re going to remove all of the code from the styles.css file and the main.js file. Leave the styles.css file blank for now—we’ll come back to that. Inside the main.js file, add the following:

import './style.css';

document.querySelector('#app').innerHTML = `
  <div>
    <h2>Wijmo FlexGrid with Express and PostgreSQL</h2>
    <div id="dataGrid"></div>
  </div>
`

Now that we have the unnecessary code stripped out, we can add our fetch request. Add the following code to the main.js file:

const API_URL = "http://localhost:3000/ford";

async function loadDataIntoCollectionView() {
  try {
    const response = await fetch(API_URL);
    if(!response.ok)
      throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    console.log(data);
  } catch(error) {
    console.error('Failed to load data: ', error);
  }
}

loadDataIntoCollectionView();

This code uses the API_URL variable, which holds the endpoint to our Express server, to make a request to the Express server, which in turn makes a request to our Postgres database, which returns the data to the Express server and back to the client.

If you run your application with the npm run dev command and open up the console in your browser, you should see the data that we’ve retrieved get logged:

The last thing we have to do is bind this data to Wijmo’s FlexGrid, and then we can load it into the browser window for our users to view.

Binding the Data to Wijmo’s FlexGrid

With everything else complete, we just need to install Wijmo, and then we’ll be able to bind all of our data to the JavaScript datagrid. To get started, we’ll need to install Wijmo, which we’ll do via NPM:

npm install @mescius/wijmo.all

Once that is complete, we’ll need to reference Wijmo in both the CSS and JavaScript files.

main.js:

import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

styles.css:

@import '@mescius/wijmo.styles/wijmo.css';

Now we can get into the actual implementation of Wijmo’s FlexGrid. To get started, we’re going to create a CollectionView, which is Wijmo’s core data management component, and then assign it to the FlexGrid’s itemsSource property. This property is where Wijmo’s controls, including FlexGrid, store the data that they display:

const cv = new wjCore.CollectionView([]);
const grid = new wjGrid.FlexGrid('#dataGrid', {
  itemsSource: cv
});

A couple of things to touch on really quickly: first, we’re setting the CollectionView equal to an empty array. The reason for this is that the CollectionView needs to be initialized to something, and since we’re making an API call to get our data, it won’t be available when the CollectionView gets initialized. Second, we’re binding FlexGrid to the element with the ID of dataGrid. Earlier in the article, when we set up the Vite application, we included a div element with that ID that we can now use to bind to the FlexGrid.

Finally, inside of our loadDataIntoCollectionView() method, instead of logging our data, we’re going to assign it to the CollectionView’s sourceCollection property (where the CollectionView holds its data):

async function loadDataIntoCollectionView() {
  try {
    const response = await fetch(API_URL);
    if(!response.ok)
      throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    cv.sourceCollection = data;
  } catch(error) {
    console.error('Failed to load data: ', error);
  }
}

Now, when we run the application, we should see the following in our browser:

Conclusion

By walking through this end-to-end example, we’ve shown how PostgreSQL, Express, and Wijmo’s FlexGrid can work together to form a clean, scalable data pipeline for modern web applications. Using Express as an API layer keeps your database secure while providing a flexible way to serve data to the client, and Wijmo’s CollectionView and FlexGrid make it straightforward to bind and display that data in a performant, enterprise-ready DataGrid. While this article focused on a simple read-only scenario, the same pattern can be extended to support sorting, filtering, paging, editing, and more advanced server-side logic. With this foundation in place, you can confidently build richer, data-driven applications that connect robust backend services to powerful, responsive JavaScript UIs.

Ready to check it out? Download Wijmo Today!