YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataTable Control

# 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.
- 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)

### DataTable Control:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF(external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings