Table Legacy Ng

Displays tabular data.

Table Legacy Ng

Example

<div ng-app="test" ng-strict-di ng-controller="tableExample as ctrl">
  <rg-legacy-table-toolbar stick>
    <div>Some toolbar content. Selected item:
      {{ctrl.selection.getActiveItem().name}}
    </div>
  </rg-legacy-table-toolbar>

  <rg-legacy-table items="ctrl.itemsArray" selection="ctrl.selection">
    <rg-legacy-table-header>
      <rg-legacy-table-title>Avatar</rg-legacy-table-title>
      <rg-legacy-table-title>Check</rg-legacy-table-title>
      <rg-legacy-table-title active>Name</rg-legacy-table-title>
      <rg-legacy-table-title>Groups</rg-legacy-table-title>
    </rg-legacy-table-header>

    <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
      <rg-legacy-table-column avatar>
        <img ng-if="::item.iconUrl" ng-src="{{ ::item.iconUrl }}"
          class="ring-table__avatar__img"/>
      </rg-legacy-table-column>
      <rg-legacy-table-checkbox-cell></rg-legacy-table-checkbox-cell>
      <rg-legacy-table-column limited>{{ ::item.name }}</rg-legacy-table-column>
      <rg-legacy-table-column wide limited>
        <span class="ring-table__column-list"
          ng-repeat="subItem in ::item.subList">{{ ::subItem.name }}</span>
      </rg-legacy-table-column>
    </rg-legacy-table-row>
  </rg-legacy-table>
</div>

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;
}

Table Legacy Ng without selection

Example

<div ng-app="Ring.table-legacy" ng-strict-di
  ng-init="itemsArray = ['first', 'second', 'third', 'fourth']">
  <rg-legacy-table items="itemsArray" disable-selection="true">
    <rg-legacy-table-row row-item="item" ng-repeat="item in itemsArray">
      <rg-legacy-table-column>{{item}}</rg-legacy-table-column>
    </rg-legacy-table-row>
  </rg-legacy-table>
</div>

import angular from 'angular';
import '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng';

body {
  margin: 0;
}

Table Legacy Ng with sidebar

Example

<h3>Scroll down to see the effect</h3>
<div ng-app="test" ng-strict-di ng-controller="tableExample as ctrl">
  <rg-sidebar show="ctrl.isShowSideBar"
    place-under-sibling=".some-toolbar"
    top-offset="1">
    <div class="ring-sidebar__title">Here is sidebar content</div>
    <div class="ring-sidebar__section">
      {{ctrl.selection.getActiveItem().name}}
    </div>
    <rg-select
      options="item.name for item in ctrl.itemsArray track by item.name"></rg-select>

    <rg-query-assist
      x-data-source="ctrl.queryAssistSource"
      query="ctrl.query"></rg-query-assist>
  </rg-sidebar>

  <rg-legacy-table-toolbar stick class="some-toolbar">
    <div>Some toolbar content. Selected
      item: {{ctrl.selection.getActiveItem().name}}
      <rg-sidebar-toggle-button model="ctrl.isShowSideBar">Toggle
        toolbar
      </rg-sidebar-toggle-button>
    </div>
  </rg-legacy-table-toolbar>

  <rg-legacy-table items="ctrl.itemsArray" selection="ctrl.selection">
    <rg-legacy-table-header class="example__table-header"
      stick-to=".some-toolbar">
      <rg-legacy-table-title>Avatar</rg-legacy-table-title>
      <rg-legacy-table-title>Check</rg-legacy-table-title>
      <rg-legacy-table-title active>Name</rg-legacy-table-title>
      <rg-legacy-table-title></rg-legacy-table-title>
    </rg-legacy-table-header>

    <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
      <rg-legacy-table-column avatar>
        <img ng-if="::item.iconUrl" ng-src="{{ ::item.iconUrl }}"
          class="ring-table__avatar__img"/>
      </rg-legacy-table-column>
      <rg-legacy-table-checkbox-cell></rg-legacy-table-checkbox-cell>
      <rg-legacy-table-column limited>{{::item.name }}</rg-legacy-table-column>
      <rg-legacy-table-column>
        <rg-sidebar-toggle-button ng-show="item.active"
          model="ctrl.isShowSideBar"></rg-sidebar-toggle-button>
      </rg-legacy-table-column>
    </rg-legacy-table-row>
  </rg-legacy-table>
</div>

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;
}