Data Table

• Introduction
• Basic Example
• Real World Example

Provides the user with a method of organizing, arranging, and editing tables of information.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Data Table module.

YUI().use(
  'aui-datatable',
  function(Y) {
    // code goes here
  }
);

Using Data Table

Create an HTML element to house the Data Table.

<div id="myDataTable"></div>

The most basic of tables require two kinds of information, table columns and data. Pass both into your Data Table after columns and data, and don't forget to render it!

YUI().use(
  'aui-datatable',
  function(Y) {
    var columns = [
      name,
      age
    ];

    var data = [
      {
        name: 'Bob',
        age: '28'
      },
      {
        name: 'Joe',
        age: '72'
      },
      {
        name: 'Sarah',
        age: '35'
      }
    ];

    new Y.DataTable(
      {
        columns: columns,
        data: data
      }
    ).render("#myDataTable");
  }
);

Configuring Data Table

A plugin can be utilized to allow the highlighting of table cells.

YUI().use(
  'aui-datatable',
  function(Y) {
    new Y.DataTable(
      {
        columns: columns,
        data: data,
        plugins: [
          {
            fn: Y.Plugin.DataTableHighlight
          }
        ]
      }
    ).render("#myDataTable");
  }
);

Table cells can also be edited when permitted in the columns object. Here, key refers to the value displayed in the column head.

YUI().use(
  'aui-datatable',
  function(Y) {
    var columns = [
      {
        editor: new Y.TextAreaCellEditor(),
        key: 'name'
      },
      {
        editor: new Y.DateCellEditor(),
        key: 'date'
      }
    ];

    new Y.DataTable(
      {
        columns: columns,
        data: data
      }
    ).render("#myDataTable");
  }
);

Columns can also be set to sort when the component datatable-sort is passed in, and sortable is set to true in the columns object.

YUI().use(
  'aui-datatable',
  'datatable-sort',
  function(Y) {
    var columns = [
      {
        key: 'name',
        sortable: true
      },
      {
        key: 'date',
        sortable: true
      }
    ];

    new Y.DataTable(
      {
        columns: columns,
        data: data
      }
    ).render("#myDataTable");
  }
);