csstwitter-bootstrapalloy-ui

Scrollable DataTable with Auto Height

Alloy UI's DataTable provides a scrollable attribute to define x or y scrolling. This has to be used with a combination of a set height or width.

How can I have a table that will adjust to whatever the height/width of the window along with maintaining the scrollable feature?

Solution

  • Alloy UI API allows you to specify height & width in the px or round number. If you want to specify in the percentage, set the CSS property "width: 100%" for either the DataTable's table tag, or the div that contains the DataTable.

    Example,

    1. First, create a datatable.
    2. Add the CSS attribute for width in percentage

    *

    var dataTable =  new Y.DataTable({
    id: 'mydata-table',
    footerView:   Y.FooterView,
    scrollable: "xy",
    height:'300px').render();

    $('#mydata-table').css('width', '80%');
    $('#mydata-table').css('height', '40%');

    Please refer the link for detail.