Tabulator: Looking to render in HTML

[sean-magin]

Hey Oli,

I'm looking to get my same Tabulator grid rendered in HTML for indexing purposes and was wondering if you could point me to the source of Tabulator so I can get this done?

[olifolkerd]

Hey,

Im not sure i follow. the source code for tabulator is available in this repo.

Are you looking for the HTML output that tabulator creates when it builds the table? If that is the case i would suggest you inspect the table in your browser debug tools and copy the contents from there. Though i would warn you that outside of Tabulator it wont be very useful, the virtual DOM only renders the part of the table you can see so you wont find all rows there and it isnt based on an HTML table so wont layout correctly outside of Tabulator.

Is that what you are after?

could you explain a little more of what you are after and provide a usage case and i can see if i can offer a better solution for you.

Cheers

Oli

[sean-magin]

Ah, right so basically I’m looking to take the JSON data and render it in a grid like tabulator. Catch is with tabulator our webpage isn’t being indexed by Google because it’s all in jQuery, so basically I’m trying to get to roughly the same final end-product but just rendered in html using EJS. Make more sense?

On 26/07/2017, at 9:49 AM, Oli Folkerd [e-mail] wrote:

Hey,

Im not sure i follow. the source code for tabulator is available in this repo.

Are you looking for the HTML output that tabulator creates when it builds the table? If that is the case i would suggest you inspect the table in your browser debug tools and copy the contents from there. Though i would warn you that outside of Tabulator it wont be very useful, the virtual DOM only renders the part of the table you can see so you wont find all rows there and it isnt based on an HTML table so wont layout correctly outside of Tabulator.

Is that what you are after?

could you explain a little more of what you are after and provide a usage case and i can see if i can offer a better solution for you.

Cheers

Oli

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/479#issuecomment-317883006, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDldIhNVdyFs7nl0ICyymAi7NeJLHks5sRmLfgaJpZM4OiY-u.

[olifolkerd]

aahhhh i see,

That is a very interesting request, i like it soo much im going to stick it on the roadmap for next months release to add a getHTML function so you can export a tabulator to an HTML table.

In the mean time im afraid the best you would be able to do is to use a function to parse through the json data and build the table yourself. it should be fairly simple.

I would be happy to post a small script on here if you want some thoughts on how to acheive it.

Cheers

Oli

[sean-magin]

LOL of course you are! make that 2 beers….

The script would be excellent and much appreciated.

On 26/07/2017, at 10:31 AM, Oli Folkerd [e-mail] wrote:

aahhhh i see,

That is a very interesting request, i like it soo much im going to stick it on the roadmap for next months release to add a getHTML function so you can export a tabulator to an HTML table.

In the mean time im afraid the best you would be able to do is to manually parse through the json data and build the table yourself. it should be fairly simple.

I would be happy to post a small script on here if you want some thoughts on how to acheive it.

Cheers

Oli

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/479#issuecomment-317892261, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDjOQRnqI7WswUFCzlTV05AZ_ffrGks5sRmzBgaJpZM4OiY-u.

[olifolkerd]

I love it when people ask for something id never thought of before, it gives me a different perspective on how the system can be used.

Here is a function that should convert the table data into a basic html table:

function getHtml(){
    var data = $("#example-table").tabulator("getData"),
    columns = $("#example-table").tabulator("getColumns"),
    header = "",
    body = "",
    table = "";

    //build header row
    columns.forEach(function(column){
        var def = column.getDefinition();

        if(column.getVisibility()){
            header += `<th>${def.title}</th>`;
        }
    })


    //build body rows
    data.forEach(function(rowData){
        var row = "";

        columns.forEach(function(column){
            var value = typeof rowData[column.getField()] === "undefined" ? "" : rowData[column.getField()] ;

            if(column.getVisibility()){
                row += `<td>${value}</td>`;
            }
        });

        body += `<tr>${row}</tr>`;
    });


    //build table
    table = `<table>
        <thead>
            <tr>${header}</tr>
        </thead>
        <tbody>${body}</tbody>
    </table>`;

    return table;

}

Let me know if that does the trick.

Cheers

Oli

[olifolkerd]

Make sure you replace the jquery selector of #example-table with your current table.

If you want to append it to the dom you will need to add this line after the function:

$("body").append(getHtml());

[sean-magin]

I’ve done that and this is all I’m getting.

