I want to drag an item from a list of items and drop it in a table column. Each columns of the table contains another sub table with a specific template.
I am using dragular for this.
Problem : As I render the view for the first time, I am calculating the height of each row in the sub table and making all the tables row height the same. So the final view looks like its all in one table.
Challenge Facing : When I drop a new item into the table columns (as another sub column) , I want to match the height of all the corresponding rows again in the sub tables. Not sure how to achieve this.
Related
I am creating a grid (so something with rows and columns with buttons in the cells) and a slider that should alter the number of columns.
The number of rows is virtually unlimited and, since the grid layout in bootstrap is implemented with a flexbox i should either swap column classes or redraw everything every onchange event.
is there another way in bootstrap or do i need to create a grid layout from scratch and alter the column layout each time?
i managed to do that by adding a counter of elements inside a row and whenever i reach the desired element number i append a new row and start adding elements to the last row
like so
if(indexofrow%element.getColNumber()==0){
indexofrow++;
document.getElementById("canvas").insertAdjacentHTML("beforeend","<div class='row flex-nowrap'/></div>");
drawSingleButton(i,element,arrayOfLayers);
}else{
drawSingleButton(i,element,arrayOfLayers);
indexofrow++;
}
it's probably a cheap workaround but for my case it works
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
]
});
What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.
I have a data grid table (div based) that not in table format. I have done it in div based format with fixed width cell.
My problem
If I have add the column in the grid table, it will adjust like table format.
How can I do it?
Above table I need to add the column but it's all fixed width cell, if I add extra column the
table collapses.
This is possible without table.
Just see below the link.
http://jsfiddle.net/anglimass/BkwgY/2/
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 */
}