Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-touch.js"></script>
  
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.js"></script>
  
  <script src="https://rawgit.com/angular-ui/ui-grid.info/gh-pages/release/ui-grid-unstable.min.js"></script>
  
  <link rel="stylesheet" href="https://rawgit.com/angular-ui/ui-grid.info/gh-pages/release/ui-grid-unstable.min.css">
  
  
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app" ng-controller="myCtrl">
  <div class="grid" ui-grid="gridOptions" ui-grid-expandable ui-grid-selection ui-grid-auto-resize></div>
</body>
</html>
 
app = angular.module 'app', [
  'ui.grid'
  'ui.grid.expandable'
  'ui.grid.selection'
  'ngTouch'
  'ngAnimate'
]
​
app.controller 'myCtrl', ($scope, $templateCache)->
    $templateCache.put 'subgrid.html', '<div ui-grid="row.entity.subGridOptions" ui-grid-selection ui-grid-auto-resize></div>'
​
    $scope.gridOptions =
        expandableRowHeight: 150
        virtualizationThreshold: 50
        expandableRowTemplate: 'subgrid.html'
        enableExpandableRowHeader: true
        enableRowSelection: true
        modifierKeysToMultiSelect: true
        enableRowHeaderSelection: false
        multiSelect: true
        columnDefs: [{ name: 'department' }]
​
        data: [
            {
                department: 'accounting'
                subGridOptions:
                    columnDefs: [
                        { name: 'name' }
                        { name: 'salary' }
                    ]
                    data: [
                        { name: 'Andrew', salary: 120 }
                        { name: 'Marie', salary: 130 }
                        { name: 'Augustin', salary: 100 }
                        { name: 'Tinto', salary: 89 }
                    ]
            },
            {
                department: 'IT'
                subGridOptions:
                    columnDefs: [
                        { name: 'name' }
                        { name: 'salary' }
                    ]
                    data: [
                        { name: 'Andrew', salary: 120 }
                        { name: 'Marie', salary: 130 }
                        { name: 'Augustin', salary: 100 }
                        { name: 'Tinto', salary: 89 }
                    ]
            }
            {
                department: 'Sales'
                subGridOptions:
                    columnDefs: [
                        { name: 'name' }
                        { name: 'salary' }
                    ]
                    data: [
                        { name: 'Andrew', salary: 120 }
                        { name: 'Marie', salary: 130 }
                        { name: 'Augustin', salary: 100 }
                        { name: 'Tinto', salary: 89 }
                    ]
            }
        ]
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers