Le-grid NPM | npm.io

le 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/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 @dojo/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.