Column configuration
The columns configuration is an array of Json object, each object is one column. This array is in the general configuration of the datatable, his name is columns.
{
...
"columns" : [{
"header":"myHead",
...
},
{
"header":"myHead2",
...
},
...
],
...
}
Options
Header
The text of the header
"header" : "The name"
Property
The property you want to bind in the cells
"property" : "The property" or angular expression or function(){}
Position
Position of the column
"position" : 0/1/2/3...
Filter
The AngularJS filter(s) to apply to the property before the display
"filter" : "filter [| filter...]"
Edit
If the column is editable set to true else set to false
"edit" : boolean
Convert value
If the column need convertion
"convertValue":{
"active":false, //True if the value have to be converted when displayed to the user
"displayMeasureValue":"",//The unit display to the user, mandatory if active=true
"saveMeasureValue":"" //The unit in database, mandatory if active=true
},
Hide
If the column can be hide by the user
"hide" : boolean
Order
If the column can be order by the user
"order" : boolean
Merge Cells
merge cell with the same values in the column
"mergeCells" : boolean
Type
The column input type
"type" : "text"/"textarea"/"number"/"date"/"img"/"file"
Choice in list
When the column is in edit mode, the edition is a list of choices or not
"choiceInList" : boolean
List style
If choiceInList:true, listStyle:"select" is a select input, listStyle:"radio" is a radio input
"listStyle" : "select"/"radio"
Possible values
The list of possible choices to display in the list
"possibleValues" : [{code: 1, name: "choice1"}, {code: 2, name: "choice2"}, ...]
Format
The format used to diplay the data
"format" : "number"/"date"/"datetime"
Advanced features
Custom template header
To put an html template on header to add some functions or design
"headerTpl" : "<html>"
Render
To change the template of the cells in the column (override the property)
"render" : "<span ng-bind='value.data'></span>" or function(value, line){ return "html"}
Edit directives
Add directive to the html input when editing, for example "editDirectives":'ng-keydown="scan($event,value.data)"'. udt provides the
udt-textarea-resize
directive to allow textareas to be automatically resized to their content when edited. Use it as follow:editDirectives: ' udt-textarea-resize '
.
"editDirectives" : "directive [| directive...]"
Extra headers
The headers that can be on top of the default headers of the column, level is the key, the header label the value
"extraHeaders" : {"0":"Inputs", "1":"test", ...}
Td class
Function with data and property as parameter than return css class or just the css class
"tdClass" : function(data, property){}
Group
If column can be used to group data
"group" : boolean
Group method
used with the group attribute to execute an aggregate fonction on the column during group
"groupMethod" : "sum"/"average"/"countDistinct"/"count:true|false"/"collect:true|false"
- sum : used to sum number column
- average : used to compute an average on number column
- countDistinct : used to count distinct element
- count:true|false : used to count element. with true option as same as countDistinct, false count all element; default : false.
- collect:true|false : used to put in list each element. with true collect only once each element otherwise collect all elements; default false.
- unique : used to display only one valeur if the same on all lines otherwise display #MULTI.
Default value
If the value of the column is undefined or "" when the user edit, this value show up
"defaultValue" : "theDefaultValue"
Url
lazy data, load the data form the server for each cell of the colum
"url" : "theUrlToGetTheData"
mergeCells
if you want to merge cell with same value, experimently features
"mergeCells" : boolean
required
if a cell is required during edition
"required" : boolean or function that return boolean
localSearch
if you want active a search on the column see localSearch configuration "localSearch":boolean by default false.