<commit_before><!--
Generic table view based on bootstrap styles
Features:
  * Filtering on all keys
  * Pagination
  * Sorting and reverse sorting on any key
  * Optional custom renderers for individual columns
-->
<template>
  <div>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key.path)"
          :class="[key.addClass, { act: sortKey == key.path}]">
          {{ key.title }}
          <span class="arrow" :class="sortOrders[key.path] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="entry in limitedData" @click="rowEvent(entry)" class="grid-row">
        <td v-for="key in columns" :class="[key.addClass]"  class="grid-cell">
          <template v-if="key.render">
            {{ key.render(getPath(entry, key.path)) }}
          </template>
          <template v-else>
            {{ getPath(entry, key.path) }}
          </template>
        </td>
      </tr>
      <tr v-if="isLoading">
        <td :colspan="columns.length" class="text-center noData">
          <i class="fa fa-spinner fa-spin"></i>
        </td>
      </tr>
      <tr v-if="!isLoading && !data.length">
        <td :colspan="columns.length" class="text-center noData"><commit_msg>Support named slots to replace cell content<commit_after><!--
Generic table view based on bootstrap styles
Features:
  * Filtering on all keys
  * Pagination
  * Sorting and reverse sorting on any key
  * Optional custom renderers for individual columns
-->
<template>
  <div>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key.path)"
          :class="[key.addClass, { act: sortKey == key.path}]">
          {{ key.title }}
          <span class="arrow" :class="sortOrders[key.path] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="entry in limitedData" @click="rowEvent(entry)" class="grid-row">
        <td v-for="key in columns" :class="[key.addClass]"  class="grid-cell">
          <slot :name="key.path"
            :entry="entry" :column="key">
            <template v-if="key.render">
              {{ key.render(getPath(entry, key.path)) }}
            </template>
            <template v-else>
              {{ getPath(entry, key.path) }}
            </template>
          </slot>
        </td>
      </tr>
      <tr v-if="isLoading">
        <td :colspan="columns.length" class="text-center noData">
          <i class="fa fa-spinner fa-spin"></i>
        </td>
      </tr>
      <tr v-if="!isLoading && !data.length">
        <td :colspan="columns.length" class="text-center noData">
{'fraction_non_alphanumeric': 0.16864864864864865, 'fraction_numerical': 0.0007207207207207207, 'mean_word_length': 2.18348623853211, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 65, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4762042', 'n_tokens_mistral': 890, 'n_tokens_neox': 875, 'n_words': 210}