Longing to know

Since writing my previous blog post on an Angular reusable table directive, this directive has been updated quite a bit.

The github source and demos reflect the latest code, but I want to detail some of the major changes.

One of the main things about the original implementation that bothered me was the amount of HTML that was driving the directive. Since it was so granular in the HTML, it also meant that adding new features increased the size of the HTML w/ options. To remedy this, the directive now expects an “options” object with every option specified. This makes the HTML very, very clean:

<custom-table options="vm.tableOptions"></custom-table>

The directive itself has a plethora of options. Here is an abbreviated list:

• Paging
• Sorting
• Optionally rendering a pager and sort headers
• Event hooks for supporting external (server) paging and sorting
• Rendering with ng-repeat or directly to DOM (to avoid watchers)
• Event/function callbacks
• Applying an angular filter on bound data
• Rendering select checkboxes per row
• Rendering tri-state select in header row
• Callbacks for row selection
• Conditionally updating a subset of rows
• Specifying a computed CSS class to rows based on some data criteria (ng-class, effectively)
• “Sticky” headers

As per the small HTML above, in my controller for example, I set my options like so:

vm.tableOptions = {
    records: [],
    updatedRecords: [],
    columnDefns: paymentColumns,
    rowDefns: {
        computedClass: "{ 'is-error': r.isError, 'is-summary': r.isSummary }"
    },
    config: {
        sortBy: 'Id',
        sortDirection: 'asc',
        pageSize: 10,
        pageNumber: 1,
        totalCount: 0,
        totalPages: 0,
        maxSize: 10,
        trackBy: "id",
        useRepeat: false,
        showSelectCheckbox: true,
        showSelectAll: true,
        showSort: true,
        clientSort: false,
        clientPaging: false,
        stickyHeader: true,
        stickyHeaderOffset: 0,
        stickyContainer: '.flex-scroll-content'
    },
    callbacks: {
        sortHeaderClicked: function (data) { executeSearch(); },
        pageChanged: function (data) { executeSearch(); },
        pageSizeChanged: function (data) { executeSearch; }
    }
};

The demo still pretty much looks the same, although it now has client-side paging enabled.

The full source can be seen on Github.
And, there’s a plunk if you prefer Plunker.