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.
• XML Data with XPath: Accessing XML data with XPath-syntax locators.
• Textual Data Over XHR: The display of textual data retrieved over XHR
• 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
• Reorder Rows with Drag and Drop: Integration of DataTable with Drag and Drop to enable row reordering.
• Quick Edit: A demonstration of switching DataTable into Quick Edit mode.
• Row Expansion: A demonstration of the DataTable's row expansion feature to display a list of "Interestingness" from Flickr.
• Context Menu Integration: Integration of DataTable with 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.
• Client-side Filtering of Local Data: Filtering of local data with an input field.
• Filtering of Dynamic Data: Filtering of dynamic data through Menu Button controls.
• 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)
• Ratings (included with examples for the ProgressBar Control)
• YQLDataSource (included with examples for the DataSource Utility)
• Complex Application (included with examples for the Layout Manager)