I am using Smart-table to show reports to the user with Angular js.
Now,I want to customize table header and want a colspan in smart table 's header.
Does anyone know about this?Is it possible? Please share example,plunker if anyone have achieved this
Answer
You can have whatever template you want in cellTemplate attr, where I have concatenated both first name and last name.
Like I have used,
scope.columnCollection = [
{ label: 'Name', map: 'FirstName', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.FirstName.$error.required">Required!</span>',cellTemplate:'<div class="name"><span>{{dataRow.FirstName +" "+dataRow.LastName}}</span><div>'}, //have whatever template you want and your custom css
//{ label: 'Last Name', map: 'LastName' },
{ label: 'User Name', map: 'UserName', validationAttrs: 'required' },
{ label: 'Password', map: 'Password', noList: true, editType: 'password' },
{ label: 'Customer', map: 'CustId', optionsUrl: '/GetCusts', editType: 'radio' },
{ label: 'Role', map: 'RoleId', optionsUrl: '/GetRoles', editType: 'select', defaultTemplate: '<option value="" ng-hide="dataRow[column.map]">---</option>', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.RoleId.$error.required">Required!</span>' }, // NOTE: small hack which enables defaultTemplate option :)
{ label: 'E-mail', editType: 'email', map: 'Email' },
{ label: 'Cell Phone', map: 'Mobilephone', noEdit: true, validationAttrs: 'required' },
{ label: 'Locked', map: 'IsLocked', cellTemplate: '<input disabled type="checkbox" name="{{column.map}}" ng-model="dataRow[column.map]">', editType: 'checkbox', noAdd: true }
];
In css you can have your custom Css.
Please have a look at this plunker
Hope this solves your problem :)