Add Jade Template Support

[johntom]

Hi,
I'm trying to use angular-table in a nodejs/jade enviornment followed the documentation and using both css files provided in the demo. The following displays the data but only display a table height of 32.
TIA
John

Jade file
p
#inside
#header
input.search-query(style='width:100px', type='text', ng-model='filterText', placeholder='Filter')

#main-content



    .span8.body-content




        angular-table(model='types',filter-query-model='filterText', default-sort-column='id',class="demoTable", style="padding-bottom: 1px;")
          header-row

            header-column(sortable='true', sort-field-name='id', class="demoHeaderColumn")
                    div(style='display: inline-block;') Id
                    sort-arrow-ascending
                    sort-arrow-descending
            header-column(sortable='true', sort-field-name='name', class="demoHeaderColumn")
                    | Name

            row(on-selected='handleRowSelection(row)', selected-color='#87cefa', even-color='#ffffff', odd-color='#eeeeee')
                    column {{ row.id }}
                    column {{ row.name }}

Html
Html

1	GLBI
10	ALBI & ALPD
11	Appraisal
12	Subro
13	Subro property
14	Surveillance
15	Theft
16	Collision
17	Other
2	GLPD
3	ALBI
4	ALPD
5	PIP/NO-FAULT
6	WC
7	PROP
8	GLBI & GLPD

Id

Name

[davidjnelson]

Thanks for submitting the issue John. I haven't used Jade templates before so I'm not exactly sure what the issue might be at the moment. I put this as a potential-feature-discussion.

I'm curious though, since angular already is a templating engine, why do you need jade? What's the use case for using two templating systems together?

[johntom]

Jade is the view engine of choice served from node.js, once you get used to it, it's hard to go back. At any rate not sure why jade is the culprit as node converts to html. That's why I sent the html, it just shows as 1 row in runtime. I will test some more tomorrow but it seems to pick up the header height and if I change from 32 to 320 all the row display but header is covered.
HTH

[davidjnelson]

oh that makes sense, so jade is the node templating engine, so there is still just one templating engine in the browser, being angular. Gotcha. Can you put the html in with the markdown syntax so I can see the code? The three backticks to start and end?

[johntom]

I will try again and change the html so it's not rendered.

[johntom]

I got it to work! Must fiddle with tab settings for each row.
p
#inside
#header
input.search-query(style='width:100px', type='text', ng-model='filterText', placeholder='Filter')
#main-content

       .span11.body-content
              angular-table(model='types',filter-query-model='filterText', default-sort-column='id',class="demoTable", style="height:600px;padding-bottom: 1px;")

          header-row

           header-column(sortable='true', sort-field-name='id', class="demoHeaderColumn")
                    div(style='display: inline-block;') Id
                    sort-arrow-ascending
                    sort-arrow-descending
           header-column(sortable='true', sort-field-name='name', class="demoHeaderColumn")
                    | Name

          row(on-selected='handleRowSelection(row)', selected-color='#87cefa', even-color='#ffffff', odd-color='#eeeeee')
                    column {{ row.id }}
                    column {{ row.name }}

Thanks

[davidjnelson]

Nice!! This is awesome John.

[davidjnelson]

added to documentation.

[airtonix]

i wish it was possible to view the source of peoples comments...

Saying tabs are important and then presenting a code snippet that fails to represent those important tabs is slightly frustrating.