• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!



Page history last edited by Scott González 9 years, 10 months ago

jQuery UI Grid Project




jQuery UI Grid Team

  • Project Manager: Richard D. Worth
  • Technical Lead: Jörn Zaefferer
  • Corey Frang  
  • Scott González
  • Adam Sontag (Bocoup)
  • Boris Moore (Microsoft)
  • Brad Olenick (Microsoft)
  • Chris Bannon (Wijmo)
  • John Ayers (Wijmo)
  • Kin Blas (Adobe)
  • Hans Hillen (TPG)
  • Kris Borchers
  • Felix Nagel 


Status and Tasks


Latest Update: See our Oct 2011 update http://blog.jqueryui.com/2011/10/state-of-the-jquery-ui-grid/


Status: Dedicated work on the Grid project is on hold at the moment while the jQuery UI team focuses on the rest of the Roadmap. From http://jquery.org/updates/2012/01/19/grid-status-update-19/:


"While it is unfortunate that the progress on the main grid components isn't in a release yet, further delaying the jQuery 1.9 release is also not desirable (its been nearly 2 years now since 1.8). Taking that into account, the jQuery UI team wants to focus all available resource on the 1.9 release, after which the work on the Grid can be finished."


The jQuery UI Roadmap currently has 4 major releases: 1.11, 1.12, 1.13, and 2.0 before a release that would include the Grid: 2.1.


Previously being worked on:



Development Approach

There are a number of high quality jQuery grid plugins today. We recognize they each have an impressive set of features, capabilities, and a level of use by members of the jQuery community. We aim to study and apply best practices from today's most popular grid and data table plugins, including current favorites, SlickGrid, jqGrid, DataTables and a few not updated in a while, tablesorter, Flexigrid, and Ingrid.


We invite all authors and users of these and any other grid plugins to assist us in designing best practices for creating a jQuery UI Grid.


We've undertaken a thorough analysis of the markup and css used by existing plugins. This research will form a base for our own grid markup and css specs. See the Grid-Markup page for more details. We're also researching existing data model patterns. See Grid-DataModel for details on this work.


Getting Involved

We would love your help in planning and developing the jQuery UI Grid.


How to get involved with the jQuery UI Grid project:





Stage 1 - Zero Feature Grid

Estimate: 250 hours

During this stage the following components are to be implemented:
  • Templating
  • Data Model
  • Type
  • Zero Feature Grid


1.1 Templating

Estimate: 50 hours
It's planned to use the jquery-tmpl plugin for any feature where html markup is generated by the grid. Customization of markup is then possible by overriding related options, eg. an option for the row template. As jquery-tmpl allows templates to reference other templates, it is possible to build a hierarchy of templates, making customization quite efficient as an override of a single template would still be quite simple (in contrast to having a single template for everything, which would make any customization require to clone the full template). While jquery-tmpl already exists, its not finished, doesn't have any tests and may lack certain features required for grid.


Status: Work on Template is still ongoing, including a Template Comparison


1.2 Data Model

Estimate: 100 hours
The data model is an abstraction for querying and modifying data from an arbitrary data source. For an editable grid with a serverside data source, the data model holds the data to display and edit in the grid, while queries and updates are pushed to the server. The data model facilitates implementation of optimizations like caching and batch updates. While the primary use-case for the data model will be the grid, its planned to make it available to other widgets, too. As other widgets that could use this abstraction, like the Autocomplete widget, have much simpler querying requirements, the data model API will initially be designed simply enough to justify its usage for Autocomplete.
Various data model implementations or plugins can implement different data sources, including local data (string array), local databases (localStorage, sqlite), remote databases (key-value store or relational on server-side) or even third-party web-services (like geolocation services). Remote data formats for parsing and serialization can be abstracted, too, to enable formats such as JSON, XML, CSV.
Status: Stage 1 complete, yet data model work ongoing as part of pretty much all stages.


1.3 Type

Estimate: 40 hours

The Type feature handles detecting, validating, parsing and serializing various data types. One purpose is to enable type-specific sorting and filtering, like currencies or dates.
Implementations for dates and numbers could delegate to the jquery-global plugin.
Status: Completed, with Globalize in good shape. Used by localDataview to sorting and filtering. Used by custom inputs like Spinner and Timepicker.


1.4 Zero Feature Grid

Estimate: 60 hours
This tasks covers implementing the simplest grid possible, by enhancing a regular html table. Enhancements include:
  • Injecting markup to allow styling the table with the CSS framework (eg. make it ThemeRoller-ready)
  • Creating a titlebar based on the table's caption, if present.
  • Markup and styles necessary for scrolling of the table body, while keeping the header visible.
  • Trimming cell contents to prevent wrapping, and forcing equal heights for all rows. 
These enhancements can be applied multiple times, so that a refresh can reflect changes to the underlying table.
Status: In good shape, needs to improve scrollbar rendering and some other CSS issues.


Stage 2 - Generic Plugin Dependencies

Estimate: 210 hours

During this stage the following components are to be implemented:
  • Sorting
  • Paging
  • Filtering
  • Menu


2.1 Sorting

Estimate: 30 hours
Sorting includes a widget for single column sorting: Indicating clicks areas, handling input, outputting current sort directions. The widget must be flexible enough to allow implementing mutli-column sorting, too.
The widget must communicate with the data model to indicate which columns to sort in which direction (if sortable in the first place), and to display the current sort order.


Status: Menugrid component needs to be finished.


2.2 Paging (Pager)

Estimate: 80 hours
Paging includes a widget for paging through a data set: Offering various controls to choose the page to display, while indicating the current page as well as the total number of pages.
The widget must communicate with the data model to indicate which page to show next, and to display the available pages and current page.


