Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

Reorder table

The reorder table component creates a table where users can drag-and-drop rows into their preferred order. It can handle slightly more complex information than the reorder directive and requires an integer indexing property.

Reorder table settings

  • bb-reorder-table — Creates a table where users can drag-and-drop rows.
    • bb-reorder-table-options — Specifies an object with the following properties for the bb-reorder-table directive.
      • columns — An array of available columns. Each column can have the following properties:
        • controller(Optional.) Specifies the controller function for a templated column to allow cells to perform logic while displaying formatted or complex data. You can use $scope.rowData to access row data from the grid in the column template controller.
        • formatter(Optional) Specifies a function which takes an object from the data property and returns a value to display in the table.
        • jsonmap — Specifies the name of the property within the data property that maps to the data in the column. This property is not required when template_url or formatter is used, but is required for the data.property_name syntax.
        • name — Specifies a unique name for the column.
        • show(Optional.) Indicates whether the given column is visible. (Default: true)
        • template_url(Optional.) Specifies the URL for a column template to use when displaying formatted or complex data in a cell. To access the properties of the cell data object, use the format data.property_name.
        • title(Optional.) Specifies the text to use in the column header in place of the column name. (Default: name)
        • width(Optional.) Specifies the desired width of the column. The column width is not respected if the combined column widths are smaller than the table. (Default: auto)
      • data — An array of objects that represents the rows in the table. Each row should have properties that correspond to the jsonmap properties within the columns property.
      • fixed(Optional.) Specifies a number of rows at the top of the table which cannot be reordered. (Default: 0)
      • getContextMenuItems(Optional.) Specifies a function that allows table rows to create a context menu based on the function's return value. The function returns an array of objects that represents the items in the dropdown. The objects contain the following properties:
        • id — Specifies a unique string identifier for the dropdown item.
        • title — Specifies the title to display in the dropdown.
        • cmd — Specifies a function to be called when users click the dropdown item. To close the dropdown after calling the function, it should return false.
      • index — Specifies an integer property of the objects in data that is used to sort and identify each item. When bb-reorder-table-unsortable is false, this property is altered to match the index of the element.
      • oneIndexed(Optional.) Indicates if the the property for index is one-indexed. (Default: false)
      • resources(Optional.) Specifies the resource dictionary available in the scope of each columns property's template_url and controller properties.
    • bb-reorder-table-unsortable — Indicates whether the table is unsortable. (Default: false)

Demo

Current order:

  • {{ item.order }}


Toggle Unsortable  

Markup

<div ng-controller="ReorderTableContextTestController as reorderTableCtrl">
  <div style="max-width: 600px">
    <bb-reorder-table bb-reorder-table-options="reorderTableCtrl.tableOptions"></bb-reorder-table>
  </div>
  
  <div style="margin-top: 10px;">
      <h4>Current order:</h4>

      <ul ng-repeat="item in reorderTableCtrl.tableOptions.data">
        <li>{{ item.order }}</li>
      </ul>
  </div>
</div>

<hr />

<div ng-controller="ReorderTableFixedTestController as reorderTableCtrl">
  <div style="max-width: 600px;">
    <bb-reorder-table bb-reorder-table-options="reorderTableCtrl.tableOptions" bb-reorder-table-unsortable="reorderTableCtrl.tableUnsortable"></bb-reorder-table>
  </div>
  <br />
  <span>Toggle Unsortable</span> &nbsp; <input type="checkbox" bb-check ng-model="reorderTableCtrl.tableUnsortable">
</div>

JavaScript

/* global angular*/

(function () {
    'use strict';

    function RunTemplateCache($templateCache) {
        $templateCache.put('reordertable/samples/templated.html', '<span>{{data}}</span>')

        $templateCache.put('bbReorderTable/samples/mycolumn.html',
                    '<div>' +
                    '<div class="bb-headline">{{resources.title}}: {{data.title}}</div>' +
                    '<div class="bb-test-info">Info: {{data.info}}</div>' +
                    '<button ng-click="locals.clickIt()">My Button</button>' +
                    '</div>');

        $templateCache.put('bbReorderTable/samples/rowData.html',
                    '<div>' +
                    '<div class="bb-test-rowDataName">{{rowData.hit}}</div>' +
                    '</div>');
    }

    function ColumnController($scope) {
        $scope.locals = {
            clickIt: function () {
                alert("Testing button!");
            }
        };
    }

    function ReorderTableContextTestController() {
        var vm = this;

        vm.tableOptions = {
            columns: [
                {
                    name: 'index',
                    jsonmap: 'id'
                },
                {
                    name: 'order',
                    jsonmap: 'order'
                },
                {
                    name: 'text',
                    jsonmap: 'text',
                    show: false
                },
                {
                    name: 'characters',
                    jsonmap: 'char',
                    title: 'Column with Title'
                },
                {
                    name: 'templated',
                    jsonmap: 'templated',
                    template_url: 'reordertable/samples/templated.html'
                }
            ],
            data: [
                { id: 0, order: '1st', text: 'Hello', char: '#', templated: "temp1" },
                { id: 1, order: '2nd', text: 'Bye', char: '<>', templated: "temp2" },
                { id: 2, order: '3rd', text: 'Hello', char: '???', templated: 'temp3' }
            ],
            index: 'id',
            getContextMenuItems: function (item) {
                return [
                    {
                        id: 0,
                        title: 'Action 1 for item ' + item.id,
                        cmd: function () {
                            alert('Action 1 for item ' + item.id);
                        }
                    },
                    {
                        id: 1,
                        title: 'Action 2 for item ' + item.id,
                        cmd: function () {
                            alert('Action 2 for item ' + item.id);
                        }
                    }
                ];
            }
        };
    }

    function ReorderTableFixedTestController() {
        var vm = this;

        vm.tableUnsortable = false;
        vm.tableOptions = {
            columns: [
                {
                    title: 'Templated with Row Data',
                    name: 'templated',
                    template_url: 'bbReorderTable/samples/rowData.html'
                },
                {
                    title: 'Controller',
                    name: 'Controller',
                    controller: ColumnController,
                    jsonmap: 'templated',
                    template_url: 'bbReorderTable/samples/mycolumn.html'
                }
            ],
            data: [
                { id: 0, hit: 'Pea', templated: { title: 'Title 1', info: 'info 1' } },
                { id: 1, hit: 'Eye', templated: { title: 'Title 2', info: 'info 2' } },
                { id: 2, hit: 'Inn', templated: { title: 'Title 3', info: 'info 3' } },
                { id: 3, hit: 'Gee', templated: { title: 'Title 4', info: 'info 4' } }
            ],
            index: 'id',
            oneIndexed: true,
            fixed: 1,
            resources: { title: 'Title'}
        };
    }

    angular.module('stache')
        .controller('ReorderTableContextTestController', ReorderTableContextTestController)
        .controller('ReorderTableFixedTestController', ReorderTableFixedTestController)
        .controller('ColumnController', ColumnController)
        .run(['$templateCache', RunTemplateCache]);
}());