Compare with Ag-Grid

Ag-grid is like the Swiss Army Knife of data grid components. We won't even pretend that DataGridXL does as many things as Ag-Grid.

But you're on this website since you are looking for the best Excel-like editable data grid component. So let's set up Ag-Grid this way to see how it compares to DataGridXL. Which data grid component is better when it comes to offering an Excel-like data grid editing experience?

We will build a data grid of 100,000 rows × 24 columns. The first column is an image-type column. The second column is a checkbox-type column. All other columns are default text columns.

Before we start our test, let's look at the bundles sizes of each component:

Bundle Size

Smaller is better.

Because DataGridXL focuses on one thing: being a spreadsheet-like data editor, we can keep our file small. You could probably bring down the Ag-Grid bundle-size using tree-shaking and hot-module-loading and whatnot, but expect at least 1MB of JS.

Starting the test

To set up your Ag-Grid instance, first include the Ag-Grid enterprise version (2.6MB) in your HTML document. You can request a trial version of their Enterprise distribution on the Ag-Grid website . Also include a <div> that will act as your data grid container.

<script src="path/to/ag-grid-enterprise.min.js"></script>
<div id="grid"></div>

We will configure our Ag-Grid instance so that it mimicks an Excel-like editor as close as possible. Here is how:

function createAgGridInstance(data){

  // get columnDefs from rowData
  const columnDefs = Object.keys(data[0]||{}).map(field => {
    return {
      field,
      editable: true
    }
  });

  const gridOptions = {
    rowData: data,
    columnDefs,
    cellSelection: true,
    undoRedoCellEditing: true,
    defaultColDef: {
      width: 100
    },
    animateRows: false
  };

  const gridElement = document.querySelector('#grid');
  agGrid.createGrid(gridElement, gridOptions);

}

Just like in our tests with Handsontable and Jspreadsheet, our data is a dummy data set of 100,000 rows and 24 columns.

Time to First Render

We can check how long it takes Ag-Grid to first render time. We're mounting the Ag-Grid instance in our grid container of 800×600 pixels.

console.time();
createAgGridInstance(data);
console.timeEnd(`⏳ Ag-Grid Render Time`);

We get a respectable 104ms on Google Chrome. Well done.

Sort Time

Sorting in DataGridXL and Ag-Grid are two different beasts. As Ag-Grid is designed for presentation purposes, their sorting only affects the view and not the editable document.

That being said, their sorting is amazingly performant.

Since Ag-Grid does not treat sorting as an undoable action, sorting 100,000 records is even faster than DataGridXL; but we're talking milliseconds here.

Scroll & Redraw Performance

We have recorded a user scroll action on all data grids.

Notice that DataGridXL is the only data grid that does it completely right.

Scrolling through a Jspreadsheet data grid, your cell selection will disappear until you stop scrolling.

Scrolling through a Handsontable data grid, your cell selection AND your cell data will disappear until you stop scrolling.

Scrolling though your Data GridXL instance? Scrolling is a stable 60FPS. Your data stays visible and so does your cell selection.

DataGridXL

Jspreadsheet

Handsontable