<commit_before><template>
    <table
      class="table is-bordered is-striped is-narrow"
      :class="{ editing: editing }"
      @click="onClickCell"
      @dblclick="onDblClickCell"
      @focus.capture="onFocus"
      @blur.capture="onBlur"
      @input="onInput"
      @keydown.enter.prevent="onPressEnter"
      @keydown.esc.prevent="onPressEscape"
      @keydown.up="onPressArrowKeys('up', $event)"
      @keydown.down="onPressArrowKeys('down', $event)"
      @keydown.left="onPressArrowKeys('left', $event)"
      @keydown.right="onPressArrowKeys('right', $event)">
      <thead>
        <tr>
          <th
            v-for="(column, columnIndex) in columns"
            tabindex="0"
            contenteditable
            :data-row-index="HEADER_ROW"
            :data-column-index="columnIndex"
            v-text="column.name"></th>
          <th class="extra-column" @click.stop="onClickAddColumn">+</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in rows" :key="index">
          <td
            v-for="(column, columnIndex) in columns"
            tabindex="0"
            contenteditable
            :data-row-index="rowIndex"
            :data-column-index="columnIndex"
            v-text="row[column.name]"></td>
          <td class="extra-column"></td>
        </tr>
        <tr :key="rows.length">
          <td
            v-for="(column, columnIndex) in columns"
            tabindex="0"
            contenteditable
            :data-row-index="rows.length"
            :data-column-index="columnIndex">
          </td>
        </tr>
      </tbody>
    </table>
</template>

<script>
const { mapState, mapMutations, mapActions } = require('vuex')
const HEADER_ROW = -1

module.exports = {
  data () {
    return { HEADER_ROW }
  },
  computed: {
    classObject () {
      return { editing: this.editing }
    },
    ...mapState({
      columns: (state) => state.db.activeSheet.columns,
      rows: (state) => state.db.activeSheet.rows,
      editing: (state) => state.ui.editing
    })
  },
  methods: {
    ...mapMutations([
      'setEditing',
      'setNotEditing'
    ]),
    ...mapActions([
      'saveCell',
      'insertColumn',
      'renameColumn'
    ]),
    onFocus (evt) {
      setCursor(evt.target)
    },
    onBlur (evt) {
      if (!this.editing) return<commit_msg>only show table if data is loaded<commit_after><template>
    <table
      v-if="isDataLoaded"
      class="table is-bordered is-striped is-narrow"
      :class="{ editing: editing }"
      @click="onClickCell"
      @dblclick="onDblClickCell"
      @focus.capture="onFocus"
      @blur.capture="onBlur"
      @input="onInput"
      @keydown.enter.prevent="onPressEnter"
      @keydown.esc.prevent="onPressEscape"
      @keydown.up="onPressArrowKeys('up', $event)"
      @keydown.down="onPressArrowKeys('down', $event)"
      @keydown.left="onPressArrowKeys('left', $event)"
      @keydown.right="onPressArrowKeys('right', $event)">
      <thead>
        <tr>
          <th
            v-for="(column, columnIndex) in columns"
            tabindex="0"
            contenteditable
            :data-row-index="HEADER_ROW"
            :data-column-index="columnIndex"
            v-text="column.name"></th>
          <th class="extra-column" @click.stop="onClickAddColumn">+</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in rows" :key="index">
          <td
            v-for="(column, columnIndex) in columns"
            tabindex="0"
            contenteditable
            :data-row-index="rowIndex"
            :data-column-index="columnIndex"
            v-text="row[column.name]"></td>
          <td class="extra-column"></td>
        </tr>
        <tr :key="rows.length">
          <td
            v-for="(column, columnIndex) in columns"
            tabindex="0"
            contenteditable
            :data-row-index="rows.length"
            :data-column-index="columnIndex">
          </td>
        </tr>
      </tbody>
    </table>
</template>

<script>
const { mapState, mapMutations, mapActions } = require('vuex')
const HEADER_ROW = -1

module.exports = {
  data () {
    return { HEADER_ROW }
  },
  computed: {
    classObject () {
      return { editing: this.editing }
    },
    isDataLoaded () {
      return this.columns.length > 0
    },
    ...mapState({
      columns: (state) => state.db.activeSheet.columns,
      rows: (state) => state.db.activeSheet.rows,
      editing: (state) => state.ui.editing
    })
  },
  methods: {
    ...mapMutations([
      'setEditing',
      'setNotEditing'
    ]),
    ...mapActions([
      'saveCell',
      'insertColumn',
      'renameColumn'
    ]),
    onFocus (evt) {
      setCursor(evt.target)
    },
    onBlur (evt) {
      if (!this.editing) return
{'fraction_non_alphanumeric': 0.15964985410587745, 'fraction_numerical': 0.0018757815756565235, 'mean_word_length': 2.043119847812302, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 60, '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': '5796383', 'n_tokens_mistral': 1550, 'n_tokens_neox': 1552, 'n_words': 252}