jQuery UI Widgets Forums DataTable Vue DataTable and existing html table

This topic contains 11 replies, has 2 voices, and was last updated by  Peter Stoev 5 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author

  • aniolekx
    Participant

    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?

    • This topic was modified 8 months, 1 week ago by  aniolekx.

    Peter Stoev
    Keymaster

    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


    aniolekx
    Participant

    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)


    aniolekx
    Participant

    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?

    • This reply was modified 8 months, 1 week ago by  Peter Stoev. Reason: removed link to another product
    Vue DataTable and existing html table #104562

    Peter Stoev
    Keymaster

    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

    Vue DataTable and existing html table #104564

    aniolekx
    Participant

    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.

    Vue DataTable and existing html table #104570

    aniolekx
    Participant

    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’

    Vue DataTable and existing html table #104572

    Peter Stoev
    Keymaster

    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


    aniolekx
    Participant

    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.


    aniolekx
    Participant

    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>
    

    aniolekx
    Participant

    Hi, did you make any progress on this?


    Peter Stoev
    Keymaster

    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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.