CODEWITHSUNDEEP
angularjssmart-table
sch
sch

Reputation: 1388

angular smart-table plugin/directive wont work

I am trying to use smart-tables, Select row plugin, I have added 'smart-table' to my application, like so var myApp = angular.module('myApp', ['ui.bootstrap','smart-table']);

I have also changed the first line of the directive (since it didn't work to just copy-paste it), I changed this: ng.module('smart-table').directive('stSelectRow', ['stConfig', function (stConfig)

To this: myApp.directive('stSelectRow', ['stConfig', function (stConfig) {

In my html I have this

<table st-table="displayedCollection" st-safe-src="safeCollection" class="table">
  <thead>
  <tr>
    <th>Title</th>
    <th>FieldOne</th>
    <th>FieldTwo</th>
    <th>FieldThree</th>
  </tr>
  </thead>
  <tbody>
  <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
    <td> {{row.Title}} </td>
    <td> {{row.FieldOne}} </td>
    <td> {{row.FieldTwo}} </td>
    <td> {{row.FieldThree}} </td>
  </tr>
</tbody>

If I remove the st-select-row="row" st-select-mode="multiple" the table works, but obviously not the row selection

I am guessing I'm missing some dependency or something, I have only added smart-table.min.js to my application, but I think that should be enough, the directive (select row plugin) is added inside my app.js file. What could it be?

Upvotes: 0

Views: 425

Answers (1)

Steve
Steve

Reputation: 181

It is because the documentation on the site isn't exactly clear. But it does say

...and the class attribute st-selected is set on the tr element.

You have to define the CSS for st-selected for it to "work":

.st-selected{
    background: #216eff !important;
    color: white !important;
}

Upvotes: 2

Related Questions