Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kouyjes/b-cells
cells for big data
https://github.com/kouyjes/b-cells
big-data cell-layout cells cells-render custom-cell fixed-header fixed-table header-cell layout render resize resize-cell table table-layout
Last synced: about 1 month ago
JSON representation
cells for big data
- Host: GitHub
- URL: https://github.com/kouyjes/b-cells
- Owner: kouyjes
- Created: 2016-10-18T02:08:33.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-11T08:05:01.000Z (over 5 years ago)
- Last Synced: 2024-10-28T02:14:49.265Z (about 2 months ago)
- Topics: big-data, cell-layout, cells, cells-render, custom-cell, fixed-header, fixed-table, header-cell, layout, render, resize, resize-cell, table, table-layout
- Language: JavaScript
- Homepage:
- Size: 311 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# b-cells
B-cells is a component for rendering big data
## Demo
[Demo url](https://kouyjes.github.io/b-cells/examples/table.html)
## Get Starting
### Define CellsModel
1.Init CellsModel
```javascript
var cellsModel = new HERE.UI.CELL.CellsModel();
```
2.Init Header
```javascript
var header = {
height:50, // define header height
minHeight:100,// define min height of header
fields:[]
};
// Define header field
var field = {
name:'', // define column header name
width:'', // define width absolute width,or relative width,eg 200px or 20%
minWidth:'',// define min width of column
maxWidth:'',
//render:Function define render function
style:{
backgroundColor:'' // define background color
}
};
header.fields.push(field);
```
2.Init Rows
```javascript
var rows = [];
// Define row
var row = {
height:'10%',// define row height
minHeight:'100px'
};
// define row fields
var fields = [];
fields.push({
value:'row text',
html:'',// define html value
//render:Function(cell),define render function
style:{
'background-color':'#ccc'
}
});
row.fields = fields;
rows.push(row);
```
3.Append header and rows to cellsModel
```javascript
cellsModel.header = header;
cellsModel.rows = rows;
```
4.Init Cells
```javascript
var tableCell = new HERE.UI.CELL.Cells(cellsModel1,{
renderTo:'#table1',// dom selector
rowResize:true, // if row resizable
colResize:true, // if column resizable
scrollY:true, // if scroll Y
scrollX:false, // if scroll X
customScroll:null // use default scrollbar if null
/*
{
width:12,height:13,hTrackColor:'',
hScrollColor:'',
vTrackColor:'',
vScrollColor:'',
autoHideX:true,
autoHideY:true,
timeout:1300
}
*/
});
```
5.Render cells
```javascript
tableCell.render();
```
6.Cells Event
- Click Event (triggered when click cells area)
```javascript
tableCell.addEventListener('click', function (e) {
})
```
- Cells click Event (triggered when click a cell)
```javascript
tableCell.addEventListener('cellClick', function (e) {
});
```
- Scroll event (triggered when scrolling)
```javascript
tableCell.addEventListener('scroll', function (e) {
});
```