DataGridXL: The performant Javascript Data Grid

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

Getting Started

Open up your favorite text editor and create an empty HTML file. Let's name it index.html.

Include the DataGridXL Javascript file in your HTML page. The most common way is to place a <script> tag inside your document <head> tag. (You can also place it just before your closing </body> tag.)

HTML — index.html

<!DOCTYPE html>
<html>
<head>
	<title>My Web App</title>
	<script src="https://code.datagridxl.com/datagridxl.js"></script>
</head>
<body>
	...
</body>
</html>

Next step: place an empty <div> inside the<body> of your web page. This empty div will be the container for your data grid. Make sure to give it an id attribute. In this example, we name our div "grid".

HTML — index.html

<!DOCTYPE html>
<html>
<head>
	<title>My Web App</title>
	<script src="https://code.datagridxl.com/datagridxl.js"></script>
</head>
<body>
	<div id="grid"></div>
</body>
</html>

Your DataGridXL container needs a width & height. The width & height will act as your grid's viewport. If your div lacks dimensions (or if it's displayed as inline), your DataGridXL instance will not be visible.

HTML — index.html

<!DOCTYPE html>
<html>
<head>
	<title>My Web App</title>
	<script src="https://code.datagridxl.com/datagridxl.js"></script>
</head>
<body>
	<div id="grid" style="width:100%;height:400px;"></div>
</body>
</html>

You don't have to write inline styles of course. Instead, you can define your width & height in a <style> block or in an external CSS file:

CSS

#grid {
	width: 100%;
	height: 400px;
}

You can use any CSS unit here, it doesn't have to be pixel values. Viewport (vw, vh) values are fine as well; the grid will automatically resize along with your containing div.

Let's add some data

You're now ready to display your first data grid! The DataGridXL constructor takes two parameters: the id of your <div> container (string) and an options object { ... }.

Javascript

var options = {
	data: [
		[1, 2, 3],
		[4, 5, 6],
		[7, 8, 9]
	]
};

var grid = new DataGridXL("grid", options);

All you really need to do to display a basic grid is pass data. You can supply your data as a 2D array or as an array of objects (JSON style). In our example, we use a simple 2D array.

Final code

HTML — index.html

<!DOCTYPE html>
<html>
<head>
	<title>My Web App</title>
	<script src="https://code.datagridxl.com/datagridxl.js"></script>
</head>
<body>
	<div id="grid" style="width:100%;height:400px;"></div>
	<script>
		var options = {
			data: [
				[1, 2, 3],
				[4, 5, 6],
				[7, 8, 9]
			]
		};
		var grid = new DataGridXL("grid", options);
	</script>
</body>
</html>

Result

That's all the code you need! Now open index.html in your browser and this is what you should see:

Result — index.html

Try editing the values. Use your keyboard, your mouse. See how it works on touch screens. If you know Microsoft Excel or Google Spreadsheets it should feel familiar & comfortable.

This is just a little 3×3 data table. DataGridXL can handle thousands of rows and 60+ columns. You can customize your grid's theme, add custom context menu items, you can hook up your grid so it automatically updates a line chart, etc, etc.

Docs

Getting Started

How To's

Frameworks

How it's Made

Misc.

Getting Started

Let's add some data

Final code

Result

Further reading

Leave email to receive latest updates!