Version 6.3 Released!

Click to checkout the new features

Creating a JS Fiddle

What is a JS Fiddle

JS Fiddle is an online JS Coding sandbox that allows you to create simple JavaScript examples of a problem or feature that you can share with others.

This is fantastic when it comes to getting support on issues as it allows us to see how your table is setup and identify where any issues may be.

It also provides a testable example that we can use to make sure that fixes we make for issues actually resolve the issue.

Getting Started

To get started head over to the JS Fiddle website at https://jsfiddle.net/. This will start you off with an empty project where you can start to build up your fiddle.

The fiddle page is broken down into a couple of menus and the editor panels

Menu Bar

The menu bar at the top of the page will let you save and run your fiddle.

Sidebar

The sidebar on the left had side of the screen, this is where you can configure your fiddle and include dependencies like Tabulator.

Editor Panels

You will notice three editor panels titled HTML, CSS and JavaScript. These are the editors where you can insert the relevant code for your project

Results Panel

The white results panel is where your final output will be displayed when you have your code in place

Dependencies

Now that we have had a look around the fiddle page, we are ready to start building out our example. But before we can start adding any code, we need to make sure we have included the Tabulator source files into our project.

Dependencies can be loaded into your fiddle via the Resources section in the sidebar on the left of the page. Click on the item in the menu and then into the input element beneath it to paste in a URL to a resource. Click the + button at the end of the input to add the resource

Tabulator Source Files

You need to include both a CSS and a JS file from the Tabulator CDN in order for Tabulator to work in the fiddle

https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css
https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js

Correct Version
Make sure you are specifying the correct version of Tabulator in the resources of your fiddle. With updates in every release you need to make sure that the version used in your example is the same as the one you are using

Other Dependencies

You can also include any other depedencies your project might need here as well

Coding Your Example

Before you start coding your example, please have a read through the Minimal Reproducible Examples Guide. Your example should not be a straight copy and paste of a fully configured table, It should be a minimal example with only a small amount of code that demonstrates only the issue you are experiencing.

The simpler your example, the easier it will be for others to see what is going on and the more likely they are to be able to help you.

HTML

We will start off by adding our HTML code into the HTML panel in the fiddle. In this case as we will be creating a simple table, this will be a div with an id that we can reference from our JavaScript later on

<div id="table"></div>

CSS

In most cases you wont need to include any custom CSS as the Tabulator style sheets were already included in the last step, but just incase you do, in this example we will set the background of our table to a light blue colour. We will do this by adding our styling code into the CSS panel in the fiddle

.tabulator{
    background-color:#f3f3ff;
}

JavaScript

We now want to setup our table constructor by adding our JavaScript code into the JavaScript panel in the fiddle. Remembering that we are only trying to demonstrate the one feature we are having issue with.

In this example lets assume we were having trouble with an input editor, in this case we will setup a table with one column that uses the editor, and a few rows of data to popuplate the table.

//Sample Data
var tableData = [
    {name:"Bob"},
    {name:"Steve"},
    {name:"Jim"},
]

//Example Table
var table = new Tabulator("#table", {
    data:tableData, //load data into table
    height:200, //enable the virtual DOM
    columns:[
        {title:"Name", field:"name", width:200, editor:"input"},
    ]
});

Running You Example

When you have built out your example you can test it by clicking the Run button in the menu bar at the top of the page.

This will run all of your code and display the result in the white results panel, which is a fully interactive web page that you can play with as you would in a browser.

Saving Your Example

When you are happy with your example you can save it by pressing the Save button in the menu bar, this will save the fiddle and redirect to a unique URL for your fiddle that you can then share on GitHub, Stack Overflow, Discord or anywhere else to help others access your example.

https://jsfiddle.net/dmrt5f4w/

Updating An Example

If you or anyone else wants to make updates to your example, for example to demonstrate a fix or workaround, they can make the changes to the code and click the Save button in the menu bar, this will generate an updated url that includes a version number which can then be used to share the update with others while keeping the original code intact and uchanged.

https://jsfiddle.net/dmrt5f4w/1/
Donate