JSFiddle - React, Tailwind, and code Playground

by wrexroad

CSS

th, td {
    padding:0.4em;
    border:1px solid #e0e0e0;
}
th {
    color: grey
}

JavaScript

enyo.kind({
    name: "DataTable",
    content: "test"
});

enyo.kind({
    name:"App",
    kind:"Scroller",
    components:[
        {
            kind: "DataTable", 
            //set initial map and data values here or use the 
            //DataTable.setData() and DataTable.setMap() functions 
            //later
            map: [
                {field:"one", header:"One"},
                {field:"two", header:"Two"}, 
                {field:"three", header:"Three"}
            ],
            data: [
                {one: 1, two: 2, three: 3},
                {one: "i", two: "ii", three: "iii"},
                {one: "I", two: "II", three: "III"}
            ],
            
            //setting noHeader to true will prevent the top row 
            //of header information from being generated 
            //noHeader: true
        },
        {kind:"onyx.Button", name: "loadButton", content: "Load Data", ontap: "tapped"}
    ],  
    tapped: function(source, event){
                
        //You can change the map here if you need to
        this.$.dataTable.setMap([
            {header:"Instance", field:"instance"},
            {header:"Client", field:"mandt"},
            {header:"User Name", field:"bname"},
            {header:"Terminal", field:"term"},
            {header:"Transaction Code", field:"tcode"},
            {header:"Time", field:"zeit"}
        ]);
        
        //an ajax call should go between here---------------------
        function createData(){
            var number = parseInt(Math.random()*10);
            return {
                instance: number,
                mandt: number,
                bname: number,
                term: number,
                tcode: number,
                zeit: number
            };
        };
        var data = [];
        for(var i = 0; i < parseInt(Math.random()*20); i++){
            data[i] = createData();
        }
        //------------------and here
        
        //toggle headers each time...