Show last group in tabulator
Date : March 29 2020, 07:55 AM
With these it helps Why do you want to show only the last group are you trying to sum all the rows, etc. table.clearData();
table.addData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}], true);
|
Show/Hide or Toggle Nested Table Child In Tabulator
Date : March 29 2020, 07:55 AM
like below fixes the issue Using a mix of @dota2pro example here is a nice working solution: https://jsfiddle.net/ustvnz5a/2/ var nestedData = [{
id: 1,
make: "Ford",
model: "focus",
reg: "P232 NJP",
color: "white",
serviceHistory: [{
date: "01/02/2016",
engineer: "Steve Boberson",
actions: "Changed oli filter"
},
{
date: "07/02/2017",
engineer: "Martin Stevenson",
actions: "Break light broken"
},
]
},
{
id: 2,
make: "BMW",
model: "m3",
reg: "W342 SEF",
color: "red",
serviceHistory: [{
date: "22/05/2017",
engineer: "Jimmy Brown",
actions: "Aligned wheels"
},
{
date: "11/02/2018",
engineer: "Lotty Ferberson",
actions: "Changed Oil"
},
{
date: "04/04/2018",
engineer: "Franco Martinez",
actions: "Fixed Tracking"
},
]
},
]
var hideIcon = function(cell, formatterParams, onRendered){ //plain text value
return "<i class='fa fa-eye-slash'></i>";
};
const table = new Tabulator("#example-table", {
height: "311px",
layout: "fitColumns",
resizableColumns: false,
data: nestedData,
selectable: true,
columns: [{
title: "Make",
field: "make"
},
{
title: "Model",
field: "model"
},
{
title: "Registration",
field: "reg"
},
{
title: "Color",
field: "color"
},
{formatter:hideIcon, align:"center", title:"Hide Sub", headerSort:false, cellClick:function(e, row, formatterParams){
const id = row.getData().id;
$(".subTable" + id + "").toggle();
}
}
],
rowFormatter: function(row, e) {
//create and style holder elements
var holderEl = document.createElement("div");
var tableEl = document.createElement("div");
const id = row.getData().id;
holderEl.style.boxSizing = "border-box";
holderEl.style.padding = "10px 10px 10px 10px";
holderEl.style.borderTop = "1px solid #333";
holderEl.style.borderBotom = "1px solid #333";
holderEl.style.background = "#ddd";
holderEl.setAttribute('class', "subTable" + id + "");
tableEl.style.border = "1px solid #333";
tableEl.setAttribute('class', "subTable" + id + "");
holderEl.appendChild(tableEl);
row.getElement().appendChild(holderEl);
var subTable = new Tabulator(tableEl, {
layout: "fitColumns",
data: row.getData().serviceHistory,
columns: [{
title: "Date",
field: "date",
sorter: "date"
},
{
title: "Engineer",
field: "engineer"
},
{
title: "Action",
field: "actions"
},
]
})
},
});
|
How to get Tabulator tables to show-up next to each other?
Date : March 29 2020, 07:55 AM
I wish this helpful for you Check this w3schools exampleconst tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];
const tabledata2 = [{
id: 1,
name: " Bob",
money: "12",
col: "red",
dob: ""
},
{
id: 2,
name: " May",
money: "1",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: " Lobowski",
money: "42",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: " Marmajuke",
money: "16",
col: "yellow",
dob: "31/01/1999"
},
];
const table = new Tabulator("#example-table1", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150
},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{
title: "Favourite Color",
field: "col"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
]
});
const table2 = new Tabulator("#example-table2", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150
},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{
title: "Favourite Color",
field: "col"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
]
});
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px;
/* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="example-table1"></div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="example-table2"></div>
</div>
</div>
</body>
</html>
|
Tabulator IE 11 compatibility issue for more than one tabulator not opening on same html page
Tag : html , By : abuiles
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , There are two issues with your code that i can identify. The first is that you are creating all the tables on the same table variable (ie the second table is replacing the first table on the same variable), while this wont stop the tables working it is bad practice and also it means there is no way to call any functions on them after they have been created, which brings me onto my second point. table.redraw();
var table = Tabulator.prototype.findTable("#example-table")
|
Date : March 29 2020, 07:55 AM
it helps some times You would need to update the column definition for the affected column, this can either be done on the table using the updateColumnDefinition function and specifying the field of the column: table.updateColumnDefinition("name", {headerFilter:false})
column.updateDefinition({headerFilter:false})
|
Boards Message :
Related QUESTIONS :