} actionsConfig - holds config for all action that should be displayed
+ * structure of 'ActionConfig' is described in openlmis-table.component.js
+ * @param {Object} item - single element from data array that is displayed in table row
+ * where this actions cell is placed
+ */
+ angular
+ .module('openlmis-table')
+ .component('openlmisTableActions', {
+ templateUrl: 'openlmis-table/openlmis-table-component/openlmis-table-actions/openlmis-table-actions.html',
+ bindings: {
+ actionsConfig: '
+
diff --git a/src/openlmis-table/openlmis-table-component/openlmis-table-element-template/openlmis-table-element-template.component.js b/src/openlmis-table/openlmis-table-component/openlmis-table-element-template/openlmis-table-element-template.component.js
new file mode 100644
index 00000000..b7b70ab7
--- /dev/null
+++ b/src/openlmis-table/openlmis-table-component/openlmis-table-element-template/openlmis-table-element-template.component.js
@@ -0,0 +1,47 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses. For additional information contact info@OpenLMIS.org.
+ */
+
+(function() {
+
+ 'use strict';
+
+ /**
+ * @ngdoc service
+ * @name openlmis-table.component:openlmisTableElementTemplate
+ *
+ * @description
+ * Component responsible for rendering a content inside the | element
+ *
+ * @param {TableElementConfig} elementConfig - holds table element config properties
+ *
+ * @typedef TableElementConfig
+ * @property {any} value - value of the item[propertyPath], used when a template is not passed
+ * @property {string|function} template - optional property which specifies how item should
+ * displayed. More about template in 'openlmis-table.component.js'
+ * @property {Object} item - single element from data array that is displayed in table row
+ * of this cell
+ */
+ angular
+ .module('openlmis-table')
+ .component('openlmisTableElementTemplate', {
+ templateUrl: 'openlmis-table/openlmis-table-component' +
+ '/openlmis-table-element-template/openlmis-table-element-template.html',
+ bindings: {
+ elementConfig: ' based on
+ * elementConfig
+ *
+ */
+ angular
+ .module('openlmis-table')
+ .controller('openlmisTableElementTemplateController', openlmisTableElementTemplateController);
+
+ openlmisTableElementTemplateController.$inject = ['$compile', '$scope', '$timeout', 'uniqueIdService', 'jQuery',
+ 'openlmisTableService'];
+
+ function openlmisTableElementTemplateController($compile, $scope, $timeout, uniqueIdService, jQuery,
+ openlmisTableService) {
+ var $ctrl = this;
+
+ $ctrl.$onInit = onInit;
+
+ function onInit() {
+ $ctrl.divId = uniqueIdService.generate();
+ if ($ctrl.elementConfig.template) {
+ $timeout(function() {
+ injectHtmlContent();
+ });
+ }
+ }
+
+ function injectHtmlContent() {
+ var htmlContent = getItemTemplateValue($ctrl.elementConfig.template, $ctrl.elementConfig.item);
+ try {
+ var compiledHtml = $compile(angular.element(htmlContent))($scope);
+ if (compiledHtml.length === 0) {
+ throw Error('Compilation not possible');
+ }
+
+ jQuery('#' + $ctrl.divId).append(compiledHtml);
+ } catch (error) {
+ jQuery('#' + $ctrl.divId).append(htmlContent);
+ }
+ }
+
+ function getItemTemplateValue(template, item) {
+ if (typeof template === 'function') {
+ return template(item);
+ }
+
+ var regex = /item\.(\w+)/g;
+
+ return template.replace(regex, function(match, property) {
+ var value = openlmisTableService.getElementPropertyValue(item, property);
+ return value ? value : match;
+ });
+ }
+ }
+
+})();
diff --git a/src/openlmis-table/openlmis-table-component/openlmis-table-element-template/openlmis-table-element-template.html b/src/openlmis-table/openlmis-table-component/openlmis-table-element-template/openlmis-table-element-template.html
new file mode 100644
index 00000000..9e07d322
--- /dev/null
+++ b/src/openlmis-table/openlmis-table-component/openlmis-table-element-template/openlmis-table-element-template.html
@@ -0,0 +1,4 @@
+
+ {{ $ctrl.elementConfig.value }}
+
+
diff --git a/src/openlmis-table/openlmis-table-component/openlmis-table-header-template/openlmis-table-header-template.component.js b/src/openlmis-table/openlmis-table-component/openlmis-table-header-template/openlmis-table-header-template.component.js
new file mode 100644
index 00000000..1eb388c3
--- /dev/null
+++ b/src/openlmis-table/openlmis-table-component/openlmis-table-header-template/openlmis-table-header-template.component.js
@@ -0,0 +1,45 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses. For additional information contact info@OpenLMIS.org.
+ */
+
+(function() {
+
+ 'use strict';
+
+ /**
+ * @ngdoc service
+ * @name openlmis-table.component:openlmisTableHeaderTemplate
+ *
+ * @description
+ * Component responsible for rendering a content inside the | element
+ *
+ * @param {TableHeaderConfig} headerConfig - holds table header config properties
+ *
+ * @typedef TableHeaderConfig
+ * @property {any} value - value of the item[propertyPath], used when a template is not passed
+ * @property {string|function} template - optional property which specifies how item should
+ * displayed. More about template in 'openlmis-table.component.js'
+ */
+ angular
+ .module('openlmis-table')
+ .component('openlmisTableHeaderTemplate', {
+ templateUrl: 'openlmis-table/openlmis-table-component' +
+ '/openlmis-table-header-template/openlmis-table-header-template.html',
+ bindings: {
+ headerConfig: ' based on
+ * headerConfig
+ *
+ */
+ angular
+ .module('openlmis-table')
+ .controller('openlmisTableHeaderTemplateController', openlmisTableHeaderTemplateController);
+
+ openlmisTableHeaderTemplateController.$inject = ['$compile', '$scope', '$timeout', 'uniqueIdService', 'jQuery',
+ 'openlmisTableService'];
+
+ function openlmisTableHeaderTemplateController($compile, $scope, $timeout, uniqueIdService, jQuery) {
+ var $ctrl = this;
+
+ $ctrl.$onInit = onInit;
+
+ function onInit() {
+ $ctrl.divId = uniqueIdService.generate();
+ if ($ctrl.headerConfig.template) {
+ $timeout(function() {
+ injectHtmlContent();
+ });
+ }
+ }
+
+ function injectHtmlContent() {
+ var htmlContent = $ctrl.headerConfig.template();
+ try {
+ var compiledHtml = $compile(angular.element(htmlContent))($scope);
+ if (compiledHtml.length === 0) {
+ throw Error('Compilation not possible');
+ }
+
+ jQuery('#' + $ctrl.divId).append(compiledHtml);
+ } catch (error) {
+ jQuery('#' + $ctrl.divId).append(htmlContent);
+ }
+ }
+ }
+})();
diff --git a/src/openlmis-table/openlmis-table-component/openlmis-table-header-template/openlmis-table-header-template.html b/src/openlmis-table/openlmis-table-component/openlmis-table-header-template/openlmis-table-header-template.html
new file mode 100644
index 00000000..253055e0
--- /dev/null
+++ b/src/openlmis-table/openlmis-table-component/openlmis-table-header-template/openlmis-table-header-template.html
@@ -0,0 +1,4 @@
+
+ {{ $ctrl.headerConfig.text | message }}
+
+
diff --git a/src/openlmis-table/openlmis-table-component/openlmis-table.component.js b/src/openlmis-table/openlmis-table-component/openlmis-table.component.js
new file mode 100644
index 00000000..0ddb48d3
--- /dev/null
+++ b/src/openlmis-table/openlmis-table-component/openlmis-table.component.js
@@ -0,0 +1,259 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses. For additional information contact info@OpenLMIS.org.
+ */
+
+(function() {
+
+ 'use strict';
+
+ /**
+ * @ngdoc component
+ * @name openlmis-table.component:openlmisTable
+ *
+ * @description
+ * Component responsible for displaying a table
+ *
+ * @param {TableConfig} tableConfig Specifies what columns, actions, header, etc. will the table have
+ * @typedef {Object} TableConfig
+ * @property {string} caption - Text which will be displayed if data is not present.
+ * @prope rty {boolean} displayCaption - Whether to display the caption or not.
+ * @property {ColumnConfig[]} columns - Array of column configurations.
+ * @property {ActionsConfig} actions - Configuration for table actions.
+ * @property {Object[]} data - Array of data to be displayed in the table.
+ * @property {boolean} isSelectable - (optional) Defines should it be possible to set $selected property of
+ * table item. If set to true, the additional column with checkboxes will be rendered. By default false
+ * @property {funciton} onSelectElementChange - (optional) Function that should be triggered when table
+ * item is selected
+ * @property {funciton} onSelectAll - (optional) Function that should be triggered when allItems are
+ * selected
+ * @property {boolean} initialSelectAll - (optional) Initial value of selectAll param which specifies if
+ * all table items should be selected or not.
+ *
+ * Configuration for a single column in the table.
+ * @typedef {Object} ColumnConfig
+ * @property {string} header - Header text for the column.
+ * @property {string} propertyPath - Property path to extract data for the column object. It also specifies by which
+ * property the table will be sorted after clicking on header.
+ * @property {boolean} sortable - (optional) Decides if it should be possible to sort by this column,
+ * by default true
+ * @property {string} headerClasses - (optional) Additional CSS classes which should be applied to the column header
+ * @property {string} cellClasses - (optional) Additional CSS classes which should be applied to the table cell
+ * @property {funciton} displayColumn - (optional) Function which returns whether the column
+ * should be displayed or not. If not passed column will be visible
+ * @property {Popover} popover - (optional) If passed attaches the popover after hovering on the column.
+ * @property {string|function} [template] - (optional) template to customize the display of data in the column.
+ * It can be either string like this:
+ * @example
+ * 'item.name - item.code'
+ * IMPORTANT: for string template we have to always
+ * write item.{property}. Anything else will be displayed as string. So for example 'facility.name' won't work!
+ *
+ * If we decide to use function which is more flexible solution we have to declare it like that:
+ * @example
+ * template: function(item) {
+ * return item.name + '-' + item.code
+ * }
+ * NOTE: For any complex templates use function
+ * NOTE: If you want to use pipe in a template, for example: '{{item.name | openlmisDate}}',
+ * then you have to declare it using $filter service. Cause the pipe syntax won't work.
+ * Instead do this:
+ * template: function(item) {
+ * return item.processingPeriod ?
+ * filter('openlmisDate')(item.processingPeriod.startDate) : '';
+ * }
+ *
+ * Popover configuration
+ * @typedef {Object} Popover
+ * @property {string} title - Translation key of the popover title
+ * @property {string} template - Path to the html file where the template is located
+ *
+ * Configuration for table actions.
+ * @typedef {Object} ActionsConfig
+ * @property {string} header - Header text for the actions column.
+ * @property {Action[]} data - Array of action data objects.
+ *
+ * Data object defining an action for the table.
+ * @typedef {Object} Action
+ * @property {string} type - Type of action. Possible values:
+ * REDIRECT -> action is created with the ui-sref property
+ * CLICK -> action is created with the ng-click property
+ * DOWNLOAD -> action is created with the openlmis-download property
+ * @property {function} redirectLink - Function which will be passed to ui-serf property. Needed only for
+ * 'REDIRECT' action
+ * @property {string} text - Text to be displayed for the action.
+ * @property {function} displayAction - based on some item property decides should the action be displayed.
+ * If not passed action will be displayed
+ * @property {string} classes - CSS classes which should be applied to the button
+ * @property {function} onClick - Function which will be executed if user clicks the button. Passed only
+ * for the 'DOWNLOAD' and 'CLICK' actions
+ *
+ * @example
+ * for action config like this:
+ * {
+ type: TABLE_CONSTANTS.actionTypes.CLICK,
+ displayAction: function(item) {
+ return item.status === ORDER_STATUSES.CREATING;
+ },
+ classes: 'order-edit primary',
+ onClick: function(item) {
+ vm.redirectToOrderEdit(item.id);
+ },
+ text: 'orderView.edit'
+ }
+ we will get the following result:
+ |