A modular javascript grid library.
It is a work in progress, it is already working and powerful, but some features are not implemented, need improvement or may change until the stable version. Moreover the doc is not available at the moment.
Zero table depends on jquery.
ZeroTable was built to be super configurable. But some default options are provided to allow quick start with the library
As a starting point, you want to include jquery, and the files build/zerotable.min.js and build/zerotable.min.css.
The following sample will give you the most basic example of the library :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Zero table</title>
<link rel="stylesheet" type="text/css" href="zero-table.min.css"/>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="zero-table.min.js"></script>
</head>
<body>
<div id="table" style="height:200px;"></div>
<script>
$(function(){
var config = {
columns: [
{
name: "firstname"
},
{
name: "lastname"
},
{
name: "age"
}
]
};
var data = [
{
firstname: "bart",
lastname : "simpsons"
},
{
firstname: "homer",
lastname : "simpsons"
},
{
firstname: "lisa",
lastname : "simpsons"
},
{
firstname: "marge",
lastname : "simpsons"
}
];
var tableInstance = new ZeroTable.TableInstance(config, data);
$("#table").append(tableInstance.draw());
setTimeout( function(){tableInstance.draw()}, 1500);
});
</script>
</body>
</html>More information on the configuration : TODO DOC
short FAQ (LINKS TODO) :
- How to make my columns orderable
- How to make my rows selectable
- How to customize cell rendering
- How to add row actions
- How to add group row actions
- How to search accross the table
- How to use an ajax data source
If you want to contribute here are the steps to build the library :
npm install
grunt dev-compile
# alternatively you can watch for changes
grunt watch The files are generated in the directory build
To build dist files to be published in the repository run:
npm install
grunt dist