Answers

• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 3

  I'm not quite following I'm afraid. Are you looking for the last column to be the one that remains, rather than the first? i.e. collapse from the left rather than the right?

  It does sound like the priority might be the answer - can you not set that dynamically based on whatever metric it is you want for priority?

  Allan
• MinhTran Posts: 13Questions: 3Answers: 0

  June 4 edited June 4

  I mean, as you can see in the picture, DataTables is running in responsive mode, and the current access device is the phone. If the right column (Name) is not long enough (due to width of head and content), it will be hidden below (details), but in the image, the external ID column can be displayed with the Id column and still be wide enough. How can Datatable automatically identify columns that are wide enough to display them externally, rather than in detail? I want to be able to automatically, not manually, by prioritizing. I wish that because, as in the picture, if only the id column appears, the screen looks discrete, while an additional column may appear with width and short content.

  

  I will describe by code example

  const heading = ['id', 'name', 'external Id', 'Rpt'];
  
  const theLastcolCanShow = heading.shift()
  
  function canShowWithId(column) {
      const someCondition = true; // condition width or content in Datatables
      return someCondition;
  }
  
  const columnsToShow = [];
  
  columnsToShow.push(theLastcolCanShow);
  
  for (let i = 1; i < heading.length; i++) {
      if (canShowWithId(heading[i])) {
          columnsToShow.push(heading[i]);
          break;
      }
  }
  
  

  Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• colin Posts: 15,240Questions: 1Answers: 2,599

  June 4

  It sounds like you need to use columns.responsivePriority to prioritise which columns are responsively removed first. This example demonstrates that. Would that do the trick?

  Colin
• MinhTran Posts: 13Questions: 3Answers: 0

  June 4

  Hi Colin, I implement utils for my team; I don't know which data they're using, so I cannot use priority in this case. I try to make the table have the best possible display.
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 4

  I'm trying to work out how what you are looking for could be done with an algorithim. I'm still not sure I get what criteria you want to use to decide the order in which the columns are hidden though - do you want the widest column hidden first?

  DataTables will collapse the table by priority, and then from the right. But you want some other method, and it sounds(???) like you want it by width? Is that right?

  Allan
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 4

  Or is the problem that the text isn't wrapping in the details view? If that is the case, it is a CSS issue, and I'd need a link to the page to help resolve it. You would just need to set the white-space option to normal.

  Allan
• MinhTran Posts: 13Questions: 3Answers: 0

  June 4 edited June 4

  That's not what I meant. Let me explain again from the beginning. As you can see in the picture, the default column order is from left to right. I use default priority, and I can't use set priority because I'm making a common library for the team to use; I don't know how they do UI and data. All columns below are examples only.

  1 | 2 (long content) | 3 (long content), 4 (long content), 5

  

  As you can see in the picture, I want to ask if Datatables can automatically detect if columns 1 and 2 can be display at the same time (not in detail), if it's not whether columns 1 and 3 can?. If 1 and 3 cannot, 1 and 4 do so? If 2, 3, 4, and 5 cannot, then 1 can be displayed outside, because with only column 1, the UI has a lot of excess space.

  

  As you can see, ID | Name can not, I would like to show ID | External Id have no excess space

  
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 4 Answer ✓

  I want to ask if Datatables can automatically detect if columns 1 and 2 can be display at the same time (not in detail), if it's not whether columns 1 and 3 can?. If 1 and 3 cannot, 1 and 4 do so?

  I'm with you now. Thank you for the clarification. The answer is no, at the moment, it doesn't attempt to do anything like that, but I can see that it might be a nice addition.

  Just now it will calculate the space available and the width of each column. It will then remove columns from the right until it fits in the space available and draws that. It does not then attempt to add back in other columns that were calculated for remove.

  This is the code (and then the rest of the function following that), where this happens and any change would need to be added.

  Allan
• MinhTran Posts: 13Questions: 3Answers: 0

  June 4

  Thank Allan
• MinhTran Posts: 13Questions: 3Answers: 0

  June 5

  Hi Allan, may I override core code in Datatables initComplete, on('draw') and colum visible button?
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 5

  You can modify the result of what DataTables / Responsive has done in initComplete and draw, but if you want to modify its behaviour, you'd need to modify its actual code.

  Allan