Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manifestwebdesign/mf-grid
Simple fixed-header grid for Angular JS
https://github.com/manifestwebdesign/mf-grid
Last synced: 15 days ago
JSON representation
Simple fixed-header grid for Angular JS
- Host: GitHub
- URL: https://github.com/manifestwebdesign/mf-grid
- Owner: ManifestWebDesign
- License: mit
- Created: 2014-04-10T05:02:13.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-01-10T19:36:57.000Z (about 8 years ago)
- Last Synced: 2025-01-10T20:47:29.148Z (19 days ago)
- Language: JavaScript
- Size: 439 KB
- Stars: 3
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#MF Grid
A simple fixed-header grid for Angular JS. mf-grid was created as a lightweight alternative to [NG Grid](http://angular-ui.github.io/ng-grid/).
## Installation
```bower install angular-mf-grid```
or
```git clone [email protected]:ManifestWebDesign/mf-grid```
## Usage
```
```
## Example
#### Controller
```javascript
"use strict";
angular.module("app", ["mfGrid"]).controller("MainCtrl", ["$scope",
function($scope) {
$scope.gridOpts = {
data: 'results',
headerRowHeight: 32,
columnDefs: [
{field: 'name', width: 110, displayName: 'Name'},
{field: "instrument === null ? '-' : instrument", width: 110, displayName: 'Instrument'}
]
};
$scope.results = [
{name: 'John', instrument: 'Guitar'},
{name: 'Paul', instrument: 'Bass and Guitar'},
{name: 'George', instrument: 'Guitar'},
{name: 'Ringo', instrument: null}
];
}]);
```
#### View
```html
Band Members
```
## Options
Option | Default Value | Definition
------ | -------------- | ---------
afterSelectionChange | null | Callback for when you want to validate something after selection.
columnDefs | null | Definitions of columns as an array []. If not defined columns are auto-generated from data.
data | [] | Data being displayed in the grid. Each item in the array is mapped to a row being displayed.
enableSorting | true | Enables or disables sorting in grid.
headerColumnClick | null | Trigger this function when the header column is clicked. This overrides the default sorting functionality.
headerRowHeight | 0 | The height of the header row in pixels.
headerRowTemplate | See below | Define a header row template for further customization.
multiSelect | true | Set this to false if you only want one item selected at a time.
rowClick | null | Function to trigger when the row clicks. If null, there will be no hover style on the rows.
rowHeight | 30 | Row height of rows in grid.
rowTemplate | See below | Row template
selectAll | See below | Function that is appended to the specific grid options for users to programmatically set the selected value all of the rows to the state passed. | Yes=ngCell {{col.cellClass}}>
| Define a row Template to customize output.
selectedItems | [] | All of the items selected in the grid. In single select mode there will only be one item in the array.
selectItem | See below | Function that is appended to the specific grid options for users to programmatically select the row based on the index of the entity in the data array option.
showHeaderRow | true | Control the visibility of the header row.
showSelectionCheckbox | false | Row selection check boxes appear as the first column.
sortColumn | null | A column object to specify initial sorting column.
sortAsc | null | Boolean for initial sorting to be in Ascending order.
trackItemBy | null | Primary tracking column for row
virtualizationInterval | 2 | Number of rows.
virtualizationOverflow | 4 | Number of rows to virtualize outside of the viewport.
virtualizationThreshold | 50 | The threshold in rows at which to force row virtualization on.
## Template Options and functions
#### rowTemplate
```
```
#### headerRowTemplate
```
'
{{ column.displayName }}
```
#### selectAll
```
function(selected) {
if (!selected) {
this.allItemsSelected = false;
this.selectedItems.length = 0;
return;
}
for (var i = 0, l = this._data.length; i < l; ++i) {
this.selectedItems.push(this._data[i]);
}
this.allItemsSelected = true;
}
```
#### selectItem
```
function(item, selected) {
if (this.multiSelect === false) {
this.selectedItems.length = 0;
this.selectedItems.push(item);
this.updateCheckAll();
return;
}
var index = this.selectedItems.indexOf(item),
isSelected = index !== -1;
if ((selected && isSelected) || (!selected && !isSelected)) {
return;
}
if (selected) {
this.selectedItems.push(item);
} else {
this.selectedItems.remove(index);
}
this.updateCheckAll();
}
```