Vue DataTable and existing html table

[aniolekxParticipant]

Hello, do you have example for DataTable (VueJs) and existing HTML table as a data source (will be replaced).

Apart from above – what I am trying to archive is a basic functionality of JqXGrid with minimal configuration, so based on data everything else will be guessed.

Easiest option seems to be rendering html tables and then turn them in to DataTables, but I do not want to define columns, this should be taken from th element.

Is something like this possible?

In one of your examples for jQuery I have found:

$("#table").jqxDataTable(
            {
                altRows: true,
                sortable: true,
                editable: true,
                selectionMode: 'singleRow',
                columns: [
                  { text: 'First Name', dataField: 'First Name', width: 200 },
                  { text: 'Last Name', dataField: 'Last Name', width: 200 },
                  { text: 'Product', dataField: 'Product', width: 250 },
                  { text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                  { text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' }
                ]
            });

How to archive the same with VueJs version?

Why columns are defined? Why this cannot be got from th element?

[Peter StoevKeymaster]

Hi aniolekx,

Please, look at our Vue Example(https://www.jqwidgets.com/vue/) and especially the DataTable Vue demo: https://www.jqwidgets.com/vue/vue-datatable. The first demo shows how to render a DataTable from HTML Table.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[aniolekxParticipant]

Thanks Peter for your reply, could you tell me, is it possible to skip column definition and use this what is in table header? (th element)

[aniolekxParticipant]

I have another issue here, In my html table in td element I have additional html which is removed by JqxDataTable. Is there a way to change this behaviour?

[Peter StoevKeymaster]

Hi aniolekx,

It is not possible. The HTML Table is used only for a Data Source. We do not style it.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[aniolekxParticipant]

Could you add such feature? Or is there a workaround (hack) to it?

I have a developer licence so this can be resolved as a premium request (if required).

mainly I need to find a way to keep html inside these cells, this will make my developer’s life easier.

[aniolekxParticipant]

In jqxdatatable.js line 256 it is using cell.text() instead of cell.html().

I think that this should be refactored and new data type option should be added for html.

So to getvaluebytype, as an argument instead of cell.text() -> cell should be passed, and then if type is html cell.html() should be used and in other cases cell.text().

cellsFormat can be used to pass new option: ‘html’

[Peter StoevKeymaster]

Hi aniolekx,

– We will consider such options in the future, in case we want to style HTML Table with CSS only.

– Each column has cellsRenderer callback which can be used for putting HTML inside datatable cells.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[aniolekxParticipant]

Thanks Peter, I understand that there is cellsRenderer callback, but for me it is too much hassle to render names routes in javascript again.

I have modified jqxdatatable.js and added all changes I requested above but it would be nice if you could add these in the near future.

Most of the grids that I have to render are pretty generic, so I have decided to use VueJS (with web component aproach) to make them responsive.

So all I have to do in my templates to make my html tables responsive is to wrap them in these custom html tags:

<datatable-component>
   <table class="table">
...
   </table>
</datatable-component>

And with all these changes I do not have to pass any configuration, it is nice and easy, I do not have to pollute my html templates with custom javascript code for these grids.

Hope you understand.

[aniolekxParticipant]

To archive above I have created such component:

<template>
    <div :id="id">
        <JqxGrid ref="grid" :width="width" :columns="source.columns" :source="source.data"
                 :selectionmode="selectionmode"
                 :altrows="altrows" :sortable="sortable" :editable="editable" :pageable="pageable"
                 :pagesize="pagesize" :pagesizeoptions="pagesizeoptions"
                 :filtermode="filtermode" :showfilterrow="showfilterrow" :filterable="filterable">
        </JqxGrid>
        <slot></slot>
    </div>
</template>
<script>
    import JqxGrid from './../vendor/jqwidgets-ver7.1.0/jqwidgets-vue/vue_jqxgrid';

    export default {
        components: {
            JqxGrid,
        },
        props: {
            id: {},
            filters: {
                default: 'enabled',
            },

        },
        data: function() {
            return {
                width: '100%',
                source: this.loadSource(),
                selectionmode: 'singleRow',
                altrows: true,
                sortable: true,
                editable: false,
                pageable: true,

                pagesize: 10,
                pagesizeoptions: [10, 20, 50, 100],

                filtermode: 'excel',
                showfilterrow: true,
                filterable: true,

            };
        },
        watch: {
            filters: {
                immediate: true,
                handler(value)
                {
                    if (value == 'diabled') {
                        this.filterMode = 'default';
                        this.showFilterRow = false;
                        this.filterable = false;
                    }
                },
            },
        },

        methods: {

            clearFilters() {
                this.$refs.grid.clearfilters();
            },
            exportGrid() {
                this.$refs.grid.exportdata('xls', this.id+'-data-export', true, null, true);
            },
            loadSource()
            {
                let columnsData = [];

                let columnsDefinition = [];
                let data = [];

                let columns = $(this.$slots.default[0].data.domProps.innerHTML).find('th');
                let rows = $(this.$slots.default[0].data.domProps.innerHTML).find('tr');

                for (let j = 0; j < columns.length; j++) {
                    let columnName = $.trim($(columns[j]).text());
                    let type = columns[j].attributes.type ? columns[j].attributes.type.nodeValue : 'string';
                    let columnDefinition = {name: columnName, type: type};

                    let width = columns[j].width ? columns[j].width : null;
                    let cellsalign = columns[j].attributes.cellsalign ? columns[j].attributes.cellsalign.nodeValue : 'left';
                    let filter = columns[j].attributes.filtertype ? columns[j].attributes.filtertype.nodeValue : false;
                    let icon = columns[j].attributes.icon ? columns[j].attributes.icon.nodeValue : false;
                    let columnDetails = {
                        text: columnName,
                        dataField: columnName,
                        cellsalign: cellsalign,
                        filtertype: filter,
                    };

                    if (icon) {
                        columnDetails.cellsrenderer = function(row, columnfield, value) {
                            if (value) {
                                return '<span class="fa '+icon+' text-center" title="' + value + '" style="vertical-align: middle; color: green; width: 100%; line-height: 25px; font-size: 25px; padding-top: 3px;"></span>';
                            } else {
                                return '<span class="fa '+icon+' text-center" title="' + value + '" style="vertical-align: middle; color: red; width: 100%; line-height: 25px; font-size: 25px; padding-top: 3px;"></span>';
                            }
                        };
                    }

                    if (width) {
                        columnDetails.width = width;
                    }

                    if (type == 'date') {
                        columnDetails.cellsformat = 'dd/MM/yyyy';
                    }

                    if (type == 'datetime') {
                        columnDefinition.type = 'date';
                        columnDetails.cellsformat = 'dd/MM/yyyy H:mm:ss';
                    }

                    if (filter) {
                        columnDetails.filtertype = filter;
                    } else {
                        columnDetails.filterable = filter;
                    }

                    columnsData.push(columnDetails);
                    columnsDefinition.push(columnDefinition);
                }

                for (let i = 1; i < rows.length; i++) {
                    let row = rows[i];
                    let datarow = {};
                    for (let j = 0; j < columns.length; j++) {
                        // get column's title.
                        let columnName = $.trim($(columns[j]).text());
                        let cell = $(row).find('td:eq(' + j + ')');
                        datarow[columnName] = $.trim(cell.html());
                    }
                    data[data.length] = datarow;
                }

                this.$slots.default = [];

                return {
                    data: new $.jqx.dataAdapter({
                        localdata: data,
                        datatype: 'array',
                        datafields: columnsDefinition,
                    }),
                    columns: columnsData,
                };
            },
        },
    };
</script>
<style>
</style>

[aniolekxParticipant]

Hi, did you make any progress on this?

[Peter StoevKeymaster]

Hi aniolekx,

We try to follow our Roadmap. We will be releasing new components – timepicker, heatmap and gantt chart. Regarding Vue.js, we improved the browsers support for all components including the IE11 in the list. Unfortunately, we have not yet discussed the feature from this topic here.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts