I have a column defined as below
{
title: "Actual",
field: "actual_fee",
width: 110,
hozAlign: "right",
formatter: "money",
formatterParams: {
decimal: ".",
thousand: ",",
symbol: "£",
precision: 0
},
bottomCalc: "sum",
bottomCalcFormatter: "money",
bottomCalcFormatterParams: {
decimal: ".",
thousand: ",",
symbol: "£",
precision: 0
}
},
I would like to repeat the column header at the bottom of the table also. Is this possible?
I am using a bottomCalc, so cannot use a custom formatter to do it
Thanks
Tabulator does not have the option to duplicate the column header, it is only available at the top of the table
Related
I have API that generate pdf file after saving values into database. My customer needed to generate this pdf and then send it by mail. He sended my photo of how should that pdf look like. I recreated it, it looks same as in that picture but it is hard to read because there are missing vertical lines. I looked trought docs and also tried to google, bud I did not found anyithing.
Here is how my PDF looks like:
As you can see, vertical lines are missing and because of that is harder to read.
Is there any possibility to add vertical lines?
Here is my code:
let doc = new PDFDocument({ margin: 30, size: "A4" });
doc.pipe(
fs.createWriteStream(`${problemName}_${creationDate}` + ".pdf")
);
const table = {
title:
"Zápis koordinátora " +
koordinatorName +
" zo dna " +
creationDate +
".",
divider: {
header: { disabled: true },
horizontal: { disabled: false, width: 1, opacity: 1 },
padding: 5,
columnSpacing: 10,
},
headers: [
{ width: 130, renderer: null },
{ width: 130, renderer: null },
{ width: 130, renderer: null },
{ width: 130, renderer: null },
],
rows: [
["Nazov", problemName, "", ""],
[
"Nazov staveniska (Projekt)",
constructionName,
"Na vedomie komu",
"mailing list 1",
],
[
"Vytvoril koordinator BOZP",
koordinatorName,
"Priorita",
problemPriority,
],
["Datum zistenia", creationDate, "Datum odstranenia", ""],
[
"Zodpovedny za vyriesenie zistenia",
"Janko Maly",
"Celkovy pocet zisteni v dni",
10,
],
["Miesto zistenia", discoveryPlace, "Zistenie císlo", 1],
["Popis", problemText],
[
"Navrh na udelenie sankcie",
"50€",
"Pre spolocnost",
adressedFor,
],
],
};
doc.table(table, {
prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8),
prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => {
doc.font("Helvetica").fontSize(8);
indexColumn === 0;
},
});
doc.end();
I am using pdfkit-table package.
Thank you all
By definition simple PDF structure is not tabular there is one cell (the page) and that one column can be subdivide into two or more rows with null spaces between the text sub columns.
That is why tables are difficult to sub[ex]tract
So adding coloured rows in one area is fairly simple to make like a table, thus to make vertical sub dividers is more difficult, However that feature was added in January 2022 https://github.com/natancabral/pdfkit-table/files/7865078/document-5.pdf
For exsample see https://github.com/natancabral/pdfkit-table/issues/16#issuecomment-1012389097
When using tabulator-tables#4.9.3
Created 2 drop down list columns with editor: "select"
Used Code:
{title: "ProductID", field: "productID", sorter: "string", minWidth: 100, width: 150, sorter: "number", editable: Editable, editor: "number", validator: "required", hozAlign: "left", editor: "select", editorParams: { values: ProductIDSelect }, formatter: "lookup" , formatterParams: ProductIDSelect },
For Example: Products and Units. This type of drop down contain Name, ID.
After choose the name and press on save button will send the data from tabulator to C# to check all data type and Inserted to the table in database Image below.
enter image description here
Before sanded data I check data array with press right click on the page choose "Inspect" getting the below image
enter image description here
Shares indicate the number between "4" and "5" string type
When matching data by C# and finds that the Integer field type and string data are incorrect
I would like to color the cell value (Amount) in green only if the value of (KP) is true by maintaining the original money formatting.
This is my actual definition of my 2 relevant columns:
{ title: "Amount", field: "amount", width: 60, sorter: "number", hozAlign: "right", headerSort: false, formatter: "money", formatterParams: {thousand: " ", precision: 0 }, bottomCalc: "sum", bottomCalcFormatter: "money", bottomCalcFormatterParams: {thousand: " ", precision: 0}},
{ title: "KP", field: "cache", width: 25, hozAlign: "center", formatter: "tickCross",
headerSort: false, headerFilter: true, headerFilterParams: { tristate: true } },
The example shown on the webpage obviously does not work for me as I need to refer to another cell and I want to keep the predefined formatter and formatterParams options
You can use a custom function in the formatter, this example from the documentation.
{title:"Name", field:"name", formatter:function(cell, formatterParams, onRendered){
//cell - the cell component
//formatterParams - parameters set for the column
//onRendered - function to call when the formatter has been rendered
return "Mr" + cell.getValue(); //return the contents of the cell
}
It wouldn't be difficult to emulate the money formatter return value, this would be the best approach in my view. Alternatively if you wanted to run a second formatter function following the inbuilt tabulator "money" formatter you could do this by setting the cell element style, something like cell.style.fillColor = rgb etc has worked for me before. I find the first approach far better however.
Refer the documentation here Tabulator Formatters
I am using Tabulator version 4.3 and trying to print a table (which has columnCalcs: both) using print function. I have set printCopyStyle:true, but the output of print does not include footer row (column calculation at the bottom of the table); also alignment of numbers which is set to right does not appear right aligned. The footer and alignment both appear correctly in the Tabulator table, but not in print copy.
Please check jsfiddle here.
Are these features not available or am I missing something?
const tabledata = [{
dep: "A",
name: "Oli Bob",
score: 100
},
{
dep: "A",
name: "Jamie Newhart",
score: 120
},
{
dep: "D",
name: "Gemma Jane",
score: 90
},
{
dep: "D",
name: "James Newman",
score: 100
},
];
const table = new Tabulator("#example-table", {
height: "250px",
data: tabledata,
groupBy: "dep",
columnCalcs: "both",
printAsHtml: true,
printCopyStyle: true,
columns: [{
title: "Name",
field: "name",
width: 200
},
{
title: "Score",
field: "score",
align: "right",
bottomCalc: "sum"
},
],
});
<head>
<link href="https://unpkg.com/tabulator-tables#4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.3.0/dist/js/tabulator.min.js"></script>
</head>
<body>
<button type="button" id="report-print" onclick="table.print();">Print </button>
<div id="example-table"></div>
</body>
I followed this code http://jsfiddle.net/amcharts/w8Bcy/ to create my own column chart. I succed but now i want to improve that charts with other options.
Actual chart def is :
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": chartData,
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0
},
"exportConfig": {
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
I have multiple column with some values, and i want the column to have a color based on their values. How i can change column color with value?
Example: Under x, column will be red .
Above x, column will be green .
I also want to trace a line with the reference value.
Thanks.
graph.colorField = "color"
and in data add field
"color" : "your color hex code "
its done check at http://jsfiddle.net/w8Bcy/68/ i have color all of them red , you can add color of your choice when your generating your data / json