Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tablesome</title>
    <link rel="stylesheet" type="text/css" href="/index.css">
    <script src="/index.js" defer></script>
</head>
<body>
​
    <main role="main">
        <h1><span>Tablesome.</span></h1>
        <div class="preferences">
            <h2>Preferences:</h2>
            <ul class="flat-list">
                <li>
                    <input type="checkbox" data-show-alerts id="show-alerts" checked>
                    <label for="show-alerts">Show alerts</label>
                </li>
            </ul>
        </div>
        <div class="filters">
            <h2>Filter on:</h2>
            <ul class="flat-list">
                <li>
                    <input type="checkbox" data-filter="species" id="filter-dogs">
                    <label for="filter-dogs">Dogs only</label>
                </li>
                <li>
                    <input type="checkbox" data-filter="age_below_8" id="filter-age">
                    <label for="filter-age">Age < 8</label>
                </li>
            </ul>
        </div>
        <div class="columns" id="select-columns-panel">
            <h2>Show columns:</h2>
            <ul class="flat-list">
            </ul>
        </div>
        <form method="get" action="/bulkedit">
            <table data-tablesome class="show-alerts">
                <thead id="header"></thead>
                <tbody id="body"></tbody>
            </table>
            <footer>
                <button class="button" type="submit" name="action" value="rescue">Rescue animal!</button>
                <button class="button button-secondary" type="submit" name="action" value="dont-care">Don’t care</button>
            </footer>
        </form>
    </main>
​
    <script type="text/handlebars" id="table-header">
        <tr>
            <td class="select-row inverted">
                <input type="checkbox" data-select-all-rows id="select-all-rows">
                <label for="select-all-rows">&nbsp;</label>
            </td>
            {{#each columns}}
            <td data-column="{{@key}}">
                {{title}}
                {{#sortable}}
                    <a data-sort="{{@key}}" href="#sort">a-z</a>
                {{/sortable}}
                {{#filterable}}
                    <select name="{{@key}}" data-filter-rows>
                        <option value="all">All</option>
                    {{#each filter_values}}
                        <option value="{{.}}">{{.}}</option>
                    {{/each}}
                    </select>
                {{/filterable}}
            </td>
            {{/each}}
        </tr>
    </script>
​
    <script type="text/handlebars" id="table-body">
        {{#each rows}}
        <tr>
            <td class="select-row">
                <input type="checkbox" data-select-row id="select-row-{{@key}}" name="{{@key}}">
                <label for="select-row-{{@key}}">&nbsp;</label>
            </td>
            {{#each this}}
            <td
                class="{{#alert}}alert{{/alert}} {{#warning}}warning{{/warning}}"
                {{#message}}title="{{.}}"{{/message}}
                data-column="{{@key}}">
                {{#if value}}
                {{value}}
                {{else}}
                {{.}}
                {{/if}}</td>
            {{/each}}
        </tr>
        {{/each}}
    </script>
​
    <script type="text/handlebars" id="select-columns">
        {{#each columns}}
        <li>
            <input type="checkbox" data-select-column="{{@key}}" id="select-column-{{@key}}" {{#visible}}checked{{/visible}}>
            <label for="select-column-{{@key}}">{{title}}</label>
        </li>
        {{/each}}
    </script>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
</body>
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
phortuinpro
0viewers