JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<div id="controls">
    <button id="start">QuickEdit</button>
    <button id="create">Create</button>
    <button id="save" style="display:none;">Save</button>
    <button id="cancel" style="display:none;">Cancel</button>
</div>

<div id="pg"></div>

<div id="table"></div>

<button id="enableAttr">enableAttr</button>
<button id="disableAttr">disableAttr</button>

<div id="console"></div>

JavaScript

YUI({
    //    filter: 'raw', combine: false,
    gallery: 'gallery-2012.08.08-20-03'
}).use('datatable-datasource', 'gallery-quickedit', 'gallery-paginator', function(Y) {
    "use strict";

    function sendRequest() {
        table.datasource.load({
            request: pg.getState()
        });
    }

    // Raw data
    var data = [{
        id: '1',
        attribute: "attr1",
        value: "val1"},
    {
        id: '2',
        attribute: "attr2",
        value: "val2"},
    {
        id: '3',
        attribute: "attr3",
        value: "val3"}];

    // Data Source
    // extend local data source to understand pagination

    function CustomDataSource() {
        CustomDataSource.superclass.constructor.apply(this, arguments);
    }


    CustomDataSource.NAME = "customdatasource";

    Y.extend(CustomDataSource, Y.DataSource.Local, {
        _defDataFn: function(e) {
            var response = {
                results: e.data.slice(e.request.recordOffset, e.request.recordOffset + e.request.rowsPerPage),
                meta: {
                    totalRecords: data.length
                }
            };

            this.fire("response", Y.mix({
                response: response
            }, e));
        }
    });

    // create data source
    var ds = new CustomDataSource({
        source: data
    });

    // Paginator
    var pg = new Y.Paginator({
        //totalRecords: 5,
        rowsPerPage: 40,
        template: '',
        //{FirstPageLink}{PreviousPageLink}{PageLinks}{NextPageLink}{LastPageLink} <span class="rpp">Rows per page:</span> {RowsPerPageDropdown}
        //rowsPerPageOptions:    [5,10],
        firstPageLinkLabel: '',
        //|&lt;
        previousPageLinkLabel: '',
        //&lt;
        nextPageLinkLabel: '',
        //&gt;
        lastPageLinkLabel: '' //&gt;|
    });
    pg.render('#pg');

    pg.on('changeRequest', function(state) {
        this.setPage(state.page, true);
        this.setRowsPerPage(state.rowsPerPage,...