Great job so far!

[gozcan]

Couple of features I'd like to see for datatables (I think it will replace datatables.js in near feature):

• Individual column filters
• Subtotal, subcount, etc (avg,max,min...) for column groups
• Maybe optional "actions" column for "edit,delete,etc buttons"

I hope you'll continue to improve your great work. If I wasn't just a beginner I'd love to fork this repo.

[andrewcourtice]

Thanks for the feedback @gozcan! I really appreciate it.

I'm hoping to have some of these features implemented in the future. In the meantime though, if you wanted to you could actually implement some of these features now by leveraging the custom template options I've built into the datagrid.

For example, for the individual column filters you could specify a custom header template which includes a dropdown menu with a textbox in it, that when typed into filters the original data by that column's filter.

Here's a concept (apologies for the completely rough and untested code):

<datatable-column :id="column.id" v-for="column in columns">
    <!-- Insert custom content here, such as a dropdown menu or something similar -->
    <!-- Example code -->
    <dropdown-menu>
        <input type="text" v-model="columnFilters[column.id]">
    </dropdown-menu>
</datatable-column>

new Vue({

    /* ... */

    data: function () {
        return {
            myData: [],
            columnFilters: {}
        }
    },

    computed: {
        filteredData: function () {
            var filteredData = [];

            for (var i = 0; i < this.myData.length; i++) {
                var row = this.myData[i];
                
                for (var column in this.columnFilters) {
                    var filter = this.columnFilters[column];

                    if (!filter) {
                        continue;
                    }

                    /* filter each row here based on whether there */
                    /* is a filter in your computed property */
                    /* and add it to the filteredData array */
                }
            }
        
            return filteredData;
        }
    }

});

Then just bind your datatable source to the filteredData instead of the original data object (myData)

And for the custom actions column you can use custom cell templates :) I've documented how to use custom cell templates here: Custom Cell Templates

Thanks again for your support :) I hope you continue to find the project useful.

[4mitch]

Me too want to thank you! Looks realy great and neat. I am searching for something similar to DevExpress Data Grid in Vue.js world and your component seems very promising.

For ideas for future I'd like to recommend to add dropdown filtering with ability to multiple values (and even regexp) select.
Am I right that it's possilble to make two dependent grid with selection in one will reflect a scope in other?

I want to make some classification component with two grid - one will be line items and second - classifier groups, so items from first could be put in different groups in second. And then a line in second is choosen this will narrow scope in the first grid.

[4mitch]

Also it could be nice to have not only totals for numbers, but custom aggregate functions? for example count distinct, avg etc.

[andrewcourtice]

@4mitch I have added the ability to use custom aggregate functions. I have included basic functions for min, max, count, average, total, variance and standard deviation. Have a look in src/views/components/datatables.vue to see how it is implemented.

[arthurtyukayev]

Just wanted to say thank you for your work. Previously I've attempted to force DataTables.net to work with VueJS, you've just saved me a lot of time. Thank you.

[andrewcourtice]

Thanks @arthurtyukayev! I appreciate the feedback and am glad to hear it saved you some time and frustration.

[byronferguson]

This looks very promising. A little guidance on how I can throw it into my project would be awesome!