<commit_before><template>
  <div class="simple-api-table">
    <table v-if="!loading">
      <thead>
        <tr>
          <th v-if="ordered">Num</th>
          <th v-for="key in keys" @click="sort(key)">{{humanifyHeader(key)}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record, index in records">
          <th v-if="ordered">{{index + 1}}</th>
          <th v-for="key in keys">{{record[key]}}</th>
        </tr>
      </tbody>
    </table>
    <h1 v-if="loading">Loading...</h1>
  </div>
</template>

<script>
import _ from 'lodash'
import axios from 'axios'

export default {
  name: 'simple-api-table',
  created () {
    this.sendGetRequest()
  },
  props: {
    url: {
      type: String,
      required: true
    },
    ordered: {
      type: Boolean,
      default: true
    },
    headerCase: {
      type: String,
      default: 'start'
    },
    sortByDefault: {
      type: String
    },
    sortDirDefault: {
      type: String
    },
    filterByDefault: {
      type: String
    }
  },
  data () {
    return {
      keys: [],
      records: [],
      loading: false,
      sortDir: '',
      sortBy: ''
    }
  },
  methods: {
    sort (key = null) {
      if (key) {
        if (this.sortBy === key) this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'
        else {
          this.sortBy = key
          this.sortDir = 'asc'
        }
      }

      this.records = _.orderBy(this.records, [object => {
        return object[this.sortBy]
      }], this.sortDir)
    },
    sendGetRequest () {
      this.loading = true
      this.records = []

      axios.get(this.url).then(response => {
        if (!response.data[0]) return console.error('Api returned nothing.')

        this.keys = _.keys(response.data[0])
        this.records = response.data

        this.sortBy = this.sortByDefault ? this.sortByDefault : this.keys[0]
        this.sortDir = this.sortDirDefault ? this.sortDirDefault : 'asc'

        this.sort()
        this.loading = false
      }).catch(error => {
        console.error(error)
      })
    },
    humanifyHeader (key) {
      return _[this.headerCase + 'Case'](key)
    }
  }
}
</script>

<style scoped>

</style><commit_msg>Add basic CSS & minor JS changes<commit_after><template>
  <div class="simple-api-table">
    <table v-if="!loading">
      <thead>
        <tr>
          <th v-if="ordered">{{humanifyHeader('num')}}</th>
          <th v-for="key in keys" @click="sort(key)">{{humanifyHeader(key)}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record, index in records">
          <td v-if="ordered">{{index + 1}}</td>
          <td v-for="key in keys">{{record[key]}}</td>
        </tr>
      </tbody>
    </table>
    <h1 v-if="loading">Loading...</h1>
  </div>
</template>

<script>
import _ from 'lodash'
import axios from 'axios'

export default {
  name: 'simple-api-table',
  created () {
    this.sendGetRequest()
  },
  props: {
    url: {
      type: String,
      required: true
    },
    ordered: {
      type: Boolean,
      default: true
    },
    headerCase: {
      type: String,
      default: 'start'
    },
    sortByDefault: {
      type: String
    },
    sortDirDefault: {
      type: String
    },
    filterByDefault: {
      type: String
    }
  },
  data () {
    return {
      keys: [],
      records: [],
      loading: false,
      sortDir: '',
      sortBy: ''
    }
  },
  methods: {
    sort (key = null) {
      if (key) {
        if (this.sortBy === key) this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'
        else {
          this.sortBy = key
          this.sortDir = 'asc'
        }
      }

      this.records = _.orderBy(this.records, [object => {
        return object[this.sortBy]
      }], this.sortDir)
    },
    sendGetRequest () {
      this.loading = true
      this.records = []

      axios.get(this.url).then(response => {
        if (!response.data[0]) return console.error('Api returned nothing.')

        this.keys = _.keys(response.data[0])
        this.records = response.data

        this.sortBy = this.sortByDefault ? this.sortByDefault : this.keys[0]
        this.sortDir = this.sortDirDefault ? this.sortDirDefault : 'asc'

        this.sort()
        this.loading = false
      }).catch(error => {
        console.error(error)
      })
    },
    humanifyHeader (key) {
      return _[this.headerCase + 'Case'](key)
    }
  }
}
</script>

<style scoped>
  .simple-api-table {
    font-size: 0.9em;
    max-width: 80%;
    margin: 0 auto;
    color: #333;
  }

  .simple-api-table table {
    text-align: left;
    background-color: #fff;
    padding: 5px;
    border-spacing: 0px;
  }

  .simple-api-table thead {
    padding: 5px;
    font-weight: bold;
    color: #888;
    font-family: 'Helvetica';
  }

  .simple-api-table thead th {
    white-space: nowrap;
    padding: 10px;
    border-bottom: 3px solid #555;
    cursor: pointer;
  }

  .simple-api-table thead th:first-child {
    cursor: default;
  }

  .simple-api-table tbody tr:nth-child(even){
    background-color: #eee;
  }

  .simple-api-table td {
    padding: 10px;
    font-family: Arial
  }

</style>
{'fraction_non_alphanumeric': 0.1637211108953195, 'fraction_numerical': 0.006603223926976112, 'mean_word_length': 1.9328018223234624, 'pattern_counts': {'":': 0, '<': 59, '<?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': '7537325', 'n_tokens_mistral': 1804, 'n_tokens_neox': 1755, 'n_words': 353}