Some toolbar content. Selected item: {{ctrl.selection.getActiveItem().name}}
Avatar Check Name Groups {{ ::item.name }} {{ ::subItem.name }}
import angular from 'angular'; import TableLegacyNG from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng'; angular.module('test', [TableLegacyNG]). controller('tableExample', function ($scope) { var ctrl = this; ctrl.itemsArray = [{ name: 'test1', subList: [{name: 'some group'}], iconUrl: 'https://d13yacurqjgara.cloudfront.net/users/317408/avatars/mini/Layout_Behance_Avatar_(1).jpg?1376382552' }]; for (var i = 0; i < 20; i++) { ctrl.itemsArray.push({ name: Math.random(), subList: [ {name: Math.random()}, {name: Math.random()}, {name: Math.random()} ] }); } }); body { margin: 0; }
{{item}}
import angular from 'angular'; import '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng'; body { margin: 0; }

Scroll down to see the effect

Here is sidebar content
{{ctrl.selection.getActiveItem().name}}
Some toolbar content. Selected item: {{ctrl.selection.getActiveItem().name}} Toggle toolbar
Avatar Check Name {{::item.name }}
import angular from 'angular'; import TableNG from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng'; import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng'; import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng'; import QueryAssistNG from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng'; angular.module('test', [TableNG, SidebarNG, SelectNG, QueryAssistNG]). controller('tableExample', function ($timeout, $scope) { var ctrl = this; ctrl.query = 'fooo' ctrl.isShowSideBar = true; $timeout(function () { ctrl.itemsArray = [{ name: 'test1', iconUrl: 'https://d13yacurqjgara.cloudfront.net/users/317408/avatars/mini/Layout_Behance_Avatar_(1).jpg?1376382552' }]; for (var i = 0; i < 20; i++) { ctrl.itemsArray.push({name: Math.random()}); } }, 500); ctrl.queryAssistSource = function ({query, caret, omitSuggestions}) { return { caret: caret, query: query, styleRanges: omitSuggestions ? [{ start: 0, length: 1, style: 'text' }] : [], suggestions: [{ prefix: 'login: ', option: 'test', suffix: ' ', description: 'logins', matchingStart: 0, matchingEnd: 4, caret: 2, completionStart: 0, completionEnd: 4, group: 'logins', icon: 'data:uri' }] }; }; }); body { margin: 0; }