GerkinDev/vuejs-datatable

Row on click and tables info

Opened this issue · 1 comments

Is is possible to bind event on click on each row? How?

Also do you have more explanation/ documentation how to add table info like this 'Showing 11 to 20 from 45 items' in the bottom of the table? I've tried from here but still no luck.

Thanks

For event binding, you might want to look at 📚 the tutorials, where there is a base of what you can use. You can use custom row template:

<datatable>
    <template scope="{ row, columns, index }">
        <tr v-if="toggledRows[index]" @click="toggledRows[index] = !toggledRows[index]">
            <td :colspan="columns.length">Your open state</td>
        </tr>
        <tr v-else @click="toggledRows[index] = !toggledRows[index]">
            <td>{{ row.id }}</td>
            <td>{{ row.user.email }}</td>
            <td>{{ row.address + ', ' + row.city + ', ' + row.state }}</td>
        </tr>
    </template>
</datatable>

A new slot have been added since I closed the mentionned issue (that I have commented with the slot's link). Look at 📚 the new tutorial section.