1

I'm trying to use an array as data source for some of my column in a HandsoneTable created using Angular directives. But when using common array notation (name[0]) for the data attribute nothing is rendered in that particular table cell. Am I doing something wrong or is this not supposed to work the way I want it to?

My data source:

$scope.data = [
    {
        'name': ['Bob', 'Bobson'],
        'email': 'bob@sample.com'
    },
    {
        'name': ['John', 'Johnson'],
        'email': 'john@sample.com'
    }
];

And my template:

<div ng-app="Test">
    <div ng-controller="tableCtrl">
        <hot-table datarows="data">
            <hot-column data="name[0]"></hot-column>
            <hot-column data="name[1]"></hot-column>
            <hot-column data="email"></hot-column>
        </hot-table>
     </div>
</div>

See simple example here: https://jsfiddle.net/9qzo3wnv/4/

madcap
  • 87
  • 2
  • 12

1 Answers1

1

Technically it is not possible to use the array notation (name[0]) on the data attribute but you have several other options to accomplish something:

Solution 1

Convert your data to an object instead.

Example: https://jsfiddle.net/4yuv1vyu/

$scope.data = [
  {
    'name': {0:'Bob',1:'Bobson'},
    'email': 'bob@sample.com'
  },
  {
    'name': {0:'John',1: 'Johnson'},
    'email': 'john@sample.com'
  }
];

Solution 2

Convert the array to an object with a function in controller:

Example: https://jsfiddle.net/vypahad6/

Details: https://stackoverflow.com/a/4215753/3298029

$scope.toObject = function(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}

for (var d in $scope.data) {
  $scope.data[d].name = $scope.toObject($scope.data[d].name);
}

Solution 3

Make use of the custom cell renderer abilities of handsontable:

Example: https://jsfiddle.net/sbkwcfr5/

Details: http://docs.handsontable.com/0.24.1/demo-custom-renderers.html

View:
<hot-column data="name" renderer="customRendererName"></hot-column>

Controller:
$scope.customRendererName = function(instance, td, row, col, prop, value, cellProperties) {
  var html = Handsontable.helper.stringify(value[0]);
  td.innerHTML = html;
  return td;
  return value[0];
}
Community
  • 1
  • 1
d.h.
  • 1,206
  • 1
  • 18
  • 33
  • I must have failed saving my selected settings on my Fiddle, I know I have run the code. Using the notation you propose does not really solves my problem, since I get the data from an external source and would like to not have to rearrange it. – madcap Mar 17 '16 at 08:41
  • If you don't want to rearrange it you maybe could convert it to an object like described here: http://stackoverflow.com/a/4215753/3298029 – d.h. Mar 17 '16 at 09:04
  • Another solution is to use the cell renderer abilities of handsonable. Here is an example I created for your case: https://jsfiddle.net/sbkwcfr5/ – d.h. Mar 18 '16 at 13:15
  • I guess the correct answer for my question would be "No, it's not supposed to work with array indexes in the data attribute of the hot-column tag". – madcap Mar 21 '16 at 06:53
  • Did you even look at solution Nr 3? – d.h. Mar 21 '16 at 07:28
  • I updated my answer. You are probably right that it is indeed not possible to use an array on the data attribute of the hot-column. But solution 2 and 3 are perfectly valid as a workaround on displaying something. And isn't that the goal to get an array working in that way your view is displaying the correct results?! – d.h. Mar 21 '16 at 10:58
  • I wanted to know if it was possible to just put the index in the data attribute, that way I could get rid of my work-around and get cleaner code. My work-around is quite similar to your first solution. – madcap Mar 21 '16 at 11:03
  • If that was your goal than you should indeed go with solution Nr 1. If you are limited to arrays than solution Nr 2 or 3 are the way to go I suppose. – d.h. Mar 21 '16 at 11:09
  • the handsontable takes array like this [ [1,2,3,4], [1,2,3,4]] how to say 4 is html cell – Mahmoud Magdy Jun 25 '23 at 10:13