I’ve actually rendered a grid with all the data using some other code i’ve written, is there a way to port the styling of my current tabulator over to my current grid easily?

On 26/07/2017, at 7:28 PM, Oli Folkerd [e-mail] wrote:

Make sure you replace the jquery selector of #example-table with your current table.

If you want to append it to the dom you will need to add this line after the function:

``js
$("body").append(getHtml());

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/479#issuecomment-317972128, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDm0EjGhGe7tmyVMEKAOdjU-NzBrYks5sRuqUgaJpZM4OiY-u.

[sean-magin]

to be more clear:

I’ve rendered a grid in HTML using a forEach loop, and now looking to port over my current tabulator styling to this new grid. How can I go about that?

On 26/07/2017, at 7:52 PM, Sean M [e-mail] wrote:

I’ve done that and this is all I’m getting.

I’ve actually rendered a grid with all the data using some other code i’ve written, is there a way to port the styling of my current tabulator over to my current grid easily?

On 26/07/2017, at 7:28 PM, Oli Folkerd <[email protected] [e-mail]> wrote:

Make sure you replace the jquery selector of #example-table with your current table.

If you want to append it to the dom you will need to add this line after the function:

``js
$("body").append(getHtml());

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/479#issuecomment-317972128, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDm0EjGhGe7tmyVMEKAOdjU-NzBrYks5sRuqUgaJpZM4OiY-u.

[Paraplegix]

AFAIK Tabulator isn't using <table> divs to render, so it might not work but you could try to use tabulator css classes (or the classes you made yourself) directly on the corresponding elements ?
For example tabulator-table for the <table>, tabulator-headers for the <thead> tag, tabulator-row or tabulator-row-odd and tabulator-row-even for the <tr> tags etc

Just add the class directly when you generate the html and it should be good

Also, google web crawler for indexing don't execute javascript at all if i remember correctly, meaning you'll have to get a static image (ie html code) of your table stored in your webpage !

If its only for having the data presented on your webpage, then a style-less table will be good enough for the web crawler as it is only interested in data and data-structure + cross site references 😄

[sean-magin]

alright so I got it all working. https://cryptoreport.com if you want to see.

Do still need to add in search function, is there an easy way to transfer the tabulator search function to a html rendered grid?

[olifolkerd]

All of tabulators functions are tied into its rendering system so it would not be able to affect an external table.

Cheers

Oli

[sean-magin]

fair enough, thanks for all the help Cli

On 27/07/2017, at 6:19 PM, Oli Folkerd <[email protected] [e-mail]> wrote:

All of tabulators functions are tied into its rendering system so it would not be able to affect an external table.

Cheers

Oli

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/479#issuecomment-318269671, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDtDGHzUDso_nCRuQ7OHNOTLkjCcfks5sSCvhgaJpZM4OiY-u.

https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png https://github.com/olifolkerd/tabulator https://github.com/olifolkerd/tabulator/issues/479#issuecomment-318269671

[olifolkerd]

Your welcome, give me a shout if anything else comes up

[Paraplegix]

What you can do is keep your html table as is right now for the google crawler bot, and then when a user connect to your website, you replace your table with Tabulator.
This way your website keep the interactivity it can have with tabulator, and google will still be able to index the data

[olifolkerd]

Great idea @Paraplegix

[olifolkerd]

In fact i would got a step further, i would generate your HTML table server side so that it can include the up to date values and use CSS to hide it on the page.

That way the search engines will pick it up because the html is generated server side. it will also help with your search rankings as the content will always be changing. as @Paraplegix says, search engines cannot parse anything generated by JavaScript, they can only read the initial HTML on page load.

You can then include the Tabulator to give you users the best experience,

[sean-magin]

this is a side question, but considering that I'm rendering data in my grid column by column (all wrapped in a row), is there a way to implement a search bar that will show me the matching rows according to my search?

[olifolkerd]

@Sm00g15 Sorry for the delay in getting back to you on this one, I must have missed your question.

You can do this using a custom filter function. have a look at the code in the Filter Example. That does exactly what you are after, while it uses three inputs, you could just use one with a like filter or a custom filter function.

Cheers

Oli

[robberti4y]

This getHtml function is great! It also solved the problem (my problem) for not repeating headers on each page. With a normal table the thead will be repeated by most browsers on each page if you print!