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

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.