[WIP] DT Expand #1526

wants to merge 2 commits into


None yet
1 participant

apipkin commented Jan 3, 2014

This is the first part of my pull request for a row expander. This outlines what I'm going towards. I would be happy with any thoughts related to this pull request or wishes for the row expander as it's being built.

new Y.DataTable({

    columns: [ Y.DataTable.Expand.key, 'isbn', 'title', 'author'],

    data: [
        { isbn: '', title: '', author: '', qty: '', price: '' },
        { isbn: '', title: '', author: '', qty: '', price: '', __expanded: true },
        { isbn: '', title: '', author: '', qty: '', price: '' }

    expandable: true,

    expandColumns: ['price', 'qty', {
        key: 'total',
        formatter: function (o) {
            var data = o.data;

            return Y.Intl.NumberFormat(data.price * data.qty, { style: 'currency' });

    expandTemplate: '<div>Price: {price}<br>Qty: {qty}<hr>Total: {total}</div>'


When collapsing a row, the child row does not get removed, it is only hidden.

Listen for data changes to update all expanded child rows and remove all hidden child rows.

Child rows will take the width of the table starting with the cell to the right of expand column.

<tr rowspan="[num_of_columns]">[template]</tr> is used.
[template] is determined on the existance of expandTemplate,
if it does not exist <table><tr>{{#cells}}<td>{{value}}</td>{{/cells}}</tr></table> is used.

expandColumns is used to create a new tabled row, (create headers for this table?)

expandTemplate is used to create a formated HTML node to customize the look of the expanded row.

if expandColumns and expandTemplate is used, the formatter for the cells is used inplace of the default cell value

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment