npm

@simple-html/datasource
TypeScript icon, indicating that this package has built-in type declarations

5.0.0-next.1 • Public • Published

@simple-html/datasource

Datasource made for @simple-html/grid

sample

API docs:

Source code:

Features/Todo:

Minimal sample:

import './index.css';
import { Datasource } from '@simple-html/datasource';
import { GridInterface, GridElement, GridConfig } from '@simple-html/grid';
import "@simple-html/grid/dist/grid.css";

/**
 * create datasource
 */
const datasource = new Datasource();

// add data
datasource.setData([
    { firstname: 'first1', lastname: 'last1' },
    { firstname: 'first2', lastname: 'last2' },
    { firstname: 'first3', lastname: 'last3' }
]);

/**
 * create gridConfig
 */
const gridConfig: GridConfig = {
    columnsCenter: [
        {
            rows: ['firstname'],
            width: 100
        },
        {
            rows: ['lastname'],
            width: 100
        }
    ],
    attributes: [
        {
            attribute: 'firstname'
        },
        {
            attribute: 'lastname'
        }
    ]
};


/**
 * create interface and add gridconfig and datasource to it
 */
const gridInterface = new GridInterface(gridConfig, datasource);

/**
 * create element for the grid
 */
const element = document.createElement('simple-html-grid') as GridElement;
element.style.width = '100%';
element.style.height = '100%';
element.style.display = 'flex';
element.classList.add('simple-html-grid');
element.connectInterface(gridInterface);

document.body.appendChild(element);

Readme

Keywords

none

Package Sidebar

Install

npm i @simple-html/datasource

Weekly Downloads

7

Version

5.0.0-next.1

License

MIT

Unpacked Size

347 kB

Total Files

74

Last publish

Collaborators

  • vegarringdal