npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

le-grid

v2.0.0

Published

Reactive grid in Dojo 2

Downloads

7

Readme

le grid

Build Status codecov npm version

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.

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