Home

Awesome

WARNING This package is deprecated in favor of the grid provided by @dojo/widgets.

@dojo/dgrid

Build Status codecov npm version

dgrid is a reactive, uni-directional grid component built using Dojo 2.

Features

Image of basic grid

Data Providers

Each grid must be passed a dataProvider. dgrid ships with a data provider to read an array of data.

Column Configuration

Each grid must be passed an array of Column objects.

Column<T = any, V = string> has two optional generics:

Each column supports properties that allow customization:

Example Usage

Basic Example

const data = [
	{ order: 1, name: 'preheat', description: 'Preheat your oven to 350F' },
	{ order: 2, name: 'mix dry', description: 'In a medium bowl, combine flour, salt, and baking soda' },
	{ order: 3, name: 'mix butter', description: 'In a large bowl, beat butter, then add the brown sugar and white sugar then mix' },
	{ order: 4, name: 'mix together', description: 'Slowly add the dry ingredients from the medium bowl to the wet ingredients in the large bowl, mixing until the dry ingredients are totally combined' },
	{ order: 5, name: 'chocolate chips', description: 'Add chocolate chips' },
	{ order: 6, name: 'make balls', description: 'Scoop up a golf ball size amount of dough with a spoon and drop it onto a cookie sheet' },
	{ order: 7, name: 'bake', description: 'Put the cookies in the oven and bake for about 10-14 minutes' },
	{ order: 8, name: 'remove', description: 'Using a spatula, lift cookies off onto wax paper or a cooling rack' },
	{ order: 9, name: 'eat', description: 'Eat and enjoy!' }
];

const dataProvider = new ArrayDataProvider({
	idProperty: 'order',
	data
});

const columns = [
	{
		id: 'order',
		label: 'step' // use a custom column name
	},
	{
		id: 'name'
	},
	{
		id: 'description',
		sortable: false
	}
];

w(Grid, {
    dataProvider,
    columns
});

Cell Customization

const columns: Column[] = [
	{
		id: 'order'
	},
	{
		id: 'description',
		render({ item, column }) {
			return v('dl', [
				v('dt', [
					item.data.name
				]),
				v('dd', [
					item.data[column.id]
				])
			]);
		}
	}
];

Value Customization

const columns: Column[] = [
    {
        id: 'description',
        get(item, column) {
            return `Step #${item.data.order}: ${item.data.description}`;
        }
    }
];

Multi-Column Sorting

const dataProvider = new ArrayDataProvider({
	data,
	idProperty: 'order'
}, {
	sort: [ { columnId: 'name', direction: 'desc' }, { columnId: 'description', direction: 'asc' } ]
});

Theming

The following CSS classes are used to style the Grid widget:

How do I contribute?

We appreciate your interest! Please see the Dojo 2 Meta Repository for the Contributing Guidelines and Style Guide.

Testing

Test cases MUST be written using Intern using the Object test interface and Assert assertion interface.

90% branch coverage MUST be provided for all code submitted to this repository, as reported by istanbul’s combined coverage results for all supported platforms.

To test locally in node run:

grunt test

To test against browsers with a local selenium server run:

grunt test:local

To test against BrowserStack or Sauce Labs run:

grunt test:browserstack

or

grunt test:saucelabs

Licensing information

TODO: If third-party code was used to write this library, make a list of project names and licenses here

© 2017 JS Foundation. New BSD license.