Table Ng

Table Ng

<div ng-app="Example.table" ng-strict-di ng-controller="ExampleCtrl as ctrl">
  <h3>Title of the page</h3>

  <rg-legacy-table-toolbar stick>
    <div>Some toolbar content. Focused: {{ctrl.selection.getFocused().country}}</div>
  </rg-legacy-table-toolbar>

  <rg-table
    data="ctrl.data"
    columns="ctrl.columns"
    selection="ctrl.selection"
    on-select="ctrl.onSelect"
    autofocus="true"
    sticky-header-offset="'56px'"

    sort-key="ctrl.sortKey"
    sort-order="ctrl.sortOrder"
    on-sort="ctrl.onSort"
  ></rg-table>
</div>

body {
  margin: 0;
  padding: 0;
}

import angular from 'angular';
import RingTable from '@jetbrains/ring-ui/components/table-ng/table-ng';
import TableLegacyToolbar from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng__toolbar'
import Selection from '@jetbrains/ring-ui/components/table/selection';
import data from '@jetbrains/ring-ui/components/table/table.examples.json';

const columns = [
  {
    id: 'country',
    title: 'Country'
  },
  {
    id: 'city',
    title: 'City',
    sortable: true
  },
  {
    id: 'url',
    title: 'URL'
  }
];

const exampleModule =  angular.module('Example.table', [RingTable, TableLegacyToolbar]);

exampleModule.controller('ExampleCtrl', function () {
  this.data = data;
  this.columns = columns;
  this.selection = new Selection({data});
  this.sortKey = 'city';
  this.sortOrder = false;

  this.onSelect = selection => {
    this.selection = selection;
  }

  this.onSort = ({column: {id: key}, order}) => {
    this.sortOrder = order;
    this.data = this.data.slice().sort((itemA, itemB) => {
      return order ? itemA[key].localeCompare(itemB[key]) : itemB[key].localeCompare(itemA[key]);
    });
  };
});