Tabulator: Why there is no built in rows numbering? (Frozen Column)

[aswzen]

I think it's a great idea if Tabulator have their own rows numbering (ex: 1,2,3,4 that appears in left side of table), like other jquery datatable.

Best Regards
Git

[olifolkerd]

Are you looking for auto numbering purely for display or that is shown in the data as well?

At the moment there is no auto increment index because that would cause issues for people using the table to create data that is then stored in a database where the index would be created at that point, not in the table.

If you just want one from a purely visual perspective then this is really easy to do with a custom formatter:

//automatic number generating formatter
var autoNumFormatter = function(){
    return $("#example-table .tabulator-row").length + 1;
};

//build table
$("#example-table").tabulator({
    columns:[
        {formatter:autoNumFormatter, width:40}, //incrementing row number
        {title:"Name", field:"name"},
    ]
});

[aswzen]

thank you, its working as well.
but we all know when there are many columns on the table and we try to scroll to right side the row number will disappear (not frozen).

[olifolkerd]

Frozen rows and columns are on the development roadmap, but they wont be about for a few months i am afarid

[olifolkerd]

As this has resolved the initial question i am going to close it, if you wish to track the progress of column/row freezing please raise it as a sepereate issue so others can find it more easily.

Cheers

Oli

[mikefarrel7]

Hi Olifolkerd,

How about numbering with pagination table, I use the syntax numbering
//automatic number generating formatter
var autoNumFormatter = function(){
return $("#example-table .tabulator-row").length + 1;
};

//build table
$("#example-table").tabulator({
columns:[
{formatter:autoNumFormatter, width:40}, //incrementing row number
{title:"Name", field:"name"},
]
});
but when these codes are using with paging tables, the numbering is not recursive in the next paging??. please help me for this. Thank You Olifolkerd.

[olifolkerd]

Hey,

You can use the getPage function to determine the current page and work out the maths from that, you will need to know the page size you are using so i suggest you put that in a variable somewhere as well:

var pageSize = 10;

//automatic number generating formatter
var autoNumFormatter = function(){
    var page = $("#example-table").tabulator("getPage")
    var rowNo = $("#example-table .tabulator-row").length + 1;

    return (pageSize * (page-1)) + rowNo;
};

//build table
$("#example-table").tabulator({
    paginationSize:pageSize,
    columns:[
        {formatter:autoNumFormatter, width:40}, //incrementing row number
        {title:"Name", field:"name"},
    ]
});

Additionally you might be interested to know you can now freeze columns in Tabulator:

$("#example-table").tabulator({
    paginationSize:pageSize, 
    columns:[
        {formatter:autoNumFormatter, width:40, frozen:true}, //incrementing row number
        {title:"Name", field:"name"},
    ]
});

Full information on this feature can be found here

Let me know if that all works out for you

Cheers

Oli

[mikefarrel7]

Thank you Oli, I really want to Thank you. It's works nice. :)

On 27 January 2017 at 15:36, Oli Folkerd [e-mail] wrote:

Hey,

You can use the getPage function to determine the current page and work
out the maths from that, you will need to know the page size you are using
so i suggest you put that in a variable somewhere as well:

var pageSize = 10;
//automatic number generating formattervar autoNumFormatter = function(){
var page = $("#example-table").tabulator("getPage")
var rowNo = $("#example-table .tabulator-row").length + 1;

return (pageSize * (page-1)) + rowNo;

};
//build table$("#example-table").tabulator({
paginationSize:pageSize,,
columns:[
{formatter:autoNumFormatter, width:40}, //incrementing row number
{title:"Name", field:"name"},
]
});

Additionally you might be interested to know you can now freeze columns in
Tabulator:

$("#example-table").tabulator({
paginationSize:pageSize,,
columns:[
{formatter:autoNumFormatter, width:40, frozen:true}, //incrementing row number
{title:"Name", field:"name"},
]
});

Full information on this feature can be found here
http://olifolkerd.github.io/tabulator/docs/#frozen-col

Let me know if that all works out for you

Cheers

Oli

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/120#issuecomment-275606048,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUC3FU2xnE-0RGwI1v71iS1MGT7cVvmTks5rWZ6PgaJpZM4LFmuF
.

[olifolkerd]

Hey Mike,

Glad to hear it all worked out. let me know if you have any other issues.

