Develop Reference

Is there a way to automatically collapse specific columns for Responsive Layout Collapsed List?

I'm trying to use Tabulator to create a "Responsive Layout Collapsed List", per the example here, and the documentation here.
The example's source code doesn't seem to match the example itself, but from my understanding and playing with code, as the width of the table is decreased and, as a result, columns are collapsed, tables are created for each row that contain the names and values for the columns that were collapsed as a result of the reduction in table width. In the case of the Tabulator example, it almost seems as if a particular width is being set on the table and that is forcing the columns to collapse because the extra columns don't fit that width, but I'd like to see if there is a better and more dynamic way to do this.
Is there a way to get the columns to automatically collapse? Meaning, a user won't have to manually reduce the width of the table to get the columns to collapse - the columns will already be collapsed on-load, with the ability to expand and collapse the collapsed list immediately with no further action needed from the user.
I've tried:
Doing table.hideColumn("column_name_here"); programmatically.
Setting visible: false for each column that I wanted to automatically collapse.
CSS display: none for each column that I wanted to automatically collapse.
Manually setting the width CSS of the table to the point that the columns I wanted to collapse would do so without me having to adjust the table width after. This...worked, but it required too much guessing and fooling around for me to think it was the best and safest solution.
responsiveLayoutCollapseFormatter (admittedly, I don't fully understand the example that was given for this one)
Just as an example, a teammate is using the Datatables library for the table on their website, and they were able to pass className: 'none' into the column objects of each of the columns that they wanted to automatically have collapsed on the page, and it indeed automatically collapses those columns into an expandable table of column names and values without the need to do anything else:
Datatables Example
From the example above, the "Message", "Aliases", "Type", "Queue", and "Skill" columns all have className: none in their column objects, while the rest of the columns don't; className: none causes those columns to automatically collapse, thus putting them into the collapsed table list without having to set a width manually or adjust the width manually on the page.
Is there an equivalent of this in Tabulator? I've been racking my brain trying to figure this out. Thanks!

The point of the responsive collapse formatter it to collapse rows that no longer fit on the table as a result of its width being insufficient, it is there to enable responsive layouts on smaller screens sizes. There is not way to force it to collapse row early, as it collapses them based on available horizontal space on the table.
Thant being said it is very easy to mimic its effect on a table by using a rowFormatter if you just want to display some values under the columns
var table = new Tabulator("#example-table", {
rowFormatter:function(row){
//row - row component
//define holder elements
var listHolder = document.createElement("div");
var list = document.createElement("table");
//retrieve row data
var data = row.getData();
///add each columns data to the list
listContents += "<tr><td><strong>Name</strong></td><td>" + data.name + "</td></tr>";
listContents += "<tr><td><strong>Age</strong></td><td>" + data.age + "</td></tr>";
//add contents to list
list.innerHTML = listContents;
listHolder.appendChild(list);
return listHolder;
},
});
For more details on the row formatter have a look at the Format Documentation
You can use the rowFormatter to make extensive changes to the row layout, the Row Formatter Example demonstrates an extreme case where you can replace the columns all together if needed
With Toggle Button
if you want a toggle button similar to the collapse formatter, then you need to do two thing, store a reference to the list element in the row data, and define a formatter to add to a toggle column.
//define toggle formatter
var toggleFormatter = function(cell){
var toggleEl = document.createElement("button"); // create your toggle button
toggleEl.addEventListener("click", function(){
var listHolder= cell.getData().listHolder; //lookup list element from row data
listHolder.style.display = listHolder.style.display ? "none" : ""; //toggle the display property on the list element
});
}
var table = new Tabulator("#example-table", {
rowFormatter:function(row){
//row - row component
//define holder elements
var listHolder = document.createElement("div");
var data = row.getData();
// CREATE TABLE AS PER ABOVE EXAMPLE
// store the list element on the row data (without triggering an update)
data.listHolder = listHolder;
return listHolder;
},
columns:[
//define toggle column
{formatter:toggleFormatter, width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false},
//...other columns
]
});

datatable white-space:nowrap for one specific column

I have a bootstrap datatable with alot of data. One row in particular (Product) will always have a large amount of data. Currently the row expands downwards and takes up alot of space
I am trying to get the Product column to expand to the right instead of down, so that the product column title expands to fit the width of the data. The closes I've gotten so far is by adding this css style:
<style> td { white-space: nowrap; } </style>
Which will do the desired column growth, but for each column
Is there a way to have ONLY the product column get better styling to it expands to the right and grows the column width? Maybe even have two lines of text instead of one for a more compact text display.
https://jsfiddle.net/martinradio/yz46nLr8/61/

You can use td:nth-child(9).
td:nth-child(9){
white-space: nowrap;
}
See the JSFiddle: https://jsfiddle.net/ju4d73po/

For Bootstrap 4 use 'text-nowrap' class
const table = $('#listTable')
.DataTable({
columnDefs: [{
targets: 0,
className: 'text-nowrap'
}]
});

Jquery Datatable - need to center the data first then right align

I am using data-table in my application which contains text and #'s as data and use the following data alignments:
1) Text data - left aligned
2) Header data - center aligned
3) #'s - center the data first then right align
I have achieved the first two alignments by using data-table's default classes 'dt-left' and 'dt-center'. But I am unable achieve the 3rd alignment either by using 'dt-center' and 'dt-right' classes.
Please find the attached screen-cap for the expected and actual alignments.
Expected #'s alignment:
Actual #'s alignment:
I had achieved the expected behavior by simply providing 'padding' for . But I want to know is there any other efficient/default option available in data-table to achieve this?

The following shows the columns.className option being used to center align the text in the final column of a datatable:
$('#myTable').DataTable( {
columnDefs: [
{
targets: -1,
className: 'dt-body-center'
}
]
} );
Please refer : https://datatables.net/manual/styling/classes for more information.

html of CKeditor, edit of mathjax dialog

I am trying to edit the area of the CKeditor ( see icon). All this window is a Table with rows and columns, even the textarea is a part of a row. What i am trying to do is to create more Columns for my dropdowns and to move them higher, so i have first my dropdowns in a line and then my textarea. So is there a file responsible for these settings?
ps. I can't find the inspected html.

Well this can be achieved by using an Hbox (Horizontal Box probably).
add this code to mathjax.js
{ type: 'hbox',
widths: [ '25%', '25%', '50%' ],
children: [
type:'select',
id:'someid'
]
}

Highcharts: column overlaps when hiding by legend

I have a problem with highcharts. I have a set of columns for a single category, and when i start hiding the columns using the legend names it starts to show a strange behaviour for example my default chart is as follows:
After I start hiding columns it starts overlapping, the columns that should be visible act like the are, but the others stay there. Is there any known bug?
PS: I'm using highcharts-ng, all the series are added dynamically.

I don't know if it is a known bug, but you can try to fix the space between two columns using something like:
plotOptions: {
column: {
borderWidth: 1,
pointPadding: 0,
groupPadding: 0,
/* ... */
},
/* ... */
}
Do you still have the overlapping with those options ?

Found the issue after digging a bit on our code. We had somewhere in our css
rect{
visibility: visible !important;
}
this was preventing non-visible columns to hide properly.