Search code examples
javascriptdatatablealloy-ui

How can I highlight a DataTable row when a user clicks on it in AlloyUI 3.0.x?


The AlloyUI 1.5.x showcase demonstrates how to highlight rows in its "Real World" example. The example uses the DataTableSelection plugin with selectRows: true, however, that code no longer works in AlloyUI 3.0.x.

I have tried using the DataTable.Highlight module with highlightRows: true, but that only highlights rows on mouseover:

YUI().use('aui-datatable', 'datatable-highlight', function(Y) {

    /* ...code here... */

    var dataTable = new Y.DataTable({
      /* ...code here... */
      highlightRows: true
    }).render('#myDataTable');
});

See runnable example (modified from the "Real World" DataTable example on alloyui.com):

YUI().use(
  'aui-datatable',
  'datatable-highlight',
  function(Y) {
    var remoteData = [{
      active: 'yes',
      address: '1236 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['banana', 'cherry'],
      last_login: '4/19/2007',
      name: 'John A. Smith',
      state: 'CA'
    }, {
      active: 'maybe',
      address: '9996 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['cherry'],
      last_login: ['4/10/2007'],
      name: 'Bob C. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1623 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['cherry'],
      last_login: '4/19/2007',
      name: 'John D. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3217 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['apple', 'cherry'],
      last_login: '2/15/2006',
      name: 'Joan E. Jones',
      state: 'NY'
    }, {
      active: 'maybe',
      address: '9899 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['banana'],
      last_login: '1/23/2004',
      name: 'Bob F. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1723 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['apple'],
      last_login: '4/19/2007',
      name: 'John G. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3241 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['kiwi'],
      last_login: '2/15/2006',
      name: 'Joan H. Jones',
      state: 'NY'
    }, {
      active: 'maybe',
      address: '9909 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['apple', 'banana'],
      last_login: '1/23/2004',
      name: 'Bob I. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1623 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['apple', 'cherry'],
      last_login: '4/19/2007',
      name: 'John J. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3721 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['banana'],
      last_login: '2/15/2006',
      name: 'Joan K. Jones',
      state: 'NY'
    }];

    var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];

    var nestedCols = [{
      key: 'name'
    }, {
      key: 'address'
    }, {
      key: 'city'
    }, {
      key: 'state'
    }, {
      key: 'amount'
    }];

    var dataTable = new Y.DataTable({
      columns: nestedCols,
      data: remoteData,
      highlightRows: true
    }).render('#myDataTable');
  }
);
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <div id="myDataTable"></div>
</div>

How can I highlight a row when a user clicks on it in AlloyUI 3.0.x?


Solution

  • You need to use the DataTableHighlight module with type: 'rows' instead:

    YUI().use('aui-datatable', 'aui-datatable-highlight', function(Y) {
    
        /* ...your code here... */
    
        var dataTable = new Y.DataTable({
          /* ...your code here... */
          plugins: [{
            cfg: {
              type: 'rows'
            },
            fn: Y.Plugin.DataTableHighlight
          }]
        }).render('#myDataTable');
    });
    

    Here's a runnable example using your code:

    YUI().use(
      'aui-datatable',
      'aui-datatable-highlight',
      function(Y) {
        var remoteData = [{
          active: 'yes',
          address: '1236 Some Street',
          amount: 5,
          city: 'San Francisco',
          colors: ['red'],
          fruit: ['banana', 'cherry'],
          last_login: '4/19/2007',
          name: 'John A. Smith',
          state: 'CA'
        }, {
          active: 'maybe',
          address: '9996 Random Road',
          amount: 0,
          city: 'Los Angeles',
          colors: ['green'],
          fruit: ['cherry'],
          last_login: ['4/10/2007'],
          name: 'Bob C. Uncle',
          state: 'CA'
        }, {
          active: 'yes',
          address: '1623 Some Street',
          amount: 5,
          city: 'San Francisco',
          colors: ['red'],
          fruit: ['cherry'],
          last_login: '4/19/2007',
          name: 'John D. Smith',
          state: 'CA'
        }, {
          active: 'no',
          address: '3217 Another Ave',
          amount: 3,
          city: 'New York',
          colors: ['red', 'blue'],
          fruit: ['apple', 'cherry'],
          last_login: '2/15/2006',
          name: 'Joan E. Jones',
          state: 'NY'
        }, {
          active: 'maybe',
          address: '9899 Random Road',
          amount: 0,
          city: 'Los Angeles',
          colors: ['green'],
          fruit: ['banana'],
          last_login: '1/23/2004',
          name: 'Bob F. Uncle',
          state: 'CA'
        }, {
          active: 'yes',
          address: '1723 Some Street',
          amount: 5,
          city: 'San Francisco',
          colors: ['red'],
          fruit: ['apple'],
          last_login: '4/19/2007',
          name: 'John G. Smith',
          state: 'CA'
        }, {
          active: 'no',
          address: '3241 Another Ave',
          amount: 3,
          city: 'New York',
          colors: ['red', 'blue'],
          fruit: ['kiwi'],
          last_login: '2/15/2006',
          name: 'Joan H. Jones',
          state: 'NY'
        }, {
          active: 'maybe',
          address: '9909 Random Road',
          amount: 0,
          city: 'Los Angeles',
          colors: ['green'],
          fruit: ['apple', 'banana'],
          last_login: '1/23/2004',
          name: 'Bob I. Uncle',
          state: 'CA'
        }, {
          active: 'yes',
          address: '1623 Some Street',
          amount: 5,
          city: 'San Francisco',
          colors: ['red'],
          fruit: ['apple', 'cherry'],
          last_login: '4/19/2007',
          name: 'John J. Smith',
          state: 'CA'
        }, {
          active: 'no',
          address: '3721 Another Ave',
          amount: 3,
          city: 'New York',
          colors: ['red', 'blue'],
          fruit: ['banana'],
          last_login: '2/15/2006',
          name: 'Joan K. Jones',
          state: 'NY'
        }];
    
        var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
    
        var nestedCols = [{
          key: 'name'
        }, {
          key: 'address'
        }, {
          key: 'city'
        }, {
          key: 'state'
        }, {
          key: 'amount'
        }];
    
        var dataTable = new Y.DataTable({
          columns: nestedCols,
          data: remoteData,
          plugins: [{
            cfg: {
              type: 'rows'
            },
            fn: Y.Plugin.DataTableHighlight
          }]
        }).render('#myDataTable');
    
        dataTable.get('boundingBox').unselectable();
      }
    );
    <script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
    <link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
    <div class="yui3-skin-sam">
      <div id="myDataTable"></div>
    </div>