Show:
                            /**
                             * The Datatable Component
                             *
                             * @module aui-datatable
                             * @submodule aui-datatable-property-list
                             */
                            
                            var Lang = A.Lang,
                                isFunction = Lang.isFunction;
                            
                            /**
                             * A base class for PropertyList.
                             *
                             * @class A.PropertyList
                             * @extends DataTable
                             * @uses A.WidgetCssClass, A.WidgetToggle
                             * @param {Object} config Object literal specifying widget configuration
                             * properties.
                             * @constructor
                             */
                            A.PropertyList = A.Base.create(A.DataTable.NAME, A.DataTable, [A.WidgetCssClass, A.WidgetToggle], {
                            
                                /**
                                 * Construction logic executed during PropertyList instantiation. Lifecycle.
                                 *
                                 * @method initializer
                                 * @param config
                                 * @protected
                                 */
                                initializer: function(config) {
                                    var instance = this;
                            
                                    instance.CLASS_NAMES_PROPERTY_LIST = {
                                        cell: instance.getClassName('cell')
                                    };
                            
                                    instance._initHighlight();
                            
                                    instance.after(instance._afterRenderUI, instance, 'renderUI');
                                    instance.after(instance._afterUITriggerSort, instance, '_onUITriggerSort');
                                    instance.on('activeCellChange', instance._onActiveCellChange);
                            
                                    // DataTable doesn't allow redefine the columns attribute in extended
                                    // classes See http://yuilibrary.com/projects/yui3/ticket/2532599
                            
                                    if (!config.columns) {
                                        this.set('columns', instance._state.get('columns', 'initValue'));
                                    }
                                },
                            
                                /**
                                 * Creates and return a new `A.TextCellEditor`.
                                 *
                                 * @method getDefaultEditor
                                 * @return {TextCellEditor}
                                 */
                                getDefaultEditor: function() {
                                    return new A.TextCellEditor();
                                },
                            
                                /**
                                 * Fires after the `renderUI` event.
                                 *
                                 * @method _afterRenderUI
                                 * @protected
                                 */
                                _afterRenderUI: function() {
                                    var instance = this;
                            
                                    instance.get('boundingBox').addClass(
                                        instance.getClassName('property-list')
                                    );
                                },
                            
                                /**
                                 * Fires after the `UITriggerSort` event.
                                 *
                                 * @method _afterUITriggerSort
                                 * @param {EventFacade} event
                                 * @protected
                                 */
                                _afterUITriggerSort: function() {
                                    var instance = this;
                            
                                    instance.highlight.clear();
                                },
                            
                                /**
                                 * Initializer for the `A.DataTable` highlighter.
                                 *
                                 * @method _initHighlight
                                 * @protected
                                 */
                                _initHighlight: function() {
                                    var instance = this;
                            
                                    instance.plug(A.Plugin.DataTableHighlight, {
                                        highlightRange: false,
                                        type: 'rows'
                                    });
                                },
                            
                                /**
                                 * Fires on `activeCellChange` event.
                                 *
                                 * @method _onActiveCellChange
                                 * @param {EventFacade} event
                                 * @protected
                                 */
                                _onActiveCellChange: function(event) {
                                    var instance = this,
                                        activeCell = event.newVal,
                                        column;
                            
                                    if (activeCell) {
                                        column = instance.getColumn(activeCell);
                            
                                        if (column && (column.key === 'name')) {
                                            event.newVal = activeCell.next('.' + instance.CLASS_NAMES_PROPERTY_LIST.cell);
                                        }
                                    }
                                },
                            
                                /**
                                 * Callback for the selection key event listener.
                                 *
                                 * @method _onSelectionKey
                                 * @param {EventFacade} event
                                 * @protected
                                 */
                                _onSelectionKey: function(event) {
                                    var instance = this;
                            
                                    if (instance.get('activeCell') && instance.get('focused')) {
                                        var keyCode = event.keyCode,
                                            editor = A.Widget.getByNode(event.target);
                            
                                        if (editor instanceof A.DataTable) {
                                            if (editor && keyCode === 13) {
                                                instance._onEditCell(event);
                                            }
                            
                                            A.PropertyList.superclass._onSelectionKey.apply(this, arguments);
                            
                                            instance._syncPropertyListScrollUI();
                                        }
                                    }
                                },
                            
                                /**
                                 * Callback for syncing `A.PropertyList` on scroll.
                                 *
                                 * @method _syncPropertyListScrollUI
                                 * @protected
                                 */
                                _syncPropertyListScrollUI: function() {
                                    var instance = this,
                                        activeRow = instance.get('activeRow');
                            
                                    if (activeRow && instance.scrollTo) {
                                        instance.scrollTo(activeRow.get('id'));
                                    }
                                }
                            }, {
                            
                                /**
                                 * Static property provides a string to identify the CSS prefix.
                                 *
                                 * @property CSS_PREFIX
                                 * @type String
                                 * @static
                                 */
                                CSS_PREFIX: A.DataTable.CSS_PREFIX,
                            
                                /**
                                 * Static property used to define the default attribute
                                 * configuration for the PropertyList.
                                 *
                                 * @property ATTRS
                                 * @type Object
                                 * @static
                                 */
                                ATTRS: {
                            
                                    /**
                                     * Defines the `column` config for `A.PropertyList`.
                                     *
                                     * @attribute columns
                                     * @type Function
                                     */
                                    columns: {
                                        valueFn: function() {
                                            var instance = this;
                            
                                            return [{
                                                editor: false,
                                                key: 'name',
                                                label: instance.getString('propertyName'),
                                                sortable: true
                                            }, {
                                                editor: instance.getDefaultEditor(),
                                                formatter: function(o) {
                                                    var instance = this;
                                                    var data = o.data;
                            
                                                    if (!data) {
                                                        return;
                                                    }
                            
                                                    var formatter = data.formatter;
                            
                                                    if (isFunction(formatter)) {
                                                        return formatter.apply(instance, arguments);
                                                    }
                            
                                                    return data.value;
                                                },
                                                key: 'value',
                                                label: instance.getString('value'),
                                                sortable: true,
                                                width: 'auto'
                                            }];
                                        }
                                    },
                            
                                    /**
                                     * Determines if the `A.PropertyList` is scrollable.
                                     *
                                     * @attribute scrollable
                                     * @default true
                                     * @type Boolean
                                     */
                                    scrollable: {
                                        value: true
                                    },
                            
                                    /**
                                     * The event type that will be used to trigger edit mode for a datatable
                                     * cell.
                                     *
                                     * @attribute editEvent
                                     * @default 'dblclick'
                                     * @type String
                                     */
                                    editEvent: {
                                        valueFn: function() {
                                            if (A.UA.touchEnabled && A.UA.mobile) {
                                                return 'click';
                                            }
                                            else {
                                                return 'dblclick';
                                            }
                                        }
                                    },
                            
                                    /**
                                     * Defines the width of the `A.PropertyList`.
                                     *
                                     * DataTable scroll breaks when width value is a number
                                     * See http://yuilibrary.com/projects/yui3/ticket/2532600
                                     *
                                     * @attribute width
                                     * @type String|Number
                                     */
                                    width: {
                                        setter: String
                                    },
                            
                                    /**
                                     * Collection of strings used to label elements of the UI.
                                     *
                                     * @attribute strings
                                     * @type Object
                                     */
                                    strings: {
                                        value: {
                                            propertyName: 'Property Name',
                                            value: 'Value'
                                        }
                                    }
                                }
                            });