javascriptliferay-auialloy-ui

aui datatable sortable select rows


I'm using the aui library to make a sortable datatable. I would like the cells to be selectable (normally, plain text, no javascript event binding).

With columns defined as

var columns = [
    {
        key: "col1",
        label: "Column 1",
        sortable: true
    },
    {
        key: "col2",
        label: "Column 2",
        sortable: true
    },
    ...
];

If I use something like

var myDatatable = new A.DataTable.Base({
    columnset : columns,
    recordset : data
});

I can select individual rows but there is no sorting.

If I use

var myDatatable = new A.DataTable({
    columnset : columns,
    recordset : data
});

The table is sortable but I can't select the data with a normal mouse press + drag.

What am I missing here?

I have tried adding the following plugins

plugins: [{
    cfg: {
        type: "rows"
    },
    fn: A.Plugin.DataTableHighlight
},
{
    cfg: {
        selectRow: true,
        selectColumn: true
    },
    fn: A.Plugin.DataTableSelection
}]

but no luck with a plain simple select. For reference, the aui documentation is here. Note that the basic example does what I need minus sort and the real-world example requires double clicking (with editing allowed) on the cells to be able to select / copy the contents.

Please help. Thanks!


Solution

  • I managed to solve it after rendering the table by purging mousedown and mouseup events and overriding the getEditor function and the sorting still works.

    /* text is not selectable otherwise */
    myDatatable.get("contentBox").purge(true, "mousedown");
    myDatatable.get("contentBox").purge(true, "mouseup");
    /* suppress getEditor */
    A.DataTable.prototype.getEditor = function() {};