JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div class="grid"></div>

SCSS

._grid-container {
    font-family:arial;
    font-size:12px;
    ._grid {
        border:1px solid #eee;
        border-right:0;
        padding:0;
        margin:0;
        border-spacing: 0;
        border-collapse: collapse;
        width:100%;
        tr._hierarchy-container {
            display:none;
        }
        th, td {
            border-right:1px solid #eee;
            padding:7px;
        }
        th {
            text-shadow:#fff 1px 1px 0px;
            text-align:left;
            color:#555;
            background: #fafafa;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#f1f1f1));
            background: -webkit-linear-gradient(#fafafa 0%, #f1f1f1 100%);
            background: -moz-linear-gradient(#fafafa 0%, #f1f1f1 100%);
            background: -o-linear-gradient(#fafafa 0%, #f1f1f1 100%);
            background: linear-gradient(#fafafa 0%, #f1f1f1 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f1f1f1', GradientType=0);
        }
        tr {
            td {
                border-top:1px solid #eee;
            }
            &.odd td{
                background:#fcfcfc;
            }
        }
        tfoot{
            th{
                background:#eee;
                border:1px solid #ddd;                
            }
        }
    }
}

JavaScript

(function ($, window, document, undefined) {
    $.fn.grid = function (data, options) {
        var _data = data,
            _options = options,
            _columns = [];

        /**
         * Generate Columns from data array
         * @param data
         */
        function getColumns() {
            if (_columns.length) return _columns;
            else {
                for (var k in data[0]) {
                    _columns.push(k);
                }
                return _columns;
            }
        }

        /**
         * Generate Grid Template
         * @param 
         */
        function getTemplate() {
            var _columns = getColumns(),
                _template = ['<div class="_grid-container">',
                    '<table class="_grid">',
                    '<thead>',
                    '</thead>',
                    '<tbody>',
                    '</tbody>',
                    '<tfoot>',
                    '</tfoot>',
                    '</table>',
                    '</div>'];

            //columns
            $(_columns).each(function (i, c) {
                _template.splice(3 + i, 0, '<th>' + c + '</th>');                
            });
            //rows
            _template.splice(-5, 0, gerRows());
            //footer
            $(_columns).each(function (i, c) {
                _template.splice(-3, 0, '<th> y</th>');
            });

            return $(_template.join(''));
        }

        /**
         * Generate Rows
         * @param 
         */
        function gerRows() {
            var _columns = getColumns(data),
                _rows = [];
            $(data).each(function (i, d) {
                _rows.push('<tr class="' + (i % 2 === 0 ? 'even' : 'odd') + '">');
                $(_columns).each(function (j, c) {
                    _rows.push('<td>' + d[c] + '</td>');
                });
                _rows.push('<tr class="_hierarchy-container"><td colspan="' + _columns.length + '"></td></tr>');
...