FooterView is a YUI View class extension that provides a simple, one row summary row to a Datatable. This view provides for a summary row appended to the bottom of the DataTable TBODY, typically consisting of one TH element (with a colspan) and several TD elements for each desired column where a "calculated field" is desired.

View configuration provides for calculated fields based upon the all of the available dataset fields within the DataTable's "ModelList".

The view works with either non-scrolling or scrolling DataTables, and allows for either a "fixed" view, wherein the footer remains fixed at the bottom of the DataTable contentBox while the table is scrolled.

Calculated Fields

The current implementation supports the following calculated fields, where they are identified by their placeholder tag for replacement via Y.sub (case insensitive);

• {sum} Calculate the arithmetic sum of the specified column in dataset
• {min} Calculate the minimum value of the specified column in dataset
• {max} Calculate the maximum value of the specified column in dataset
• {avg} Calculate the arithmetic average of the of the specified column (synonyms {mean}, {average})

Also, non-looping calcs are;

• {row_count} Returns the number of rows in the dataset
• {col_count} Returns the number of columns in the dataset (no visibility check)
• {date} Returns the current date
• {time} Returns the current time

Configuration

YUI 3.6.0 DataTable supports attributes including footerView and footerConfig.

This FooterView recognizes the following attributes, which must be configured via the DataTable {configs} (see usage example below);

• fixed : Flag indicating if footer should be fixed or floating
• heading : Object, defining the single TH as;
  • colspan : Number of columns to merge from left for the TH
  • content : A string indicating the content of the TH for the footer
  • className : Additional classname for TH
• columns : Array of objects, one per desired TD column in footer as;
  • key : key name from the DataTable columns
  • content : String indicating the contents of this TD
  • className : Additional classname for TD
  • formatter : Formatter to apply to this column result
• dateFormat : Format string to use for any {date} fields
• timeFormat : Format string to use for any {time} fields

Additionally the user can provide a valid function as a column content to calculate a custom entry for
a column (see columns.content or calcDatasetValue)

Usage

var dtable = new Y.DataTable({
    columns:    ['EmpId','FirstName','LastName','NumClients','SalesTTM'],
    data:       AccountMgr.Sales,
    scrollable: 'y',
    height:     '250px',
    width:      '400px',

    footerView:   Y.FooterView,
    footerConfig: {
        fixed:   true,
        heading: {
            colspan:    3,
            content:    "Sales Totals for {row_count} Account Mgrs :  ",
            className:    "align-right"
        },
        columns: [
            { key:'NumClients', content:"{Avg} avg", className:"clientAvg" },
            { key:'SalesTTM',   content:"{sum}", className:"salesTotal", formatter:fmtCurrency }
        ]
    }
});

dtable.render('#salesDT');