Design the Web: Creating a Sortable Table
33mBeginner2018-04-27
Authors
Chris Converse
Applies design and UX principles to technology
Course details
HTML tables don't have to be a static read-only affair. Learn how to create tables that allow users to sort them any way they see fit. Chris Converse explains how to use jQuery and a free plugin called tablesorter to create a sortable, interactive table with just a few lines of code. He also shows how to add indicator arrows and colors with CSS and create a custom parser to sort dates more intelligently. As with all episodes of Design the Web, the exercise files for this course (including the tablesorter plugin) are free to all members.
Skills covered
Interactive Web ContentWeb DesignLimited Series
Concepts
0. Introduction
- 01 - Introduction
- 02 - About the exercise files
1. Making an HTML Table Sortable
- 03 - Preparing the HTML file
- 04 - Activating the plugin
- 05 - Setting a default sort on page load
- 06 - Highlighting the sorted column
- 07 - Creating CSS triangles to indicate sort order
- 08 - Creating custom sort properties
- 09 - Where to go from here