Hi ,Jay.

Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

-

Unfortunately, adding row numbers to tables is not possible with our built-in features.

The front-end (JS) part of wpDataTables plays a significant role in the plugin’s functionality. Generally, front-end rendering is done by the DataTables jQuery plugin

All wpDataTables existing on the page are reflected in the global JavaScript object called ‘wpDataTables‘. If you check this variable in the JS developer console you will see the wpDataTables as properties of this object. 

-

I have a custom workaround with a bit of JS that you can try, though.

First you will add a first empty column at the beginning of the table and i will show you a JS script you can use, then it will always show fixed row numbers in this column , starting from 1 and so on.

-

This script will check if there is a table on the page, and if there is - it will add the row numbers, fixed from 1 > until the last row.

If you change the sorting, filtering, that first column will always have fixed numbers.

The front-end (JS) part of wpDataTables plays a significant role in the plugin’s functionality. Generally, front-end rendering is done by the DataTables jQuery plugin

All wpDataTables existing on the page are reflected in the global JavaScript object called ‘wpDataTables‘. If you check this variable in the JS developer console you will see the wpDataTables as properties of this object. 

-

Here are the instructions to make this workaround.

First add one column in your file or data source at the start of the table (as first column),

Then we will use this JS code.

I added this in my plugin settings/Custom Js and CSS/Custom JS :

jQuery(window).on('load', function() {
    setTimeout(() => {
        wpDataTables.table_1.api().on('order.dt search.dt', function(e, dt, type, indexes) {
                wpDataTables.table_1.api().column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function(cell, i) {
                    cell.innerHTML = i + 1;
                });
            })
            .draw()
    }, 2000);
});

You can try either to add it the same way in the plugin's Custom JS , 

or if you wish to add it directly to WP page(s) , add it wrapped in <script></script> tags as Custom HTML in your page builder.

<script type="text/javascript">
jQuery(window).on('load', function() {
    setTimeout(() => {
        wpDataTables.table_1.api().on('order.dt search.dt', function(e, dt, type, indexes) {
                wpDataTables.table_1.api().column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function(cell, i) {
                    cell.innerHTML = i + 1;
                });
            })
            .draw()
    }, 2000);
});
</script>

Let me know if that helps, it should work.

Thank you.