MRE Sandbox

by origineil

HTML

<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.dataview.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/firebugx.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery-1.7.min.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.core.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.formatters.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.editors.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.groupitemmetadataprovider.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.columnpicker.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/controls/slick.pager.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/images/tick.png"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
<title>SlickGrid example: Grouping</title>
<table>
    <tr>
        <td>
            <div> <b>Options:</b>

                <button onclick="printSelectedRows()">Debug</button>
                <div style="padding:6px;">
                    <button onclick="dataView.setGrouping([])">Clear grouping</button>
                ...

CSS

.cell-effort-driven {
        text-align: center;
    }
    .slick-group-title[level='0'] {
        font-weight: bold;
    }
    .slick-group-title[level='1'] {
        text-decoration: underline;
    }
    .slick-group-title[level='2'] {
        font-style: italic;
    }
    /*Slick*/
    .slick-header.ui-state-default, .slick-headerrow.ui-state-default {
        width: 100%;
        overflow: hidden;
        border-left: 0px;
    }
    .slick-header-columns, .slick-headerrow-columns {
        position: relative;
        white-space: nowrap;
        cursor: default;
        overflow: hidden;
    }
    .slick-header-column.ui-state-default {
        position: relative;
        display: inline-block;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        height: 16px;
        line-height: 16px;
        margin: 0;
        padding: 4px;
        border-right: 1px solid silver;
        border-left: 0px;
        border-top: 0px;
        border-bottom: 0px;
        float: left;
    }
    .slick-headerrow-column.ui-state-default {
        padding: 4px;
    }
    .slick-header-column-sorted {
        font-style: italic;
    }
    .slick-sort-indicator {
        display: inline-block;
        width: 8px;
        height: 5px;
        margin-left: 4px;
        margin-top: 6px;
        float: left;
    }
    .slick-sort-indicator-desc {
        background: url(images/sort-desc.gif);
    }
    .slick-sort-indicator-asc {
        background: url(images/sort-asc.gif);
    }
    .slick-resizable-handle {
        position: absolute;
        font-size: 0.1px;
        display: block;
        cursor: col-resize;
        width: 4px;
        right: 0px;
        top: 0;
        height: 100%;
    }
    .slick-sortable-placeholder {
        background: silver;
    }
    .grid-canvas {
        position: relative;
        outline: 0;
    }
    .slick-row.ui-widget-content, .slick-row.ui-state-active {
        position: absolute;
       ...