DataTable Control (beta): Examples

The DataTable Control provides a simple yet powerful API to display screen-reader accessible tabular data on a web page. Notable features include sortable columns, pagination, scrolling, row selection, resizeable columns, and inline editing.

• Basic Example: A demonstration of the DataTable's basic feature set.
• Progressive Enhancement: A progressively enhanced DataTable based on existing markup.
• Custom Cell Formatting: Custom formatting for DataTable cells.
• Conditional row coloring: Coloring DataTable rows using custom column formatters.
• Nested Headers: Nested column headers.
• JSON Data Over XHR: The display of tabular JSON data retrieved via XHR.
• XML Data Over XHR With POST: The display of XML data retrieved via an XHR POST request.
• Textual Data Over XHR: The display of textual data retrieved over XHR
• Local XML Data: The display of XML data placed locally within the page by Connection Manager.
• Adding and Deleting Rows: Adding and deleting rows with dynamic data.
• Client-side Pagination: The use of client-side pagination to break up a dataset into manageable, page-sized chunks.
• Client-side Sorting: Client-side Column sort using a custom function.
• Server-side Pagination: Server-side pagination using the Paginator widget.
• Server-side Sorting: Sorting handled by a server.
• Server-side Pagination and Sorting, with Browser History Manager: Integration of server-side pagination and sorting, integrated with the Browser History Manager.
• XY-scrolling, Y-scrolling, and X-scrolling: Scrolling along x, y, or xy axes.
• Row Selection: Row selection models.
• Cell Selection: Cell selection models.
• Inline Cell Editing: Implementing inline cell editing.
• Context Menu Integration: Integration of DataTable with the the Menu Control's ContextMenu feature.
• Showing, Hiding, and Reordering Columns.: Showing, hiding, and reordering Columns.
• Highlighting Cells, Rows, or Columns: Enable highlighting on cells, rows, or columns
• Complex Example of Multiple Features: Several features combined into one DataTable.
• Datatable with Autocomplete: Use an AutoComplete Control to filter Datatable results.
• Skinning Model: An explanation of DataTable's skinning model.
• Configuring the Paginator: Exhibition of Paginator instance configuration.

Other YUI Examples That Make Use of the DataTable Control (beta)

• Complex Application (included with examples for the Layout Manager (beta))