agubler / le-grid

Lightweight reactive dojo grid

A reactive lightweight, customizable grid widget built with Dojo 2.

A running example can be seen here.

Installation

To use le-grid, install it from npm.

npm install le-grid --save

You can then import le-grid in your application as follows:

import LeGrid from 'le-grid';

Features

• On-demand virtual rendering with supports for large datasets
• Backed by @dojo/framework/stores
• Editable cells
• Filtering and Sorting by column
• Custom cell renderers

An example of le-grid can be found here

Example Usage

import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
import { createFetcher } from 'le-grid/util';
import LeGrid from 'le-grid';

const columnConfig = [
	{
		id: 'one',
		title: 'Column One',
		sortable: true,
		filterable: true
	},
	{
		id: 'two',
		title: 'Column Two'
	}
];

const gridData: any[] = [
	{ one: '0', two: '0' },
	{ one: '1', two: '1' },
	{ one: '2', two: '2' },
	{ one: '3', two: '3' },
	{ one: '4', two: '4' },
	{ one: '5', two: '5' },
	{ one: '6', two: '6' }
];

const Projector = ProjectorMixin(LeGrid);
const projector = new Projector();
projector.setProperties({
	columnConfig,
	fetcher: createFetcher(gridData)
});
projector.append();

Properties

columnConfig

The column configuration defines how the grid will be built and what capabilities will be enabled per column.

export interface ColumnConfig {
	id: string;
	title: string | (() => DNode);
	filterable?: boolean;
	sortable?: boolean;
	editable?: boolean;
	renderer?: (props: any) => DNode;
}

• id - The id of the column
• title - The display title of the column, this can be a string or a custom renderer function that returns a DNode
• filterable - Optional property that indicates if the column is filterable, defaults to false
• sortable - Optional property that indicates if the column is sortable, defaults to false
• editable - Optional property that indicates if the column is editable, defaults to false
• renderer - Optional custom renderer function for the column cell, defaults to undefined

fetcher

The fetcher is a function responsible for returning data to the grid for the requested offset and size.

(offset: number, size: number, options?: FetcherOptions): Promise<FetcherResult<S>>;

Additionally the fetcher will receive any additional options (FetcherOptions) as a third optional parameter.

export interface FetcherOptions {
	sort?: SortOptions;
	filter?: FilterOptions;
}

Sort Options

• columnId - id from columnConfig of the column that sort has been requested for
• direction - direction of the sort requested, either asc or desc

Filter Options

• columnId - id from columnConfig of the column that sort has been requested for
• direction - value to filter on

updater

The updater is an optional function responsible for performing updates made by editable columns.

(item: S): void;

The updated item is passed to the function, if an error occurs during the updater the changes will be reverted in the grid.

store

le-grid is backed by stores from @dojo/framework/stores and by default, dynamically creates a private store as required. However it is also possible to pass an existing store used by other areas of the application.

This option will often be used in combination with id that determines the root path location that all grid data will be stored.

id

Optional id that specifies the root path that of the store that the grid data will be stored.

le-grid's Issues

Fix up the css classes

As a convention in dojo, styling is split between themeable and fixed.

Port the styles for le-grid to follow this convention and ensure that all components use ThemeableMixin.