olifolkerd / tabulator Goto Github PK

Sir
Thanking you for incorporating the Alternate Row Color

Request to consider

a) Page Size with reference to no of records per page
b) Persistence of Data in case of post back. Although the user can write the document ready code but if the application could take care of the same

Regards

Sanjay Gupta

Hello, how can I add sparklines and icons to the rows

Hi,

I found a little problem in addRow method : the unshift and the push method are inverted.
The row is not inserted correctly in activeData.
We should have :

        //append to top or bottom of table based on preference
        if(top == "top"){
            self.activeData.unshift(item);
            self.table.prepend(row);
        }else{
            self.activeData.push(item);
            self.table.append(row);
        }

Cheers,
Philippe

Hi ,
I'm starting using tabulator as it's a really cool plugin very easy and 'tunable' but i m stuck on this problem.....
Is there any possibilty to add a checkbox in the header of a column to implement a 'select all' behavior'??
thanks in advance....

function setColumns with column update type 'true' failed with column data without field name.
If exists column for buttons without property 'field', like described in documentation, and then we do next things:

var colDefs = $("#example-table").tabulator("getColumns");
$("#example-table").tabulator("setColumns", colDefs , true);

error occurs with message: "tabulator.js:438 Uncaught TypeError: Cannot read property 'field' of undefined"

The main div width is : 1336.5 px
Tabulator use a width of 1334.5 px

To fix that i've change a Math.floor to a Math.ceil at line 1236
I've changed the line 1214 (This fix generate an owerflow-x of 1 or 2 px)

from

1214 var totWidth = options.movableRows ? self.element.innerWidth() - 30 : self.element.innerWidth();

1236 var proposedWidth =Math.floor((totWidth - widthIdeal) / (colCount - widthIdealCount))

to

/* This fix generate an owerflow-x of 1 or 2 px */
1214 var totWidth = options.movableRows ? self.element.outerWidth() - 30 : self.element.outerWidth();
/* This fix work */
1236 var proposedWidth =Math.ceil((totWidth - widthIdeal) / (colCount - widthIdealCount))

$("#samples-table").tabulator("deleteRow",1);

This function works on my table,

However, when I want to set the deleteRow id from an input form, like

var tem = $("#txt_name").val();
            $("#samples-table").tabulator("deleteRow",tem);

It gets an error message on "item.data"

how can I format a number using the "it" style (i.e. 12345.9999 -> € 12.345,99) and for percentual
(i.e. 0.123456 -> 12,35%)

I am using NW.js and I save table data in a local file, I use your add table function, but I find if I did not close the current page, and open a saved table data file, the add new row function will add multiple new empty rows not just one empty row.

$("#add_table").click(function() {
            $("#samples-table").tabulator("addRow");
        });

The implemented functionality for custom sorters by specifying a comparison function is too weak.
The comparison function receives two cell values. However you can image a column displaying relative time information like "2 seconds ago", "10 minutes ago" etc. Usually you want to store the absolute timestamp either in your data or as data attribute on the table cell..However there is no way for getting hold of these data instead of "human readable" representation of the real value.

It's ussualy column with checkbox to select few rows to do smth with them, has checkbox in header too - for "Select All" function.
But now, if I add this functionlity by setting column 'title' with checkbox html content. Checkbox will appear in header, but its tooltip on hover action will be same with title - inner html for this case.

Thank you for this excellent resource!

I have couple of queries:

1. How to check if a Tick is checked or not outside of tabulator? I checked the DOM and I see that when a Tick is checked it writes an SVG.
2. Similar to the Tick, how do we traverse through the table and read the values of cells/rows?

I am not sure if it's intended to do this, however .tabulator("deleteRow", id)` does not refresh the grouping.

• The Item number remains the same (Example: If there were 2 rows before deletion, it still shows (2 item) after deleting one of the rows.
• If there is only one row under a group then after deleting, the grouping drop down (grey bar group name and item number) with remains with no rows under it. Ideally it should disappear.

I just start using this API, that troubles me.
Or how to refresh the table, when I use
var data = $("#example-table").tabulator("getData");

Hi there,

I hope you're still fine.
I have just found out one new issue.

You can following this step.
Step 1: Config the width of each column more than 400px (make the total width of all columns is greater than the width of table). Because I woud like to have horiz-scroll-bar at the first time.
Step 2: After render tabulator table, the html will be broken as the below image.
Could you have a check from your side ?

Thank you so much

Cheer,
Tony

What is the point for allowing multiple rows with the same id to be added?

I suggest giving the user the possibility to detect duplicate by defining a custom "equals" method. For example, two rows are equal when they have the same id...

Hello, can this support row re-order/sortable and get the serialize values back to post to AJAX? like jquery sortable?

Hi, is it possible to display a tooltip for header to read when the title is too long :

And i don't understand why tooltip for cell aren't displayed in the good position : problem of css on my website ?

Am trying to populate table into the bootstrap modal, but it is not working out. Without bootstrap modal, it is working fine.

$("#tabulator_table").tabulator({
        fitColumns:true,
        columns:[ //Define Table COlumns
            {title:"name", field:"name",sortable:"false"},
      ],
    }); 
    //load sample data into the table
    $("#tabulator_table").tabulator("setData",[
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1}, ]);

