columns hidden/display size

columns hidden/display size

Massimo74Massimo74 Posts: 85Questions: 1Answers: 0

hi I would like to know if possible (perhaps using a responsive event or other) when I restrict the display to hide certain columns example: display size ≥992px visible columns [1,2,3,4,5], display size ≥768px visible columns [1,2,3,4], display size ≥576px visible columns [1,2,3] ..... etc

Replies

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi Massimo74,

    It is possible to do this. Take a look at the following reference pages here and here.

    An example of this working can be found here.

    This will override the automatic hiding of columns.

    It is worth noting that there are currently some bugs when it comes to defining custom breakpoints and they may yield some unexpected results.

    Hope this helps,

    Sandy

  • Massimo74Massimo74 Posts: 85Questions: 1Answers: 0

    thanks, yes but when active responsive = true when it closes the bullet + appears and in the first column I check for line selection so I should set responsive = false but class "not-tablet-p" etc ... not work is responsive = false ..... I would like to see that the columns disappear and appear by loosening the screen but I would not like it to create the bullet that goes below to tell us...

    other question, but the colvis button always works ???? no right ??...

    http://live.datatables.net/qotoguja/2/edit

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi Massimo74,

    As I understand you want the green "+" sign to not show when you are resizing?

    I've made one or two changes to the example you have supplied which you can see here.

    The main change is to the value of the responsive property, you need to set it as shown below

    responsive:{details:false}
    

    The documentation for this can be found here.

    The colvis button should always work, but only in responsive mode. I don't see it in your example. The documentation for column visibility can be found here.

    Hope that helps,

    Sandy

  • Massimo74Massimo74 Posts: 85Questions: 1Answers: 0

    ok perfect thanks.

  • Massimo74Massimo74 Posts: 85Questions: 1Answers: 0
    edited June 2019

    I have a problem with the responsive setting,
    from how you see I set breakpoints:

                  responsive: {
                    details:false,
                    breakpoints: [
                        { name: 'desktop',  width: Infinity },
                        { name: 'tablet-l', width: 1440 },
                        { name: 'tablet-p', width: 860 },
                        { name: 'mobile-l', width: 480 },
                        { name: 'mobile-p', width: 320 }
                    ],
                  },
    

    and my rows have:

      aoColumns:[
                 {target : [5], data: 'descrizione',className: "dt-body-left dt-body-nowrap all"},
                 {target : [6], data: 'tot_budget',render: $.fn.dataTable.render.number( '.', ',', 0,'',' €' ),className: "min-tablet-l dt-body-right dt-body-nowrap"},},
                 {target : [7], data: 'tot_eff',render: $.fn.dataTable.render.number( '.', ',', 0,'',' €' ),className: "min-tablet-l dt-body-right dt-body-nowrap"},
                 {target : [8], data: 'avanz',render: $.fn.dataTable.render.number( '.', ',', 1,'',' %' ),className: "desktop dt-body-right dt-body-nowrap"},
                 {target : [9],data: 'tot_eff_a_c',render: $.fn.dataTable.render.number( '.', ',', 0,'',' €' ),className: "min-tablet-l dt-body-right dt-body-nowrap"},
                 {target : [10],data: 'cons_prev_dich',render: $.fn.dataTable.render.number( '.', ',', 0,'',' €' ),className: "desktop dt-body-right dt-body-nowrap"},
                 {target : [11],data: 'tot_residuo_oda',render: $.fn.dataTable.render.number( '.', ',', 0,'',' €' ),className: "desktop dt-body-right dt-body-nowrap"},
    ]
    

    now I run the test at a 1024x768 resolution, based on my breakpoints then it should be a tablet-p resolution instead here's what comes up, the columns with "min-tablet-l" are seen equally ???? where am I wrong

    this demo here if you set output 1000px see

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 14,303Questions: 1Answers: 2,430

    Hi @Massimo1974 ,

    It looks like you tripped over a bug that I logged internally last month (DD-881 for my reference). I don't think there's an easy workaround for it, but I'll add this thread to the bug so that when it progresses I'll report back here. Apologies for any inconvenience,

    Cheers,

    Colin

  • Massimo74Massimo74 Posts: 85Questions: 1Answers: 0

    thanks

  • colincolin Posts: 14,303Questions: 1Answers: 2,430

    I'm sorry for the delay on this one, @Massimo74 , but we're looking at this issue now, and the test case you posted above appears to be working as expected for us. Can you explain, please, why you feel the breakpoints aren't working how you expected?

    Colin

Sign In or Register to comment.