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]);
}());