Ngx-speedgrid NPM

ngx-speedgrid

The Speedgrid is a lightning fast datagrid, made for a lot of data. Usually starting with some thousands of datarows, up to 1 million (or even more), based on browser memory.

I created this grid because i have seen a lot or projects with slow grids, in most cases not easy to handle by the user. There are several reasons for this.

Slow and stuttering grids. They do stuff a user requested some seconds ago and just confuse.
Too small data packages with fetching new data at the end of the scroll limit. It's simply not working, users don't know how many data is coming, and every small scroll action leads to loading more small packages, resulting in a lot of waiting.
Paging. I think it's deprecated, since current systems / browser / server / bandwidth are able to do a lot more.

Usually, for UX reasons, grids should not even exist anymore. But reality is different, nearly every project still needs them. But why not load a lot of data, ready to be scrolled without waiting after the initial load. Some components use virtualization to display a lot of data. That works well too. But still, it is not possible to beat the performance of a canvas component.

For more detailed information, visit our blog: https://shipbit.de/blog/speedgrid-high-performance-canvas-component/

Installation

npm install ngx-speedgrid

Dependencies

The Speedgrid is a canvas based component. It uses my angular-canvas-base to handle the rendering. You can find more infos about that here: https://github.com/okuechen/angular-canvas-base

Documentation

You can find the documentation here: https://wolfamongsheep.de/speedgrid/index.html

Features

I tried to add all necessary features to this component. There is a limit though, since the base is a canvas, you cannot add dom elements to it. So putting other components into cells is not possible. But too much content in cells is not the scenario i had in mind for this grid anyways. It's all about performance and a good user experience here.

Current features

Speed: Scrolling and working with the grid like you would in a game. 60 FPS is always the target.
Theming: Use default themes or simply create your own themes.
Easy configuration and extending. Create new renderer for cells, use pipes for values.
Full row or single cell hovering defined in theme.
Full row or single cell selection.
Responsive if you want. Put it into a flex environment or css grid, it will follow your rules.
Column resizing / ordering.

What is planned for the future?

That is depending on requests and my own needs for now :D. But on my list, those topics are next:

Column drag & drop
Edit mode
Column Groups

Live Demo

Visit https://wolfamongsheep.de/speedgrid/demo/index.html for a live demo. Environment is a simple .Net Core backend, using a mariaDB to fetch and sort 10k datarows, which are all drawn by the two grids. All names are randomly generated by a script.

Simple example

    <ngx-speedgrid
        style="width: 100%; height: 500px;"
        [columns]=" columns "
        [data]=" entities "
        (clicked)=" speedgridClicked($event) "
        (selectedCellsChanged)=" selectedCellsChanged($event) "
        (orderByChanged)=" orderByChanged($event) "
    ></ngx-speedgrid>

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

    public columns: SpeedgridColumn<YourEntity>[] = [
        {
            width: 100,
            property: 'numberField',
            bodyCellRenderer: new SpeedgridBodyCellRendererNumber(),
            label: 'Number'
        },
        {
            width: 250,
            property: 'id',
            label: 'Guid'
        },
        {
            width: 350,
            property: 'textField',
            label: 'Text'
        },
        {
            width: 100,
            property: 'dateField',
            bodyCellRenderer: new SpeedgridBodyCellRendererString(new DatePipe('en-US')),
            label: 'Date'
        },
        {
            width: 70,
            property: 'imageField',
            bodyCellRenderer: new SpeedgridBodyCellRendererImage(this.imageStorageService, 16, 16),
            label: 'Image'
        },
        {
            width: 50,
            property: 'booleanField',
            bodyCellRenderer: new SpeedgridBodyCellRendererBoolean(),
            label: 'Bool'
        }
    ];

    public entities: SpeedgridEntity[] = [];

    constructor(private imageStorageService: SpeedgridImageStorageService) {}

    public ngOnInit(): void {
        // get your data somewhere and put it into this.entities;
    }

    public speedgridClicked(location: SpeedgridLocation): void {
        // handle click
    }

    public selectedCellsChanged(cells: Readonly<SpeedgridLocation[]>): void {
        // handle selection change
    }

    public orderByChanged(pairs: Readonly<SpeedgridOrderByPair[]>): void {
        // handle order by request
    }
}