JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.enyo-data-list {
    line-height: 5em;
}

JavaScript

enyo.kind({
    name: "MySample",
    kind: "enyo.FittableRows",
    components: [
        {kind: "onyx.Toolbar", content: "Your sample here"},
        {kind: "enyo.DataList", fit: true, 
            components: [
               {
                   bindings: [{from: "model.name", to: "$.input.value"}],
                   components: [
                       {kind: "onyx.InputDecorator", components: [
                           {kind: "onyx.Input"}
                       ]}
                   ]
               }  
            ],
            scrollerOptions: {
                strategyKind: "enyo.TranslateScrollStrategy"
            }
        }
    ],
    create: function() {
        var data = [];
        this.inherited(arguments);
        for (var i = 0; i < 1000; i++) {
            data.push({name: "Item " + i});
        }
        this.$.dataList.collection = new enyo.Collection(data);
        this.$.dataList.$.scroller.getStrategy().translateOptimized = false;
    }
});

new MySample({fit:true}).renderInto(document.body);