I need to programmatically add/remove fixed columns after table created. Reason? responsive table

alexk345

I need to programmatically add/remove fixed columns after table created. Reason? responsive table with fixed columns.

Same code base will have to work when size reduced to minimal width.

colin

The 4.0.0 release of the FixedColumn extension introduced fixedColumns().left() and fixedColumns().right() which can be used to dynamically adjust, or remove, fixed columns programmatically.

Colin

alexk345

Issue is how do i access fixedcolums outside Datatable?
var table = $('#example').DataTable( {...

table.fixedColumns().left(2); <-- error
table.api().fixedColumns().left(2); <-- error

i looked at examples cant find one shows how to use this call.

I want to change after table is created and drawn and then i add or remove fixed columns and redraw.

Idea is this. I want to show normal page with fixed columns with action columns with horizonatl scroll /vertical scroll Then same code without any change will have to remove fixed columns on the fly when responsive_resize event triggered.

kthorngren

The Compatibility matrix shows this for using FixedColumns and Responsive in the same table:

Doesn't sound like both are meant to work together.

Kevin

alexk345

That is what i need to do but by programming the same.
https://datatables.net/extensions/scroller/examples/initialisation/fixedColumns.html
Your page has javascript error. This is what creating problem everywhere.

I need to access fixedcolumns outside datatable and not in any callback. Datatable is drawn. Now i want to remove fixed column and redraw.

Your api not working as seen above error in your web page

I cant upload error image here as it fail to upload. so you have to see yourself in browser.

jquery-3.5.1.js:4055 Uncaught TypeError: Cannot read properties of undefined (reading 'left')
at new e (dataTables.fixedColumns.min.js:24)
at HTMLDocument.<anonymous> (fixedColumns.html:42)
at mightThrow (jquery-3.5.1.js:3762)
at process (jquery-3.5.1.js:3830)

I think it is well understood it is not mean to work together. That is not what i am asking.

No responsive issue i am discussing here. All i want to is removed fixed colum and add fixed column after its drawn

So i add new fixed column and redraw table so all header to everything drawn perfect.

my Goal is ONE MASTER TABLE design for everything. Programmatically the features added and removed with apis. So one custom style css.

Thanks Much!!!!!

alexk345

initComplete: function (settings, json) {
new $.fn.dataTable.FixedColumns( this, {
leftColumns: 2,
rightColumns: 1
} );
}

it works inside callback.

outside it dont work.

var table = $('#example').DataTable( {

new $.fn.dataTable.FixedColumns( table, {
leftColumns: 2,
rightColumns: 1
} );
table.clear.draw();

Nothing changes. No error. Bascally outside the table definition , it do not register new changes.

I want to add / remove fixed columns once table is drawn.
Thanks!!!!!

kthorngren

https://datatables.net/extensions/scroller/examples/initialisation/fixedColumns.html
Your page has javascript error.

There may be a bug with FixedColumns 4.0.1 and the Scroller extension. @allan or @colin can let us know.

See this example that uses the Constructor init. It uses fixedColumns().left() to disable and enable the FixedColumns.
http://live.datatables.net/wiposule/1/edit

Kevin

alexk345

I fiddle with fiddle first time ever.
It does work for non ajax data as you can see in this fiddle example.
https://jsfiddle.net/alexk345/e4cuxybm/8/

but
new $.fn.dataTable.FixedColumns( table);
Throws same error.
jquery-3.5.1.js:4055 Uncaught TypeError: Cannot read properties of undefined (reading 'left')

But for ajax call

=========================

var table = $('#example').DataTable( {
scrollX: true,
scrollY:"300px",
scrollCollapse: true,
ajax: "controllers/staff.php",
paging:false,
columns: [
{ // Checkbox select column
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: null, render: function ( data, type, row ) {
// Combine the first and last names into a single table field
return data.first_name+' '+data.last_name;
} },
{ data: "position" },
{ data: "email" },
{ data: "office" },
{ data: "extn" },
{ data: "age" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
{
data: null,
className: "center",
defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
}

    ],

==========================

it do not add fixed columns with this call
new $.fn.dataTable.FixedColumns( table, {
leftColumns: 1,
rightColumns: 1
} );

Thanks!!!

alexk345

I misunderstood "responsive" as general responsive css setup. Here it is just a mode. So i modified such a way that i load options based on size of the window.

if its <500 i want it to show only two column stretched to end to end. Basically in mobile its only column display. Rest under detail button.

if its above 500 normal scroll table show up.

   var table=drawtable();

$( window ).resize(function(table) {

    table=drawtable(table);

}); 


function drawtable(table)
{
    //console.log($( window ).width());
    var width=$( window ).width();
    console.log("width:"+width);
    if(width<500)
    {
                    //no reload if its already in mobile mode.
        if(dtOptions.responsive==false || dtOptions.responsive==null )
        {
            dtOptions.responsive = true;
            $('#example').DataTable().destroy();
            table = $('#example').DataTable( dtOptions);
        }

    }
    else
    {
                   //no reload if its already in above 500px.
        if(dtOptions.responsive==true || dtOptions.responsive==null )
        {
            dtOptions.responsive = false;
            $('#example').DataTable().destroy();
            table = $('#example').DataTable( dtOptions);
        }
    }
    return table;
}

https://ibb.co/rwqgkFq
https://ibb.co/gjh3Ccz
https://ibb.co/5TgVsGK
dont know know how to insert image. so check that links.

All have scrollbars but its disabled in screen capture. Except responsive.

Still have few issues. That checkbox do not show under detail (next task) and header still get messedup in responsive mode.

Once that is done. Then its more customization datatable too look like more intelligent data aware windows. In 1995 we had datawindows. I think it was powerbuilder. it disappeared.

few more days i need to solve this mobile non mobile datatable to picture perfect.

thanks for your help.

colin

Thanks for pointing out the error in our example. I've raised it internally (DD-1350 for my reference) and we'll report back here when there's an update.

It would be worth looking at responsive.breakpoints as that defines where columns are and aren't shown.

Cheers,

Colin

colin

Just to say we''ve fixed the problem with out example and this will be deployed on the next site build.

Colin