<commit_before><template>
    <div id="datatables">
        <h1>Datatables</h1>
        <div>
            <h3>Configuration</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <toggle id="striped" v-model="customers.striped">Striped</toggle>
                    <toggle id="line-numbers" v-model="customers.lineNumbers">Line Numbers</toggle>
                    <toggle id="editable" v-model="customers.editable">Editable</toggle>
                </div>
            </div>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-options" :source="customers.columns" :filterable="false" editable>
                        <datatable-column id="label" label="Column Name"></datatable-column>
                        <datatable-column id="width" label="Width"></datatable-column>
                        <datatable-column id="sortable" label="Sortable"></datatable-column>
                        <datatable-column id="groupable" label="Groupable"></datatable-column>
                        <template slot="sortable" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + '-sortable'" v-model="cell.row.sortable"></toggle>
                            </div>
                        </template>
                        <template slot="groupable" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + '-groupable'" v-model="cell.row.groupable"></toggle>
                            </div>
                        </template>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Datatable</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-main" :source="customers.rows" :striped="customers.striped" :editable="customers.editable" :line-numbers="customers.lineNumbers">
                        <datatable-column id="sel" label="sel" width="3.25rem" :sortable="false" :groupable="false" class="checkable-column">
                            <checkbox id="sel-all" v-model="selectAll"></checkbox>
                        </datatable-column>
                        <datatable-column v-for="column in customers.columns" :key="column.id" :id="column.id" :label="column.label" :width="column.width" :alignment="column.alignment" :formatter="column.formatter"
                            :sortable="column.sortable" :groupable="column.groupable" :aggregators="column.aggregators">
                            </datatable-column>
                            <template slot="sel" scope="cell">
                                <div class="checkable-column">
                                    <checkbox :id="cell.row.id" :value="cell.row" v-model="customers.selected"></checkbox>
                                </div>
                            </template>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Selected Rows</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-selected" :source="customers.selected">
                        <datatable-column v-for="column in customers.columns" :key="column.id" :id="column.id" :label="column.label" :width="column.width" :formatter="column.formatter"></datatable-column>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Formatting</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-options" :source="formatters" :filterable="false" editable>
                        <datatable-column id="name" label="Name" width="33" :sortable="false" :groupable="false"></datatable-column>
                        <datatable-column id="format" label="Format" :sortable="false" :groupable="false"></datatable-column>
                        <template slot="format" scope="cell">
                            <div v-if="cell.row.id === 'C'">
                                <select v-model.lazy="customers.currency">
                                    <option :value="code" v-for="(symbol, code) in currencies">{{ code }} ({{ symbol }})</option>
                                </select>
                            </div>
                            <div v-else>
                                <select v-model.lazy="customers.dateFormat">
                                    <option :value="format" v-for="format in dateFormats">{{ format }}</option>
                                </select>
                            </div>
                        </template>
                    </datatable>
                </div>
            </div>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-main" 
                        :source="customers.rows" 
                        :striped="customers.striped" 
                        :editable="customers.editable" 
                        :line-numbers="customers.lineNumbers">
                        <datatable-column 
                            v-for="column in customers.columns" 
                            :id="column.id" 
                            :label="column.label" 
                            :width="column.width" 
                            :sortable="column.sortable"
                            :groupable="column.groupable"
                            :formatter="column.formatter">
                        </datatable-column>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Aggregation</h3>
            <p>
                This is a basic example of how to use aggregate functions with the datatable 
            </p>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-options" :source="customers.columns" :filterable="false" editable>
                        <datatable-column id="label" label="Column Name" width="25" data-intro="Clicking a column will sort by that column" data-step="4"></datatable-column>
                        <datatable-column id="min" label="Min"></datatable-column>
                        <datatable-column id="max" label="Max"></datatable-column>
                        <datatable-column id="average" label="Average (mean)"></datatable-column>
                        <datatable-column id="median" label="Median"></datatable-column>
                        <datatable-column id="total" label="Total"></datatable-column>
                        <template slot="min" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'min'" :value="aggregators.min" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="max" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'max'" :value="aggregators.max" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="average" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'average'" :value="aggregators.average" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="median" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'median'" :value="aggregators.median" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="total" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'total'" :value="aggregators.total" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                    </datatable>
                </div>
            </div>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-main" 
                        :source="customers.rows" 
                        :striped="customers.striped" 
                        :editable="customers.editable" 
                        :line-numbers="customers.lineNumbers">
                        <datatable-column 
                            v-for="column in customers.columns" 
                            :id="column.id" 
                            :label="column.label" 
                            :width="column.width" 
                            :sortable="column.sortable"
                            :groupable="column.groupable"
                            :aggregators="column.aggregators"
                            :formatter="column.formatter"><commit_msg>Added alignments to datatables demo page<commit_after><template>
    <div id="datatables">
        <h1>Datatables</h1>
        <div>
            <h3>Configuration</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <toggle id="striped" v-model="customers.striped">Striped</toggle>
                    <toggle id="line-numbers" v-model="customers.lineNumbers">Line Numbers</toggle>
                    <toggle id="editable" v-model="customers.editable">Editable</toggle>
                </div>
            </div>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-options" :source="customers.columns" :filterable="false" editable>
                        <datatable-column id="label" label="Column Name"></datatable-column>
                        <datatable-column id="width" label="Width"></datatable-column>
                        <datatable-column id="sortable" label="Sortable"></datatable-column>
                        <datatable-column id="groupable" label="Groupable"></datatable-column>
                        <template slot="sortable" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + '-sortable'" v-model="cell.row.sortable"></toggle>
                            </div>
                        </template>
                        <template slot="groupable" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + '-groupable'" v-model="cell.row.groupable"></toggle>
                            </div>
                        </template>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Datatable</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-main" :source="customers.rows" :striped="customers.striped" :editable="customers.editable" :line-numbers="customers.lineNumbers">
                        <datatable-column id="sel" label="sel" width="3.25rem" :sortable="false" :groupable="false" class="checkable-column">
                            <checkbox id="sel-all" v-model="selectAll"></checkbox>
                        </datatable-column>
                        <datatable-column v-for="column in customers.columns" :key="column.id" :id="column.id" :label="column.label" :width="column.width" :alignment="column.alignment" :formatter="column.formatter"
                            :sortable="column.sortable" :groupable="column.groupable" :aggregators="column.aggregators">
                            </datatable-column>
                            <template slot="sel" scope="cell">
                                <div class="checkable-column">
                                    <checkbox :id="cell.row.id" :value="cell.row" v-model="customers.selected"></checkbox>
                                </div>
                            </template>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Selected Rows</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-selected" :source="customers.selected">
                        <datatable-column v-for="column in customers.columns" :key="column.id" :id="column.id" :label="column.label" :width="column.width" :alignment="column.alignment" :formatter="column.formatter"></datatable-column>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Formatting</h3>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-options" :source="formatters" :filterable="false" editable>
                        <datatable-column id="name" label="Name" width="33" :sortable="false" :groupable="false"></datatable-column>
                        <datatable-column id="format" label="Format" :sortable="false" :groupable="false"></datatable-column>
                        <template slot="format" scope="cell">
                            <div v-if="cell.row.id === 'C'">
                                <select v-model.lazy="customers.currency">
                                    <option :value="code" v-for="(symbol, code) in currencies">{{ code }} ({{ symbol }})</option>
                                </select>
                            </div>
                            <div v-else>
                                <select v-model.lazy="customers.dateFormat">
                                    <option :value="format" v-for="format in dateFormats">{{ format }}</option>
                                </select>
                            </div>
                        </template>
                    </datatable>
                </div>
            </div>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-main" 
                        :source="customers.rows" 
                        :striped="customers.striped" 
                        :editable="customers.editable" 
                        :line-numbers="customers.lineNumbers">
                        <datatable-column 
                            v-for="column in customers.columns" 
                            :id="column.id" 
                            :label="column.label" 
                            :width="column.width" 
                            :alignment="column.alignment" 
                            :sortable="column.sortable"
                            :groupable="column.groupable"
                            :formatter="column.formatter">
                        </datatable-column>
                    </datatable>
                </div>
            </div>
        </div>
        <div>
            <h3>Aggregation</h3>
            <p>
                This is a basic example of how to use aggregate functions with the datatable 
            </p>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-options" :source="customers.columns" :filterable="false" editable>
                        <datatable-column id="label" label="Column Name" width="25" data-intro="Clicking a column will sort by that column" data-step="4"></datatable-column>
                        <datatable-column id="min" label="Min"></datatable-column>
                        <datatable-column id="max" label="Max"></datatable-column>
                        <datatable-column id="average" label="Average (mean)"></datatable-column>
                        <datatable-column id="median" label="Median"></datatable-column>
                        <datatable-column id="total" label="Total"></datatable-column>
                        <template slot="min" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'min'" :value="aggregators.min" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="max" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'max'" :value="aggregators.max" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="average" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'average'" :value="aggregators.average" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="median" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'median'" :value="aggregators.median" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                        <template slot="total" scope="cell">
                            <div class="datatable-options-toggle">
                                <toggle :id="cell.row.id + 'total'" :value="aggregators.total" v-model="cell.row.aggregators"></toggle>
                            </div>
                        </template>
                    </datatable>
                </div>
            </div>
            <div class="grid-row" layout="row top-stretch">
                <div class="grid-cell">
                    <datatable id="data-table-main" 
                        :source="customers.rows" 
                        :striped="customers.striped" 
                        :editable="customers.editable" 
                        :line-numbers="customers.lineNumbers">
                        <datatable-column 
                            v-for="column in customers.columns" 
                            :id="column.id" 
                            :label="column.label" 
                            :width="column.width"
                            :alignment="column.alignment" 
                            :sortable="column.sortable"
                            :groupable="column.groupable"
                            :aggregators="column.aggregators"
                            :formatter="column.formatter">
{'fraction_non_alphanumeric': 0.1341025641025641, 'fraction_numerical': 0.0020512820512820513, 'mean_word_length': 1.2757614657486287, 'pattern_counts': {'":': 0, '<': 345, '<?xml version=': 0, '>': 345, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2346834', 'n_tokens_mistral': 4976, 'n_tokens_neox': 4651, 'n_words': 777}