{"action":"created","issue":{"url":"https://api.github.com/repos/stevenrskelton/sortable-table/issues/34","labels_url":"https://api.github.com/repos/stevenrskelton/sortable-table/issues/34/labels{/name}","comments_url":"https://api.github.com/repos/stevenrskelton/sortable-table/issues/34/comments","events_url":"https://api.github.com/repos/stevenrskelton/sortable-table/issues/34/events","html_url":"https://github.com/stevenrskelton/sortable-table/issues/34","id":57931294,"number":34,"title":"How to run time add classes, attributes, and styles for cells?","user":{"login":"masaoliou","id":696936,"avatar_url":"https://avatars.githubusercontent.com/u/696936?v=3","gravatar_id":"","url":"https://api.github.com/users/masaoliou","html_url":"https://github.com/masaoliou","followers_url":"https://api.github.com/users/masaoliou/followers","following_url":"https://api.github.com/users/masaoliou/following{/other_user}","gists_url":"https://api.github.com/users/masaoliou/gists{/gist_id}","starred_url":"https://api.github.com/users/masaoliou/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/masaoliou/subscriptions","organizations_url":"https://api.github.com/users/masaoliou/orgs","repos_url":"https://api.github.com/users/masaoliou/repos","events_url":"https://api.github.com/users/masaoliou/events{/privacy}","received_events_url":"https://api.github.com/users/masaoliou/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":14,"created_at":"2015-02-17T14:37:24Z","updated_at":"2015-02-25T11:42:38Z","closed_at":null,"body":"I need to dynamically add classes, attributes, and styles for cells. According to examples `row-template.html` and `dom-elements.html`, it seems to me that sortable-table requires occurences of <sortable-column> and `<td></td>` to be staticly coded like this:\r\n\r\n```html\r\n<sortable-column name=\"fruit\">Fruit</sortable-column>\r\n<sortable-column name=\"alice\">Alice</sortable-column>\r\n \r\n<td style=\"width:10%;\"><input type=\"number\" value=\"{{record.row.alice}}\" style=\"text-align:right;\"></td>\r\n```\r\n\r\nMy problem is that these occurences are unknown in design time. They are determined by input JSON data. Hence I have this clumsy design:\r\n\r\n```html\r\n<sortable-table rowTemplate=\"rt\">\r\n\t<template repeat=\"{{MyData.columns}}\">\r\n\t\t<sortable-column class=\"{{color}}\">{{title}}</sortable-column>\r\n\t</template>\r\n\t<template id=\"rt\" bind=\"{{MyData.data as data}}\">\r\n\t\t<template repeat=\"{{c,i in data}}\">\r\n\t\t\t<td><input type=\"{{MyData.columns[i].type}}\" required?=\"{{MyData.columns[i].required}}\" value=\"{{record.row[i]}}\" style=\"text-align:{{MyData.columns[i].type == 'number' ? 'right' : 'left'}};\"></td>\r\n\t\t</template>\r\n\t</template>\r\n</sortable-table>\r\n```\r\n\r\n```javascript\r\n<script>\r\ndocument.querySelector(\"sortable-table\").MyData={\r\n\tcolumns:[\r\n\t\t{title:\"fruit\",type:\"text\",color:\"red\",required:true}\r\n\t\t,{title:\"alice\",type:\"number\",color:\"blue\",required:true}\r\n\t\t,{title:\"bill\",type:\"number\",color:\"yellow\"}\r\n\t\t,{title:\"casey\",type:\"number\",color:\"green\"}\r\n\t]\r\n\t,data:[\r\n\t\t[\"apple\",4,10,2],[\"banana\",0,4,0],[\"grape\",2,3,5],[\"pear\",4,2,8],[\"strawberry\",0,14,0]\r\n\t]\r\n};\r\n</script>\r\n```\r\nNotice that I avoid adding column names in input JSON data in order to save some bandwidth.\r\n\r\nMy code has one big issue - the value entered by user in `<input></input>` loses 2-way data binding!\r\n\r\nWhat is the correct design patten in my case?\r\nThank you!"},"comment":{"url":"https://api.github.com/repos/stevenrskelton/sortable-table/issues/comments/75946826","html_url":"https://github.com/stevenrskelton/sortable-table/issues/34#issuecomment-75946826","issue_url":"https://api.github.com/repos/stevenrskelton/sortable-table/issues/34","id":75946826,"user":{"login":"masaoliou","id":696936,"avatar_url":"https://avatars.githubusercontent.com/u/696936?v=3","gravatar_id":"","url":"https://api.github.com/users/masaoliou","html_url":"https://github.com/masaoliou","followers_url":"https://api.github.com/users/masaoliou/followers","following_url":"https://api.github.com/users/masaoliou/following{/other_user}","gists_url":"https://api.github.com/users/masaoliou/gists{/gist_id}","starred_url":"https://api.github.com/users/masaoliou/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/masaoliou/subscriptions","organizations_url":"https://api.github.com/users/masaoliou/orgs","repos_url":"https://api.github.com/users/masaoliou/repos","events_url":"https://api.github.com/users/masaoliou/events{/privacy}","received_events_url":"https://api.github.com/users/masaoliou/received_events","type":"User","site_admin":false},"created_at":"2015-02-25T11:42:38Z","updated_at":"2015-02-25T11:42:38Z","body":"Behaviors of `checkbox` and `multiSelection` become unstable if rows and columns are dynamically generated. After adding properties `checkbox=\"true\" multiSelect=\"false\"` to element `<sortable-table>` in the two examples you provided,\r\n\r\n* Check boxes does not respond to the first mouse click. They start to respond only after the second and more mouse clicks.\r\n* Single row selection is not enforced. Multiple rows are always allowed to be selected even though property `multiSelect` is explicitly set to `false`.\r\n\r\nEnlightenment will be greatly appreciated!"}}