le-grid
v2.0.0
Published
Reactive grid in Dojo 2
Downloads
7
Readme
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
- Theid
of the columntitle
- The display title of the column, this can be a string or a custom renderer function that returns aDNode
filterable
- Optional property that indicates if the column is filterable, defaults tofalse
sortable
- Optional property that indicates if the column is sortable, defaults tofalse
editable
- Optional property that indicates if the column is editable, defaults tofalse
renderer
- Optional custom renderer function for the column cell, defaults toundefined
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
fromcolumnConfig
of the column that sort has been requested fordirection
- direction of the sort requested, eitherasc
ordesc
Filter Options
columnId
-id
fromcolumnConfig
of the column that sort has been requested fordirection
- 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.
id
Optional id
that specifies the root path that of the store that the grid data will be stored.
Testing
Tests are written using Intern with the bdd
interface.
To test locally in node run:
grunt test
To test against browsers with a selenium server run:
grunt test:local
To test against browserstack run:
grunt test:browserstack