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

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

alexk345alexk345 Posts: 9Questions: 2Answers: 0

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.

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 14,610Questions: 1Answers: 2,493

    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

  • alexk345alexk345 Posts: 9Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    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

  • alexk345alexk345 Posts: 9Questions: 2Answers: 0
    edited December 2021

    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!!!!!

  • alexk345alexk345 Posts: 9Questions: 2Answers: 0

    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!!!!!

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    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

  • alexk345alexk345 Posts: 9Questions: 2Answers: 0

    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!!!

  • alexk345alexk345 Posts: 9Questions: 2Answers: 0
    edited December 2021

    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.

  • colincolin Posts: 14,610Questions: 1Answers: 2,493
    edited December 2021 Answer ✓

    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

  • colincolin Posts: 14,610Questions: 1Answers: 2,493

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

    Colin

Sign In or Register to comment.