DataTable Control: 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.
• Polling the DataSource: Polling the DataSource for data at regular intervals
• Adding, Updating, and Deleting Rows: Adding, updating, and deleting row 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 and Sorting for Dynamic Data: Server-side pagination and sorting for dynamic data.
• Integrating Browser History Manager with Server-side Pagination and Sorting: Integration of Browser History Manager and DataTable, with server-side pagination and sorting enabled.
• 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.
• Showing, Hiding, and Reordering Columns.: Showing, hiding, and reordering Columns.
• Highlighting Cells, Rows, or Columns: Enable highlighting on cells, rows, or columns
• Context Menu Integration: Integration of DataTable with the the Menu Control's ContextMenu feature.
• TabView Integration: Integration of DataTable with the the Menu Control's ContextMenu feature.
• 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.

Other YUI Examples That Make Use of the DataTable Control

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