dgrid logo
Menu

Full featured, lightweight data grids

dgrid is a next-generation grid component that takes full advantage of modern browsers and object stores. Lightweight, modular, and easily extensible, dgrid is released under the same open-source license and CLA as the Dojo Toolkit.

Open Source
"New" BSD License

dgrid 1.3.3 is now available, including bug fixes and scrolling improvements for the Tree extension!

dgrid in action

Laboratory

Explore dgrid's features in this app built with dgrid, for dgrid.

dTuned

A fast, iTunes-inspired layout using multiple dgrids.

MultiView

Rows expand to show more details when clicked.

To do List

A simple To-Do list example.

Check out more examples of dgrid components

Features

Modern Architecture

Modern Architecture

dgrid has been designed to take advantage of AMD with granular dependencies; this means it only loads the bare essentials.

Mixins

Mixins

Use declare to create a custom constructor to add features such as in-cell editing and row or cell selection.

Extensions

Extensions

Resizable columns, column reordering, pagination and more are achieved through dgrid extensions. Or easily create your own extensions to meet your specific needs.

Skinning

Skinning

dgrid ships with several default themes including the Claro theme to match the popular Dijit theme. You can easily customize dgrid through well documented CSS and/or jQuery ThemeRoller classes.

Mobile Support

Mobile Support

dgrid has been tested to work on iOS and Android browsers, providing efficient rendering for your data on the go.

A11y

A11y

The Keyboard mixin adds keyboard handling functionality. The arrow keys can be used to navigate the focus across cells and rows, providing accessibility and ease of use.

Feature Comparison

Tutorials

Getting started

This first set of tutorials provides an introduction to dgrid's core concepts and components.

Hello dgrid

Quickly get up and running with dgrid — from rendering content to extending functionality with mixins, plugins and extensions.

Defining Grid Structures

Dive into the various types of column structures dgrid can render, from the simple to the complex.

Using Grids and Stores

Learn about common concerns when using grids with stores, and explore dgrid components which interact with them.

The next level

dgrid's possibilities don't end with what's in the box; here are some examples of how to take it even further.

Rendering All Store Data at Once

Learn to extend one of dgrid's base classes to query and render all items from a store at once, and style the grid to adjust its height according to the content.

Rendering a Summary Row

Learn to create a mixin to display a row with summary information at the bottom of a grid.

Drop-down Selects with dgrid

Learn how you can use one of dgrid's lightweight base classes to create a drop-down select component that will handle thousands of options.

TransferBox: A Tale of Two Lists

Discover how to use two instances of one of dgrid's lightweight base classes to create a transfer box widget that will handle thousands of options.

Not ready for 1.0 yet? We still have tutorials for 0.3 and 0.4 too!

Documentation & Support

Using dgrid

Documentation: Documentation for each release is available under the doc folder.

Tests: dgrid includes a set of test files that may be useful for exploring its features.

Report Issues

Found a bug with dgrid? Have a suggestion? Let us know by filing an issue.

Getting help

Have a question? Get help via StackOverflow, #dojo on freenode IRC, or the dojo mailing list.

Copyright OpenJS Foundation and dgrid contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy

AltStyle によって変換されたページ (->オリジナル) /