Status: Pager widget needs updates, scroll-based paging needs prototype.


2.3 Filtering

Estimate: 60 hours
Filtering includes a widget for selecting data to display: Inputs for specifying filters based on column types (or a single input for all columns), and a display of current applied filters.
The widget must communicate with the data model to indicate which rows to output, as well as indicating the current set of filters.


Status: Menugrid component needs to be finished.


2.4 Menu

Estimate: 40 hours
Menu is a critical dependency for grid, to be used for any context menus (eg. to group various column sorting and filtering options). While work on menu is already being done for 1.9, it doesn't yet have any built-in support for nested (or drilldown) menus.
Status: Menu now supports nested menus and has addon extensions Menubar and Popup. Drilldown menus not yet implemented.

Stage 3 - Generic Plugin Dependencies II

Estimate: 400 hours

During this stage the following components are to be implemented:
  • Selecting
  • Editing
  • Custom Inputs


3.1 Selecting

Estimate: 100 hours
A selectable interaction that works with rows, columns and cells (or, optionally, just one of these), and interacting with the data model to publish  the actual selection. Supports the same keyboard interaction as selectable (the planned/new one). Could use checkboxes or radios to indicate selecting rows.


Status: work in progress - grid prototype based on existing Selectable exists; functional spec including both keyboard and mouse interaction.


3.2 Editing (Observable)

Estimate: 120 hours
A widget for editing cells. The editing ability can be specified for each column, the editor to use depends on the column type (see 3.1.3 Type). Editing can be cancelled (ie. throwing away all changes), or persisted (ie. synchronizing changes with the data model). Activating inline editing can happen for a single cell or a full row (or even full grid). Activating editing must interact with selection to avoid conflicts, e.g. a selection musn't start editing.


Status: work in progress - multiple prototypes written, various TODOs and issues still open


3.3 Custom Inputs

Estimate: 180 hours
A set of widgets to provide custom editors for inline editing, based on the types explored in 1.3 Type. While some widgets already exist in jQuery UI (e.g. autocomplete), most required widgets are missing or need to be heavily improved. Datepicker needs a full rewrite to be as flexible as needed for the grid. This likely affects most widgets, except accordion and tabs.
Status: work in progress - Selectmenu, Mask and Timepicker in good shape, prototype for Editable

Stage 4 - Grid Add-ons

Estimate: 150hrs

During this stage the following components are to be implemented:
  • Hide/Show Columns
  • Column Reordering
  • Column Resizing
  • Column Totals
  • Row Grouping
  • Formulas 


4.1 Hide/Show Columns

Estimate: 20 hours
A widget to control which columns to show and hide. Needs to display a UI that doesn't depend on column headers, as those aren't available for hidden columns. Needs to communicate with data model about visibility changes.
Status: in planning


4.2 Column Reordering

Estimate: 30 hours
A widget for drag and drop based reordering of columns, by dragging the column headers. During drag only a preview is actually dragged, instead of dragging the full column (unless actually feasible). The widget will communicate with the data model for any updates.
Status: in planning


4.3 Column Resizing

Estimate: 40 hours
A widget for resizing of columns, by dragging the edge of columns. If real-time updates during drag aren't feasible, only a visual indicator denotes the resulting column size, while the actual resize happens on drag stop.
Status: in planning


4.4 Column Totals

Estimate: 15 hours
A widget to display summaries or totals for columns. The data comes from the data model, which could compute totals on the client-side, or ask the server for details.
Status: in planning


4.5 Row Grouping

Estimate: 30 hours
A widget to group multiple rows under a shared header, with its own label. The header can be used to collapse a group. The widget can be combined with the Column Totals widget to show totals for each group.
Status: in planning


4.6 Formulas

Estimate: 15 hours
A data model extensions to specify columns that compute their values based on other cells, eg. for row totals. Needs a hook to specify additional columns and their ordering, along with a hook to calculate cell values. Makes sense when the data coming from the server is fixed and can't be extended to include these columns in the first place. Needs to interact with the sorting widget and data model to handle sorting of these computed columns.
Status: in planning



The jQuery UI Grid Project was conceived of in late 2009. At that time, we recognized that though we always wanted to create a grid component as part of jQuery UI, the scope and complexity of the effort had prevented it from ever getting started with the limited resources of the project and team. We started thinking and talking (with ourselves and others) about what we could do if we had some resources dedicated to the grid.

In early 2010 the jQuery UI Team met for a few days to plan out the grid project and put together a roadmap including milestones and estimates for each stage. After some additional planning and discussion in the following months we had a project proposal to present to sponsors with a target to start development in December 2010.



The jQuery project would like to recognize and thank the generous support of the following sponsors that make this work possible:


Double Platinum Grid Sponsors

  • Microsoft - The Microsoft Web Platform and Tools team builds many technologies for developing web sites including ASP.NET, ASP.NET MVC, IIS, Visual Web Developer and Web Matrix.


  • Adobe - Adobe Systems Incorporated offers business, creative, and mobile software solutions that revolutionize how the world engages with ideas and information.

Platinum Grid Sponsors

  • Wijmo - Wijmo is a complete kit of over 30 jQuery UI Widgets. It is a mixture of jQuery, CSS3, SVG, and HTML5 that, when combined, become an unstoppable force on the web.


  Would you or your company like to help sponsor the jQuery UI Grid project? Email richard@jquery.com . Thank you for your support.  


sponsor credits: All trademarks are the property of their respective owners. 


Comments (0)

You don't have permission to comment on this page.