Reusable ngTable - table or row template

[adamcmoore]

I need to use the same ngTable accross my application, though with different data.

Attempting to nest ngTable inside a directive and pass the data to it did not work.

My second attempt to use a directive for the table row has also failed to work. Though the rows render correctly, the table headers are not rendered correctly and are missing the sorting functionality.

<table ng-table="jobListTableParams" show-filter="false" class="table">
    <tbody>
        <tr jobs-row ng-repeat="job in $data" 
            ui-sref="jobs.list.detail({jobId: job.id, query: queryName})">                                      
        </tr>
    </tbody>
</table>

appDirectives.directive('jobsRow', function ($compile) {
    return {
        restrict: 'A',
        priority: 9999,
        templateUrl: 'app/partials/jobs/tableRow.html',
   }
});

Is there currently a way to make this work? It would be a nice feature to add in future, allowing for a template to be used.

[gatapia]

+1, would be great, I have copied and pasted my table multiple times throughout my app. Using directives both inside (with the column definitions) and around ng-table does not work

[christianacca]

The problem comes down to the fact that ng-table requires your <td>'s defining your grid columns to be declared in the html during the angular compile phase

Possible solution

With that in mind here's a long shot of what might work:

1. create an attribute based directive that references a field on your controller that has the html for your row. Here's what it could like in use: <table ng-table="yourTableParams" row-template-html="vm.rowHtml">
2. Make sure that the rowTemplateHtml directive has a priority greater than ngTable so that it run's before ngTable
3. Implement a compile function in the rowTemplateHtml (rather than the standard link function)
4. Within the rowTemplateHtml compile function use the $compile service to compile the html for the row and append this to the tElement (==<table> tag)

In theory when ngTable directive runs after the rowTemplateHtml, it should "see" the <td> tags from your row template, and then work as normal.

Your controller will have the responsibility to loading the html for your row. Because the loading of the row template is going to async you might have to add an ng-if to the <table> element to prevent angular from creating the ngTable directive until the html template has been downloaded from the server and assigned to the controller's field.

All hypothetical as I haven't tried to do it myself.

[iiosenov]

Is this issue is fixed now (perhaps with ngTableDynamic) ?

Edit (1 minute workaround used)

<!-- Example -->
<table>
    <tbody>
        <tr ng-show="false"> <!-- This row is the workaround. Hide this dummy row, otherwise it will render an empty ugly row -->
            <td data-title="'ID'" sortable="'gId'"></td>
            <td data-title="'Name'" sortable="'gName'"></td>
            <!-- proceed with all data-titles you have -->
        </tr>
        <tr ng-repeat="g in $groups" ng-your-directive></tr>
    </tbody>
</table>

Now, you will have your data-titles in place.

[karlr42]

@christianacca I have tried implementing the solution you describe, but it kind of falls down at step 4- in the compile function you won't have access to any scope, so you can't call $compile to compile your template.

Starring this issue anyway, any solution that would let me put my massive <tr ng-repeat></tr> block into a template and avoid having to copy and paste it would be very useful.

EDIT : to anyone who is interested, I solved this in my own case by just using <div ng-include="'MyBigTemplate.html'" ng-controller="LocalTableCtrl"> i.e using a different controller with its own tableParams variable any time I wanted to re-use the table. Perfectly good solution for my use case.