Cheers

Oli

[mikefarrel7]

Hi Oli,

Yeah, thank you, I really happy with your table pluggins :), btw thank you
for your kindness to share your pluggins, btw I acctually want to ask about
another issues, not about the table, but about web security, do you know
about that? because I don't know to much about web security but now I built
them. I just worries for the future if my web had a problem. :(, I want to
ask about security just like htaccess, index.php how to secure them?, but
if you don't know about them, no problem. :).

regards
Mike

On 1 February 2017 at 04:08, Oli Folkerd [e-mail] wrote:

Hey Mike,

Glad to hear it all worked out. let me know if you have any other issues.

Cheers

Oli

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/120#issuecomment-276477121,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUC3FbjB-NtFBYtDSvQDHMqf3RDwPPdYks5rX5TTgaJpZM4LFmuF
.

[olifolkerd]

Hey Mike,

Web security is a complex subject with many different aspects to cover. it is ofetn a good idea to use frameworks such as Laravel, in your backend PHP as they take car of a lot of issues for you.

here is a link to an interactive site that will give you a rough guide to some of the key concerns with web secuirty:
http://edu.williamdurand.fr/web-security-101-slides/#/2/1

if you are after a more technical run through the the Open Web App Security Project (OWASP) is a great place to learn more. a list of the most serious common vulnerabilities can be found here: https://www.owasp.org/index.php/OWASP_Top_Ten_Cheat_Sheet

I hope that starts you off in the right direction.

Cheers

Oli

[mikefarrel7]

Ok Oli,

Thank you again oli, btw now I want to ask about the table plugin again,
how to make "colspan" and "rowspan" in your table plugins?

thank you in advance.

regards
Mike

On 4 February 2017 at 06:57, Oli Folkerd [e-mail] wrote:

Hey Mike,

Web security is a complex subject with many different aspects to cover. it
is ofetn a good idea to use frameworks such as Laravel, in your backend PHP
as they take car of a lot of issues for you.

here is a link to an interactive site that will give you a rough guide to
some of the key concerns with web secuirty:
http://edu.williamdurand.fr/web-security-101-slides/#/2/1

if you are after a more technical run through the the Open Web App
Security Project (OWASP) is a great place to learn more. a list of the most
serious common vulnerabilities can be found here:
https://www.owasp.org/index.php/OWASP_Top_Ten_Cheat_Sheet

I hope that starts you off in the right direction.

Cheers

Oli

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/120#issuecomment-277385649,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUC3FQ41d-6JwtzSiicytw4l4N_Vy0zPks5rY7DQgaJpZM4LFmuF
.

[olifolkerd]

Hi Mike,

There are currently no inbuilt ways to handle rowspan or colspan in Tabulator.

That being said, you can use Column Groups and rowFormatters to create a wide array of scenarios.

If you have a specific scenario in mind, could you create a separate issue (one issue per question please). with a description of what you are trying to achieve and ideally a diagram of the cell/row/column layout you are hoping for.

Cheers

Oli

[olifolkerd]

Hey,

Version 2.11 of tabulator now has the rownum formatter that provides incrementing row numbers:

$("#example-table").tabulator({
    columns:[
        {formatter:"rownum"}, //add auto incrementing row number
        {title:"Name", field:"name"},
    ],
});

An example of it in action can be found here

Cheers

Oli

[timothymarois]

I built this for using this for row numbers and then just came across this thread, didn't know there was a built-in version. But now that I know. I'll switch over to rownum not sure if there are any performance improvements.

var autoNumFormatter = function(cell){
        var row = cell.getRow()
        var rowIndex = row.getPosition(false);
        return (rowIndex+1);
 };

[dua-tanjung]

I built this for using this for row numbers and then just came across this thread, didn't know there was a built-in version. But now that I know. I'll switch over to rownum not sure if there are any performance improvements.

var autoNumFormatter = function(cell){
        var row = cell.getRow()
        var rowIndex = row.getPosition(false);
        return (rowIndex+1);
 };

If you use remote pagination with built-in row numbering, the counter will always start at 1 on every pages.

I'm using your solution, modify it a little to count starting row number.

Thanks.

[KilledDebtor]

I'm think better if it will be an autoincrement value.

For example, if u create 3 rows and remove first, next row that u create is 3.