<commit_before># Data Table API
The Data Table has a very intuitive and comprehensive component API for all your customization needs. {.lead}

### Configuring i18n
You can provide an object with already translated internationalization strings using the `i18n` property. 

The strings contain interpolated values under the form of `{value}`.

~~~js
export default {
    ...
    data() {
        return {
            i18n: {
                pagination: {
                    rowsPerPage: 'Show {rowsPerPage} entries',
                    rowsRange: 'Showing {rowsFrom} to {rowsTo} of {rowsCount} entries'
                },
                filtering: {
                    inputPlaceholder: 'Search',
                    noResultsFound: 'No matching records found',
                }
            }
        };
    }
}       
~~~

~~~html
<i-datatable :columns="columns" :rows="rows" :i18n="i18n" />
~~~

### API

<i-api-preview title="Data Table API" markup="i-datatable" expanded>
    <template slot="props">
        <api-table>
            <api-table-row>
                <template slot="property">async</template>
                <template slot="description">Sets the pagination and filtering to be handled asynchronously.</template>
                <template slot="type"><code>Boolean</code></template>
                <template slot="values"><code>true</code>, <code>false</code></template>
                <template slot="default"><code>false</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">columns</template>
                <template slot="description">An array of column definition objects. See the <nuxt-link :to="{ name: 'docs-components-dashboard-datatable-introduction' }">DataTable Introduction</nuxt-link> page.</template>
                <template slot="type"><code>Array&lt;Object&gt;</code></template>
                <template slot="values"></template>
                <template slot="default"><code>[]</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">count-column</template>
                <template slot="description">Column definition override for the count column. You can set the value tp `false` to disable the count column.</template>
                <template slot="type"><code>Object</code>, <code>Boolean</code></template>
                <template slot="values"></template>
<template slot="default-row">

~~~js
{
    title: '#',
    path: '#',
    class: '-count',
    align: 'right',
    sortable: true,
    render(row, column, index) {
        return (this.page - 1) * this.rowsPerPage + index + 1;
    }
}
~~~

</template>
            </api-table-row>
            <api-table-row>
                <template slot="property">expand-column</template>
                <template slot="description">Column definition override for the expand column. You can set the value tp `false` to disable the expand column.</template>
                <template slot="type"><code>Object</code>, <code>Boolean</code></template>
                <template slot="values"></template>
<template slot="default-row">

~~~js
{
    title: '',
    path: '^',
    classes: '-expand',
    custom: true
}
~~~

</template>
            </api-table-row>
            <api-table-row>
                <template slot="property">rows</template>
                <template slot="description">An array of row definition objects. See the <nuxt-link :to="{ name: 'docs-components-dashboard-datatable-introduction' }">DataTable Introduction</nuxt-link> page.</template>
                <template slot="type"><code>Array&lt;Object&gt;</code></template>
                <template slot="values"></template>
                <template slot="default"><code>[]</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">rows-count</template>
                <template slot="description">Sets the number of rows to be displayed when <code>async</code> is enabled.</template>
                <template slot="type"><code>Number</code></template>
                <template slot="values"></template>
                <template slot="default"><code>null</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">default-sort-key</template>
                <template slot="description">Sets the key to use for sorting by default. The `#` refers to the count column.</template>
                <template slot="type"><code>String</code></template>
                <template slot="values"></template>
                <template slot="default"><code>#</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">filtering</template>
                <template slot="description">Used to enable, disable and configure filtering. See the <nuxt-link :to="{ name: 'docs-components-dashboard-datatable-filtering' }">DataTable Filtering</nuxt-link> page.</template>
                <template slot="type"><code>Boolean</code>, <code>Object</code></template>
                <template slot="values"><code>true</code>, <code>false</code>, <code>Object</code></template>
<template slot="default-row">

