JSFiddle - React, Tailwind, and code Playground

by taylorbuley

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="notebook"></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' )
.update( { value: data, 'meta': { cssClassNames: {
    headerRow: 'notebook_header_row'
    , tableRow: 'notebook_table_row'
    , oddTableRow: 'notebook_odd_table_row'
    , selectedTableRow: 'notebook_selected_table_row'
    , overTableRow: 'notebook_over_table_row'
    , headerCell: 'notebook_header_cell'
    , tableCell: 'notebook_table_cell'
    , rowNumberCell: 'notebook_row_number_cell'
} } } )
.draw( { target: 'notebook', type: 'table' } );