JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.min.js"></script>
<div ng-controller="MainCtrl as ctrl" ng-app="app">
    <button id="expandAll" type="button" class="btn btn-success" ng-click="ctrl.expandAll()">Expand All</button>
    <button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="ctrl.toggleRow(0)">Toggle First Row</button>
    <button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="ctrl.toggleRow(1)">Toggle Second Row</button>
    <button id="toggleExpandNoChildren" type="button" class="btn btn-success" ng-click="ctrl.toggleExpandNoChildren()">Toggle Expand No Children</button>
    <div id="grid1" ui-grid="ctrl.gridOptions" ui-grid-tree-view class="grid"></div>
</div>

CSS

.grid {
        width: 500px;
        height: 400px;
    }

JavaScript

var app = angular.module('app', ['ui.grid', 'ui.grid.treeView']); //'ngAnimate', 'ngTouch',

    app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function ($scope, $http, $interval, uiGridTreeViewConstants) {
        var vm = this;
        // $scope.gridOptions = {
        vm.gridOptions = {
            enableSorting: true,
            enableFiltering: true,
            showTreeExpandNoChildren: true,
            columnDefs: [{
                name: 'name',
                width: '30%'
            }, {
                name: 'gender',
                width: '20%'
            }, {
                name: 'age',
                width: '20%'
            }, {
                name: 'company',
                width: '25%'
            }, {
                name: 'state',
                width: '35%'
            }, {
                name: 'balance',
                width: '25%',
                cellFilter: 'currency'
            }],
            onRegisterApi: function (gridApi) {
                vm.gridApi = gridApi;
                // check how to deregister the rowExpanded event
                // e.g. in $scope.$on('$destroy', ...)
                vm.gridApi.treeBase.on.rowExpanded(null, function (row) {
                    if (row.entity.$$hashKey === vm.gridOptions.data[50].$$hashKey && !vm.nodeLoaded) {
                        $interval(function () {
                            vm.gridOptions.data.splice(51, 0, {
                                name: 'Dynamic 1',
                                gender: 'female',
                                age: 53,
                                company: 'Griddable grids',
                                balance: 38000,
                                $$treeLevel: 1
                            }, {
                                name: 'Dynamic 2',
                                gender: 'male',
                                age: 18,
                                company: 'Griddable...