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
]
});
I'm creating my first table using HTML and CSS. I used a code generator to create the table "code" (HTML and CSS). I add all of that to a long string and send it to MailApp.sendEmail to include the table in the Email. It works great except that the report lines are too spaced out vertically. I need help reducing the row height or otherwise reducing the vertical spacing. I'd include some of my HTML and CSS but I can't figure out how to put in a format that this freak'n window will accept.
Can someone advise on how to reduce the vertical row spacing in a CSS table?
Try this:
tr { line-height: 5px; }
I created a visualization with d3
http://jbk1109.github.io/tennisMapWithPlayersListOnHover.html
When mouse hovers over the histogram, a list appears underneath. There are a couple cases when the list becomes too long and I would like the table to grow horizontally beyond certain length.
Is there an optimal way to do this other than checking the length of list and appending a new table element?
Nice job Brian! I would try to get viewport height with jQuery, and compare it witch table height, something like:
if(table_height > viewport_height) {
// change table css style to 2 column table
}
Is there any option to not show grouping header in SlickGrid?
1) I tried to just set it to
.slick-group{
display:none;
}
but all normal rows have set top inline:
<div class="ui-widget-content slick-row even slick-group" style="top:50px"...
That means that even grouping row not shown anymore, the space between grouped row blocks left. So thats not solves my problem.
2)I've found question where one guy hides total row using dataView parameter displayTotalsRow: false. And i wonder maybe there is some displayTotalsRow like paramenter, that hides grouping row?
I have an HTML page that has static tables placed in the page because these never change. I have a main table that houses all the elements to keep everything aligned. This is probably what is causing the problem.
I have the main table with 2 tables within it. Each row in the first inner table, called dropDownTable, usually has up to about 10 rows. dropDownTable is in the following format:
td1: text; td2: select element; td3: text (this part is dynamically updated).
The second table, called showDetails, uses the options from the select element in the rows in dropDownTable to query a database (onchange attribute), get some information and then display each element that is found. The response from the database is up to 150 character strings, usually shorter though.The user then clicks an element in the details that updates the third column in the dropDownTable.
I'm not really sure if this is a JavaScript or HTML problem but each time the showDetails table updates, it pushes the bottom of the main table down. There are 2 buttons at the bottom of the main table that move each time the user changes the select in the second column of dropDownTable.
It very aesthetically displeasing.
Any ideas would be greatly appreciated. I have had this problem before but with other elements.
are you adding more content, thus making the table taller?
I cant quite understand what your problem is exactly, but:
td
{
vertical-align: top;
}
will keep everything in the top of its cell, rather than centering to the tallest column.
You shouldnt be using tables for layout, tables are for tabular data. have a read of this
if you want to fix the heght of the table, do:
table
{
height: 400px; /* replace with your heihgt */
}