JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Gable.js</title>
        <script src="https://raw.github.com/editor/Gable/master/gable.js"></script>
    </head>
    <body>
        <div id='example1'></div>
    </body>
</html>

JavaScript

var data = [
        { Title: "A Midsummer Night's Dream"
        , Type: 'COMEDY'
        , Year: 1595 }
        , [ "All's Well That Ends Well", 'COMEDY', 1602 ]
        , [ "Antony and Cleopatra", 'TRAGEDY', 1606 ]
        , [ "As You Like It",'COMEDY', 1599 ] 
        , [ "Comedy of Errors",'COMEDY', 1589 ]
        , [ "Coriolanus",'TRAGEDY', 1607 ]
        , [ "Cymbeline",'HISTORY', 1609 ]
        , [ "Hamlet",'TRAGEDY', 1600 ]
        , [ "Henry IV,Part I", 'HISTORY', 1597 ]
        , [ "Henry IV,Part II", 'HISTORY', 1597 ]
        , [ "Henry V",'HISTORY', 1598 ]
        , [ "Henry VI,Part I", 'HISTORY', 1591 ]
];

Gable( 'shakespere_works' )
.add( { value: data } )
.draw( { target: 'example1', type: 'table' } );