DataGridXL: The performant Javascript Data Grid

You're looking at DataGridXL v1. Click here to go to the latest version.

2000 rows x 500 columns

1
2
3
4
5
6
7
8
9
10
11
A
1;1
2;1
3;1
4;1
5;1
6;1
7;1
8;1
9;1
10;1
11;1
B
1;2
2;2
3;2
4;2
5;2
6;2
7;2
8;2
9;2
10;2
11;2
C
1;3
2;3
3;3
4;3
5;3
6;3
7;3
8;3
9;3
10;3
11;3
D
1;4
2;4
3;4
4;4
5;4
6;4
7;4
8;4
9;4
10;4
11;4
E
1;5
2;5
3;5
4;5
5;5
6;5
7;5
8;5
9;5
10;5
11;5
F
1;6
2;6
3;6
4;6
5;6
6;6
7;6
8;6
9;6
10;6
11;6
G
1;7
2;7
3;7
4;7
5;7
6;7
7;7
8;7
9;7
10;7
11;7
H
1;8
2;8
3;8
4;8
5;8
6;8
7;8
8;8
9;8
10;8
11;8
I
1;9
2;9
3;9
4;9
5;9
6;9
7;9
8;9
9;9
10;9
11;9
J
1;10
2;10
3;10
4;10
5;10
6;10
7;10
8;10
9;10
10;10
11;10
K
1;11
2;11
3;11
4;11
5;11
6;11
7;11
8;11
9;11
10;11
11;11

DataGridXL has excellent scroll performance. The grid has its own lightweight virtual DOM implementation. It means that the grid does not actually have a million DOM nodes in memory. Only the columns are DOM nodes.

This approach is radically different from other products out there. Many other products will show you a "speedy" demo with a million rows. Easy when rows only have a few columns. But DataGridXL is the only product that keeps scrolling smooth with hundreds of columns.

Code

<style>
#grid {
  height: 400px;
}
</style>

<div id="grid"></div>

<script src="https://code.datagridxl.com/datagridxl.js"></script>
<script>
var grid = new DataGridXL("grid", {
  data: DataGridXL.createDummyData(2000,500),
  includeOuterBorder:true
});
</script>

edit

Demos

Performance

App Ideas

Import

Basics

2000 rows x 500 columns

Code

Leave email to receive latest updates!