JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<script src="http://raw.githubusercontent.com/lorenzofox3/Smart-Table/master/dist/smart-table.min.js"></script>
<h1>smart-table with dynamic style attribute <br />does not work on IE</h1>

<div ng-app="app" ng-controller="mainCtrl">
    <table st-table="displayedCollection" st-safe-src="rowCollection">
        <thead>
            <tr>
                <th ng-repeat="column in columns" style="{{ column.style }} " st-sort="{{ column.name }}">{{ column.label }}</th>
                <th style="background: yellow">C</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in displayedCollection">
                <td ng-repeat="column in columns" style="{{ column.style }}"><span class="field">{{ row[column.name] }}</span>
                </td>
                <td style="background: yellow">YELLOW (static value)</td>
            </tr>
        </tbody>
    </table>
</div>


<script type="text/javascript">
/** 
* @version 1.4.7
* @license MIT
*/
!function(t,e){"use strict";t.module("smart-table",[]).run(["$templateCache",function(t){t.put("template/smart-table/pagination.html",'<div class="pagination" ng-if="pages.length >= 2"><ul class="pagination"><li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a ng-click="selectPage(page)">{{page}}</a></li></ul></div>')}]),t.module("smart-table").controller("stTableController",["$scope","$parse","$filter","$attrs",function(t,a,s,n){function r(t){return[].concat(t)}function i(){d=r(c(t)),m===!0&&b.pipe()}var c,l,o=n.stTable,u=a(o),p=u.assign,g=s("orderBy"),f=s("filter"),d=r(u(t)),h={sort:{},search:{},pagination:{start:0}},m=!0,b=this;n.stSafeSrc&&(c=a(n.stSafeSrc),t.$watch(function(){var e=c(t);return e?e.length:0},function(t){t!==d.length&&i()}),t.$watch(function(){return c(t)},function(t,e){t!==e&&i()})),this.sortBy=function(t,e){return h.sort.predicate=t,h.sort.reverse=e===!0,h.pagination.start=0,this.pipe()},this.search=function(t,e){var...

CSS

table {
    border-collapse:collapse;
}
th, td {
    border: 1px solid black;
    padding: 5px;
}
th {
    cursor: pointer;
}
.st-sort-ascent:after {
    content:'\25B2';
}
.st-sort-descent:after {
    content:'\25BC';
}

JavaScript

angular.module('app', ['smart-table'])

    .controller('mainCtrl', function ($scope) {
    $scope.rowCollection = [{
        "firstName": "RED",
            "lastName": "GREEN"
    }];
    $scope.displayedCollection = [].concat($scope.rowCollection);
    $scope.columns = [{
        name: 'firstName',
        label: 'A',
        style: 'background: red'
    }, {
        name: 'lastName',
        label: 'B',
        style: 'background: green'
    }];
});