Gridy Grid All-in-One Bundle

This is Gridy Grid datatables library bundle can be used to load all needed Gridy Grid code with one file for convenience or to have wide browser support including legacy versions like Internet Explorer 11.

This package is a prebuilt version of gridy-grid

Usage

npm i gridy-grid-bundle gridy-grid-antd sk-theme-antd jquery

note: jquery is needed to render table with handlebars template engine that may be needed for old browsers support and actually optional as well as this feature

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/gridy-grid-bundle/dist/gridy-grid-bundle.js"></script>
<gridy-grid theme="antd" id="gridyGrid">
    <gridy-data-source dataref="gridData">
        <gridy-data-field title="Title" path="$.title"></gridy-data-field>
        <gridy-data-field title="Price" path="$.price"></gridy-data-field>
        <gridy-data-field title="Created" path="$.created"></gridy-data-field>
    </gridy-data-source>
    <gridy-spinner></gridy-spinner>
    <gridy-filter id="gridyFilter"></gridy-filter>
    <gridy-table id="gridyTable" rd-tpl-fmt="handlebars">
    </gridy-table>
    <gridy-pager id="gridyPager"></gridy-pager>
    <gridy-table-info id="gridyTableInfo"></gridy-table-info>
</gridy-grid>
<script type="module">
    let data = [];
    for (let i = 0; i < 25; i++) {
        let today = new Date();
        today.setDate(today.getDate() + i);
        data.push({title: 'row' + i, price: 100 * i, created: today.toLocaleDateString("en-US")})
    }
    let grid = document.querySelector('#gridyGrid');
    grid.addEventListener('bootstrap', () => {
        grid.dataSource.loadData(data);
        grid.table.whenRendered(() => {
            console.log('table rendered');
        });
    });
    customElements.define('gridy-grid', GridyGrid);
</script>

note: grid-grid-antd is optional and depends on theme of your choice, you will have to set tpl-path to folder with templates (gridy-grid.tpl.html, table.tpl.html and others), and dt-css-path for styles file in case you not installed theme (-antd, -jquery or -default) package

<script src="/node_modules/gridy-grid-bundle/dist/gridy-grid-bundle.js"></script>
<gridy-grid theme="antd" id="gridyGrid" tpl-path="/tpl/" dt-css-path="tpl/">
    <gridy-data-source dataref="gridData">
        <gridy-data-field title="Title" path="$.title"></gridy-data-field>
        <gridy-data-field title="Price" path="$.price"></gridy-data-field>
    </gridy-data-source>
    <gridy-spinner></gridy-spinner>
    <gridy-filter id="gridyFilter"></gridy-filter>
    <gridy-table id="gridyTable" rd-tpl-fmt="handlebars">
    </gridy-table>
    <gridy-pager id="gridyPager"></gridy-pager>
    <gridy-table-info id="gridyTableInfo"></gridy-table-info>
</gridy-grid>

Adding filters

To use date filter gridy-filter-date pakage have to be installed or you to plug preloaded templates.

npm i gridy-filter-date

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/gridy-grid-bundle/dist/gridy-grid-bundle.js"></script>
<sk-config
 lang="ru" id="skConfig" theme="antd"></sk-config>
<gridy-grid theme="antd" id="gridyGrid">
    <gridy-data-source dataref="gridData">
        <gridy-data-field title="Title" path="$.title"></gridy-data-field>
        <gridy-data-field title="Price" path="$.price"></gridy-data-field>
        <gridy-data-field title="Created" path="$.created"></gridy-data-field>
    </gridy-data-source>
    <gridy-spinner></gridy-spinner>
    <gridy-filter dri="date" filter-mode="ge" field-title="Created" id="gridyFilter"></gridy-filter>
    <gridy-table id="gridyTable" rd-tpl-fmt="handlebars">
    </gridy-table>
    <gridy-pager id="gridyPager"></gridy-pager>
    <gridy-table-info id="gridyTableInfo"></gridy-table-info>
</gridy-grid>
<script type="module">
    let data = [];
    for (let i = 0; i < 25; i++) {
        let today = new Date();
        today.setDate(today.getDate() + i);
        data.push({title: 'row' + i, price: 100 * i, created: today.toLocaleDateString("en-US")})
    }
    let grid = document.querySelector('#gridyGrid');
    grid.addEventListener('bootstrap', () => {
        grid.dataSource.loadData(data);
        grid.table.whenRendered(() => {
            console.log('table rendered');
        });
    });
    customElements.define('gridy-grid', GridyGrid);
    customElements.define('sk-datepicker', SkDatePicker);
