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>

CSS

#controls
    {
        margin: 10px 0;
    }

    .rpp
    {
        padding-left: 1.5em;
    }

    .yui3-skin-sam .yui3-datatable caption
    {
        padding: 0 !important;
    }

    .yui3-skin-sam .yui3-paginator-rpp-options
    {
        margin-left: 0;
    }

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 =
    [
        {attribute:'attr1', value:"v1"},
        {attribute:'attr2', value:"v2"}
    ];

// 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, true);
        sendRequest();
    });

    ds.on('response', function(e)
    {
       ...