<div class="modal fade">
    <div class="modal-dialog">
         <div class="modal-body" id="tabulator_table"></div>
    </div>
</div>

Hello

When I use

    var data = $("#example-table").tabulator("getData");

as this will return an array containing the data objects for each row in the table.
I use toSource to view the edited data.
However, I find that some attributes do not have " ".

    [ { id:"3",
"Date Extracted":"12/3",
Experiment:"normal"},
{ id:"2",
"Date Extracted":"12/3",
Experiment:"powder",
Notes:"" },
{ id:"1",
"Date Extracted":"12/3",
Experiment:"fine",
Notes:"" }
]

How difficult would it be to extend this to add/sort columns?

After deleting a row, if I use getData method to get the data of the table, it's returning incomplete data.

For example, if the table contains the following data...
{id:1, name:"Oli Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1, lucky_no:5},

{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true, lucky_no:10},

{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true", lucky_no:12}

...And after deleting Row 2, getData returns...
{id:1, name:"Oli Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1, lucky_no:5},

{Undefined}

Am I doing something wrong?

Hi there,

I hope you're still fine.
I have just found out new issue. We will lost the horizontal scrollbar if we have no data.

You can have a check at the below image.

1. We have no data
2. We resize column to make it bigger
   => We have no scrollbar to resize the column again.

Thank you so much

Cheer,
Tony

Hi,
how can I add to the footer of the table some kinds of totals (as Sum, Average, Count, etc)?

Always Thanks in advance

Are you interested in making this plugin independent? I will be happy to help. I can take care 50% of workload.

If I create the Tabulator from Html table, how I set it as Editable?

Hi!
complimento for good work... but I have find this problem...
somebody "order by text" don't work... this is because there is a space before the word

{
"id":1183,
"data_fattura":"2015-06-24 00:00:00",
"note":" PAOLO maxigross ",
"importo":-277.34,"
}

here my code

Bonjour, hi,

I had a large text (comment, etc.) to edit in a table.
I used a textarea and create a custom editor "textbox" for this.
I think it could be useful for many people, so I share it below :

        textbox:function(cell, value){
            //create and style input
            var input = $("<textarea></textarea>");
            input.css({
                "border":"1px",
                "display":"block",

                "position":"absolute",
                "background":"#fff",
                "padding":"2px",
                "width":cell.width()+"px",
                "height":(cell.height()*8)+"px",
                "box-sizing":"border-box",
                "white-space":"pre-wrap",
                "overflow":"visible"
            })
            .val(value);

            setTimeout(function(){
                input.focus();
            },100);

            //submit new value on blur
            input.on("change blur", function(e){
                cell.trigger("editval", input.val());
            });

            return input;
        },

Thx !
Philippe

is it possible to split the the title of a head column in two lines to avoid that the columun is too large or the a part of the head is hide.

Hi, first, thank you for tabulator, it's very useful for me.
I would like to know if it's possible to add the filter type and the filter values to the custom function ?

if(typeof(self.filterField) == "function"){
return self.filterField(row, self.filterType, self.filterValue); <-- here
}else{

sorry i'm not native english

Thanks in advance

If you add a row and then try to delete that row, it fails. You can only delete rows that were initially loaded.

Hi all,

First of all, thank you so much for your library and for everything.
This is amazing library. Everything is really great.
And I have a small idea.
Could we enhance a new function to allow user in order to filter on each column ?
I mean that we will have a textbox below the caption (header).
And then user can enter some text for filtering.
How do you think about that ?
Thank you so much for your time.

Cheer,
Tony

If in call .tabulator("setPageSize", x), param x is type of "String". Page size of table updated currectly on the first page and increase when you go to others.

This fix is for

• Find the first column with a field name or with the param unique set to true (and the table use it as id)
• Add hidden option to columns
• Fix the drawing of column when we init Tabulator before send columns headers (Create _init, _colRedraw method )

tabulator.txt

Hi, thank you for tabulator. With ajax, there is a problem when there is a lot of columns and only one row : the value is hidden and it isn't possible to view it.

Is it possible formatting a single cell (i.e. background color, font size, etc) instead of the whole row?

Bonjour :)

Prior to IE12, Array.prototype.find is not defined, so the removeRow method doesn't work.
Adding this code can help :

if (!Array.prototype.find) {
Array.prototype.find = function (predicate, thisValue) {
        var arr = Object(this);
        if (typeof predicate !== 'function') {
            throw new TypeError();
        }
        for(var i=0; i < arr.length; i++) {
            if (i in arr) {  
                var elem = arr[i];
                if (predicate.call(thisValue, elem, i, arr)) {
                    return elem;  
                }
            }
        }
        return undefined;  
    }
}

There's also warnings in firefox's console : "ReferenceError: reference to undefined property item.tabulator_delete_row" but the row is deleted however.

Thanks for your great work, it helped me a lot !

Philippe

Sir
Kindly consider adding a property of Alternating RowBack Color.

Regards

Sanjay

Hello, you mentioned in
Editable Data
Columns of the table can be set as editable using the editable parameter in the column definition. (see Define Column Headers for more details).

When I write this to add new column, editable does not work.
thiscolumns.push({
title: "" + newCol,
field: "" + newCol,
fitColumns: true,
sorter: "string",
editable: true
});

Hello,
I am trying to reload a table with a new dataset. Meaning new column names (and a different number of them) along with new data.
I do tabulator("setColumns", newhdrs, false) and then tabulator("setData", newdata) table blanks out. Though I can tell by scroll bars that it has the new data. (by "blanks out" the header is empty, and that data area is empty except for the alternate row back ground color)

I tried tabulator("clear") before changing - same thing. I tried tabulator("setData", []) - same thing.
any hints?
Cheers
Bob

Hi, is it possible to use the jquery UI sortable as an option on the rows, with a fixed link for the consistent column sizes http://bit.ly/1RbVrPM

    // Return a helper with preserved width of cells
    var fixHelper = function(e, ui) {
                ui.children().each(function() {
             $(this).width($(this).width());
     });
  return ui;
    };

    $("#sort tbody").sortable({
      helper: fixHelper
    }).disableSelection();`

we can then use the toArray func https://api.jqueryui.com/1.10/sortable/ to past back to as p srvr
http://jsfiddle.net/bgrins/tzYbU/

• With tabulator we can use ajax for update Data but we can't set Headers (after we can initialize Tabulator without any parameters and send it after / We can use the same "Tabulator" for multiple pages)
• The index can't be changed from Data updates so the data is the only element that knows the name of the index.

Excuse me for my bad English ...

tabulator.js:1021

_generateTooltip(cell, data, tooltip){

Causes an Error in Internet Explorer.
This can be fixed by changing it to
_generateTooltip: function(cell, data, tooltip){

Hi there,

Hope you're still fine.
Wish you have a good day.

I found out an issue during working with tabulator.
The problem comes from 'Filter data in header'.
So here is my step.

Following your example,
Step 1 : I resize the column width to make it bigger (the scroll-bar will appear).
Step 2 : I scroll to the right. Because I would like to filter based on 'Date of birthday'
Step 3 : I type '14' and then I have a broken html.
You can have a check for the attachment

Could we keep the state of scroll after filtering ?
I mean that everything I type something for filtering based on the 'Date of birthday'.
The scroll is alway back to the left. I have to scroll to the right to change the text-search.
It would be better it we can keep the state of scroll. Because it's not good for user's experience.

Thank you so much.

Cheer,
Tony

Hi! First, kudos to a great plugin. I've just discovered Tabulator recently and I am now using it on a project but I seem to be having an issue with the column headers. Here's how it looks like:

On page load, the column headers are not shown. But if I resize or just click on the border that separates the other columns from the rest, all the headers just "magically" appears.

I tried all sorts of "redraw" - on page load, on tab click, etc, - which somehow works as a workaround, but I don't really know why it's even doing that in the first place.

Is this a bug or is there something I am not doing. Here's how my code looks like:

$("#bipd-table").tabulator({
pagination: false,
fitColumns: false,
sortBy: "cover_limit",
sortDir: "asc",
progressiveRender:true,
ajaxURL: "bipd.php?trans_type=get",
columns:[
{title:"ID", field:"id", visible:false, align:"center", editable:false},
{title:"Cover Limit", field:"cover_limit", formatter:"money", sortable: true, sorter:"number", align:"center", width:143, editable:false},
{title:"BI PC", field:"bi_pc", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
{title:"BI LM", field:"bi_lm", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
{title:"BI HV", field:"bi_hv", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
{title:"BI MC", field:"bi_mc", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
{title:"PD PC", field:"pd_pc", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
{title:"PD LM", field:"pd_lm", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
{title:"PD HV", field:"pd_hv", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
{title:"PD MC", field:"pd_mc", formatter:"money", align:"right", width:100, editable:true, editor:"number"},
],
}
});
`

If the content of the cell exceeds the cell width then only partial data is shown. How can we show the full cell data, may be on hover via a tooltip?

Tabulator works fine in Chrome / Firefox but NOT in IE; what can I do?
Trans in advance!

In a large table with many pages, how can I get the current page to use it when I back to the table in the same page where there was the record I just handler

reproduce:
switch position between headers name and task progress. Then sort name

First, thank you for this great library 🏆

I need to pass a few parameters to my Ajax data source via POST. Now, I can "compose" the URL with the parameters and perform a GET request, but I find it a bit "inelegant", and maybe it will collide with the promised Ajax pagination...

May I pass the parameters with POST instead ?

e.g:  _data: { offset: "0", limit: "100", text1: "SearchText1", text2: "SearchText2",},_

thanks