</script>

GridyGridSl - slotted grid with light DOM children

The bundle exports GridyGridSl and its theme implementations (GridyGridSlDefault, GridyGridSlJquery, GridyGridSlAntd) as globals alongside GridyGrid, so the slotted container needs no extra package.

GridyGridSl renders a template built out of <slot> elements instead of relocating the child components into the shadow root, so the children stay in the light DOM - which also means jQuery and other page scripts can reach them, handy for the legacy-browser scenarios this bundle targets.

Bind it to the gridy-grid element - the tag name stays the same, only the class you register changes, and each child gets a slot attribute:

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/gridy-grid-bundle/dist/gridy-grid-bundle.js"></script>
<gridy-grid theme="antd" id="gridyGrid">
    <gridy-data-source dataref="gridData">
        <gridy-data-field title="Title" path="$.title"></gridy-data-field>
        <gridy-data-field title="Price" path="$.price"></gridy-data-field>
    </gridy-data-source>
    <gridy-spinner slot="spinner"></gridy-spinner>
    <gridy-filter slot="filter" id="gridyFilter"></gridy-filter>
    <gridy-table slot="table" id="gridyTable" rd-tpl-fmt="handlebars"></gridy-table>
    <gridy-pager slot="pager" id="gridyPager"></gridy-pager>
    <gridy-table-info slot="info" id="gridyTableInfo"></gridy-table-info>
</gridy-grid>
<script type="module">
    let data = [];
    for (let i = 0; i < 25; i++) {
        data.push({ title: 'row' + i, price: 100 * i })
    }
    let grid = document.querySelector('#gridyGrid');
    grid.addEventListener('bootstrap', () => {
        grid.dataSource.loadData(data);
    });
    // bind the Sl class to the gridy-grid element
    customElements.define('gridy-grid', GridyGridSl);
</script>

Keep the gridy-grid tag name: gridTn defaults to this.tagName.toLowerCase() and is forwarded to gridy-table and gridy-header-menu. Use grid-tn if you need a different tag.

Slot names are table, info, pager, per-page, filter, chart, view, toolbar, header-menu and spinner. A child without a matching slot attribute is not rendered.

Register only the container. The components define gridy-config, gridy-data-source and gridy-pager on demand when they need them, and the container registers the remaining children from finishBootstrap(), after bootstrapFeatures() has forwarded dataSource onto each one. Defining them yourself upgrades them too early, before they have a data source - and GridyFilter.bootstrap() attaches its <input> listener only if (this.dataSource), so a gridy-filter upgraded that way renders and then silently never filters.

mount-styles

Theme stylesheets are normally scoped to the component's shadow root, where they cannot reach light DOM content - and light DOM is exactly where slotted children live. GridyGridSl therefore moves the theme stylesheets, and the <link rel="stylesheet"> tags rendered by its template, into document.head.

mount-styles is enabled by default for GridyGridSl, so you do not need to add the attribute - and with the bundle you should not turn it off. In the bundle build the grid is the only thing that puts theme CSS into the document, so mount-styles="false" leaves every slotted child unstyled: the jQuery theme drops from 10px 18px to 1px header padding, and the antd header background goes from rgb(250, 250, 250) to transparent.

<!-- only when the theme CSS reaches the document some other way -->
<gridy-grid theme="antd" id="gridyGrid" mount-styles="false"></gridy-grid>

Mounting into document.head does make the theme global to the page. If the styles must stay scoped to the component, use the standard GridyGrid rather than turning this off on the slotted one. styles="false" skips theme stylesheets altogether, which is what you want together with tpl-path and dt-css-path when serving your own templates and CSS as shown above.

The slotted template is loaded from gridy-grid-sl.tpl.html (rather than gridy-grid.tpl.html), so a tpl-path folder or a preloaded template bundle has to provide that file too.

Bundle build

Just pack everything in one file. No transpilations. Esm modules with components will be bundled in one file.

npm run build

Build with styles inlining

npm --tpl-inline-styles=./node_modules/gridy-grid-jquery,./node_modules/sk-theme-jquery,./node_modules/sk-theme-antd run build

Usage

check index.html for example serve it with http server like this:

npx http-server