<commit_before><template>
    <div>
        <div class="header">
            <slot name="header">
                <h4 class="title">{{title}}</h4>
                <p class="category">{{subTitle}}</p>
            </slot>
        </div>
        <div class="content table-responsive table-full-width">
            <table class="table" :class="tableClass">
                <thead>
                <th v-for="column in columns">
                    {{column}}
                </th>
                </thead>
                <tbody>
                <tr v-for="item in data">
                    <td v-for="column in columns" v-if="hasValue(item, column)">
                        <div v-if="hasValue(item, column) && !isAction(item, column)">
                            {{itemValue(item, column)}}
                        </div>
                        <div class="actions" v-if="isAction(item, column)" v-for="action in item.actions">
                            <a :class="action.classes" v-html="action.text" @click.prevent="action.click"></a>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            columns: Array,
            data: Array,
            type: {
                type: String, // striped | hover
                default: 'Striped'
            },
            title: {
                type: String,
                default: ''
            },
            subTitle: {
                type: String,
                default: ''
            },
            useActions: {type: Boolean, default: false}
        },
        computed: {
            tableClass() {
                return `table-${this.type}`;
            }
        },
        methods: {
            hasValue(item, column) {
                return this.itemValue(item, column) !== 'undefined';
            },
            isAction(item, column) {
                return this.useActions && Array.isArray(this.itemValue(item, column));
            },
            itemValue(item, column) {
                return item[column.toLowerCase()];
            }
        }
    }

</script>
<style scoped lang="scss">
    .table-responsive {
        overflow-x: scroll;
    }

    .actions {
        display: inline-block;

        > a {
            cursor: pointer;
        }
    }
</style><commit_msg>Fixes v-bind:key reference in table elements iteration<commit_after><template>
    <div>
        <div class="header">
            <slot name="header">
                <h4 class="title">{{title}}</h4>
                <p class="category">{{subTitle}}</p>
            </slot>
        </div>
        <div class="content table-responsive table-full-width">
            <table class="table" :class="tableClass">
                <thead>
                    <th v-for="(column, key) in columns" v-bind:key="key">
                        {{column}}
                    </th>
                </thead>
                <tbody>
                    <tr v-for="(item, key) in data" v-bind:key="key">
                        <td v-for="(column, key) in columns" v-if="hasValue(item, column)" v-bind:key="key">
                            <div v-if="hasValue(item, column) && !isAction(item, column)">
                                {{itemValue(item, column)}}
                            </div>
                            <div v-if="isAction(item, column)">
                                <div class="actions" v-for="(action, key) in item.actions" v-bind:key="key">
                                    <a :class="action.classes" v-html="action.text" @click.prevent="action.click"></a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            columns: Array,
            data: Array,
            type: {
                type: String, // striped | hover
                default: 'Striped'
            },
            title: {
                type: String,
                default: ''
            },
            subTitle: {
                type: String,
                default: ''
            },
            useActions: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            tableClass() {
                return `table-${this.type}`;
            }
        },
        methods: {
            hasValue(item, column) {
                return this.itemValue(item, column) !== 'undefined';
            },
            isAction(item, column) {
                return this.useActions && Array.isArray(this.itemValue(item, column));
            },
            itemValue(item, column) {
                return item[column.toLowerCase()];
            }
        }
    }
</script>

<style scoped lang="scss">
    .table-responsive {
        overflow-x: scroll;
    }
    
    .actions {
        display: inline-block;
        >a {
            cursor: pointer;
        }
    }
</style>
{'fraction_non_alphanumeric': 0.13554392088423503, 'fraction_numerical': 0.0007756447547023463, 'mean_word_length': 1.0632, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 79, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2558032', 'n_tokens_mistral': 1385, 'n_tokens_neox': 1320, 'n_words': 271}