~~~js
{
    size: 'md',
    variant: null,
    fuse: {
        isCaseSensitive: false,<commit_msg>Fixed small datatable docs issues.<commit_after># Data Table API
The Data Table has a very intuitive and comprehensive component API for all your customization needs. {.lead}

### Configuring i18n
You can provide an object with already translated internationalization strings using the `i18n` property. 

The strings contain interpolated values under the form of `{value}`.

~~~js
export default {
    ...
    data() {
        return {
            i18n: {
                pagination: {
                    rowsPerPage: 'Show {rowsPerPage} entries',
                    rowsRange: 'Showing {rowsFrom} to {rowsTo} of {rowsCount} entries'
                },
                filtering: {
                    inputPlaceholder: 'Search',
                    noResultsFound: 'No matching records found',
                }
            }
        };
    }
}       
~~~

~~~html
<i-datatable :columns="columns" :rows="rows" :i18n="i18n" />
~~~

### API

<i-api-preview title="Data Table API" markup="i-datatable" expanded>
    <template slot="props">
        <api-table>
            <api-table-row>
                <template slot="property">async</template>
                <template slot="description">Sets the pagination and filtering to be handled asynchronously.</template>
                <template slot="type"><code>Boolean</code></template>
                <template slot="values"><code>true</code>, <code>false</code></template>
                <template slot="default"><code>false</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">columns</template>
                <template slot="description">An array of column definition objects. See the <nuxt-link :to="{ name: 'docs-components-dashboard-datatable-introduction' }">DataTable Introduction</nuxt-link> page.</template>
                <template slot="type"><code>Array&lt;Object&gt;</code></template>
                <template slot="values"></template>
                <template slot="default"><code>[]</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">count-column</template>
                <template slot="description">Column definition override for the count column. You can set the value to <code>false</code> to disable the count column.</template>
                <template slot="type"><code>Object</code>, <code>Boolean</code></template>
                <template slot="values"></template>
<template slot="default-row">

~~~js
{
    title: '#',
    path: '#',
    class: '-count',
    align: 'right',
    sortable: true,
    render(row, column, index) {
        return (this.page - 1) * this.rowsPerPage + index + 1;
    }
}
~~~

</template>
            </api-table-row>
            <api-table-row>
                <template slot="property">expand-column</template>
                <template slot="description">Column definition override for the expand column. You can set the value to <code>false</code> to disable the expand column.</template>
                <template slot="type"><code>Object</code>, <code>Boolean</code></template>
                <template slot="values"></template>
<template slot="default-row">

~~~js
{
    title: '',
    path: '^',
    classes: '-expand',
    custom: true
}
~~~

</template>
            </api-table-row>
            <api-table-row>
                <template slot="property">rows</template>
                <template slot="description">An array of row definition objects. See the <nuxt-link :to="{ name: 'docs-components-dashboard-datatable-introduction' }">DataTable Introduction</nuxt-link> page.</template>
                <template slot="type"><code>Array&lt;Object&gt;</code></template>
                <template slot="values"></template>
                <template slot="default"><code>[]</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">rows-count</template>
                <template slot="description">Sets the number of rows to be displayed when <code>async</code> is enabled.</template>
                <template slot="type"><code>Number</code></template>
                <template slot="values"></template>
                <template slot="default"><code>null</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">default-sort-key</template>
                <template slot="description">Sets the key to use for sorting by default. The <code>#</code> refers to the count column.</template>
                <template slot="type"><code>String</code></template>
                <template slot="values"></template>
                <template slot="default"><code>#</code></template>
            </api-table-row>
            <api-table-row>
                <template slot="property">filtering</template>
                <template slot="description">Used to enable, disable and configure filtering. See the <nuxt-link :to="{ name: 'docs-components-dashboard-datatable-filtering' }">DataTable Filtering</nuxt-link> page.</template>
                <template slot="type"><code>Boolean</code>, <code>Object</code></template>
                <template slot="values"><code>true</code>, <code>false</code>, <code>Object</code></template>
<template slot="default-row">

~~~js
{
    size: 'md',
    variant: null,
    fuse: {
        isCaseSensitive: false,
{'fraction_non_alphanumeric': 0.1489795918367347, 'fraction_numerical': 0.0022263450834879408, 'mean_word_length': 2.3533437013996887, 'pattern_counts': {'":': 0, '<': 305, '<?xml version=': 0, '>': 305, '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': '2403044', 'n_tokens_mistral': 2901, 'n_tokens_neox': 2757, 'n_words': 678}