gridy-grid-default

Gridy Grid Default Theme

This package allows you to have almost not styled web components data grid. Default theme is loaded by default, when you not specified theme in configurations.

The detailed docs can be found here: gridy-grid

Gridy Grid uses Skinny Widgets library, so you can go with wider number of elements: skinny-widgets

Installation

npm i gridy-grid gridy-grid-default sk-theme-default --save

Usage

<gridy-table id="gridyTable"></gridy-table>

<script type="module">
    import { GridyTable } from '/node_modules/gridy-grid/src/table/gridy-table.js';
    import { DataSourceLocal } from '/node_modules/gridy-grid/src/datasource/data-source-local.js';
    let dataSource = new DataSourceLocal();
    dataSource.fields = [
        { title: 'Title', path: '$.title' },
        { title: 'Price', path: '$.price' }
    ];
    let data = [];
    for (let i = 0; i < 10; i++) {
        data.push({ title: 'row' + i, price: 100 * i })
    }
    // local datasource data load should be called explicitly
    gridyTable.dataSource = dataSource;
    customElements.define('gridy-table', GridyTable);
    dataSource.loadData(data);
</script>