Ajax Girl

Victor Morales was inspired by the ADO.NET disconnected data model, and it’s “Dataview” which led him to implement something similar for YUI.

He created a subclass of DataTable that allows the user to filter rows in the datatable, without the need to make another XHR call.

Row Filtering

The class YAHOO.dpu.widget.DataTable adds the “defaultView” property,
which contains a copy of the “unfiltered” RecordSet of a Datatable.

To filter rows in a DataTable you need a “RowFilter” and its
corresponding FilterAlgorithm (i.e. StringFilter), which tells the
DataTable which rows to display.

I implemented a sample RowFilter subclassing the autocomplete widget,
but it shouldn’t be too dificult to use a different implementation.

Hide Columns

To define a column as “hideable”, when creating the column object, you
have to specify the property hideable to true:

Example:

To hide columns, just right-click anywhere inside the TH.

Source: Ajaxian
Original Article: http://ajaxian.com/archives/yui-datatable-with-row-filtering