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 =
    [
        {id:'n1', year:1950, quantity:10, title:"The Lion, the Witch and the Wardrobe"},
        {id:'n2', year:1951, quantity:5, title:"Prince Caspian: The Return to Narnia"},
        {id:'n3', year:1952, quantity:2, title:"The Voyage of the Dawn Treader"},
        {id:'n4', year:1953, quantity:6, title:"The Silver Chair"},
        {id:'n5', year:1954, quantity:9, title:"The Horse and His Boy"}
    ];

// 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;
       ...