agrid
Installation
npm install --save agrid
Once installed you need to import our main module:
; @
Usage:
Basic:
Bind the items you need to display to the [items] property of component and specify columns
- colName - property name
- colTitle - title of column (text in header)
- resizable - column can be resized or not (true by default)
- width - width of column in pixels
- widthUnit - units of width, can be px or %, default px
Cell template
Specify template of column cell by setting it like this:
<!-- pass the row to the cell template --> <!-- pass the rowIndex to the cell template --> {{index+1}} {{row.gender?'male':'female'}} <!-- pass the rowElement to the cell template (for adding specific class to entire row before deleting to highlight row) --> -
Header template
Specify template of column header by setting it like this:
<!-- pass the column to the header template --> Name {{col.width}}
Groupping
Specify template of row groups by setting it like this:
<!-- - set groupping fields (by tableState.groupFields), tableState.groupFields can be a string name of single field, and array of multiple fields names - optionally set initial collapsed groups (collapsed tableState.groupFields), tableState.groupFields can be a string name of single field, and array of multiple fields names - pass instance of group object (let group) - groupChild (instance of group childs array) - grLevel (groupping level) - groupCollapsed (state of group - collapsed/expanded) - group.toggleCollapse() (collapse/expand group) --> {{groupCollapsed?'+':'–'}} {{group.value + ' ('+groupChild.length+') level:'+grLevel}}
Row detail
Specify the row detail template by setting it like this:
<!-- - row - current row - index - index of current row - expandedrows - bind array of rows (if current row isin this array - detail is expanded) --> save <!-- tableState.toggleRow(row) - add row to expanded rows array --> {{tableState.expandedRows.indexOf(row)===-1?'+':'–'}}
Events
<!-- - onBodyScroll - body scroll event - onRowClick - row click event - onRowDoubleClick - row double click event -->
Properties
<!-- - checkedProperty - name of field in item for setting checked state for it - onRowClick - name of field in item for setting selected state for it - showHeader - show header or not -->