Docs
Getting Started
Working with Data
How Tos
Frameworks
How it's Made
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.)
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
<script src="https://code.datagridxl.com/datagridxl2.js"></script>
</head>
<body>
...
</body>
</html>Alternatively, use npm install.
npm install @datagridxl/datagridxl2Then import the DataGridXL class from the file:
import DataGridXL from "@datagridxl/datagridxl2";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".
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
<script src="https://code.datagridxl.com/datagridxl2.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.
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
<script src="https://code.datagridxl.com/datagridxl2.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:
#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> (string) and an options object.
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
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
<script src="https://code.datagridxl.com/datagridxl2.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:
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 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.
Further reading
Don't get too excited yet! Boring things first. Continue reading and learn the different ways of passing data.
