I need the below table structure in the pdf:
I am using pdfmake and tried but unable to achieve the exact structure.
Need some valuable help
I hope this will help you
var dd = {
content: [
{
alignment:'center',
table: {
widths: ['*','*','*','*','*','*','*',],
body: [
[
{
text: "",
border: [true, true, true, true],
},
{
colSpan:3,
text:'header 1',
border: [true, true, true, true],
},
{
text:'',
border: [true, true, true, true],
},
{
text: "",
border: [true, true, true, true],
},
{
colSpan:3,
text:'header 2',
border: [true, true, true, true],
},
{
text:'',
border: [true, true, true, true],
},
{
text:'',
border: [true, true, true, true],
},
],
[
{
text: "S.No.",
border: [true, true, true, true],
},
{
colSpan:3,
text:'item',
border: [true, true, true, true],
},
{
text:'',
border: [true, true, true, true],
},
{
text: "",
border: [true, true, true, true],
},
{
colSpan:3,
text:'data',
border: [true, true, true, true],
},
{
text:'',
border: [true, true, true, true],
},
{
text:'',
border: [true, true, true, true],
},
],
[
{
text: "1",
border: [true, true, true, true],
},
{
text:'item1',
border: [true, true, true, true],
},
{
text:'item2',
border: [true, true, true, true],
},
{
text: "item3",
border: [true, true, true, true],
},
{
text:'data1',
border: [true, true, true, true],
},
{
text:'data2',
border: [true, true, true, true],
},
{
text:'data3',
border: [true, true, true, true],
},
],
],
},
},
],
}
Related
I had
these settings for my VSCode
settings.json
{
"workbench.sideBar.location": "left",
"window.zoomLevel": 1,
"workbench.colorTheme": "Monokai Pro",
"workbench.iconTheme": "Monokai Pro Icons",
"editor.formatOnSave": true,
"editor.renderWhitespace": "none",
"breadcrumbs.enabled": true,
"editor.minimap.enabled": false,
"prettier.tabWidth": 4,
"prettier.vueIndentScriptAndStyle": true,
"prettier.useTabs": true,
"prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
"[javascript, vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"redhat.telemetry.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"explorer.confirmDelete": false,
"editor.tabSize": 4,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html"
}
}
.prettierrc
{
"semi": false,
"singleQuote": false,
"useTabs": true,
"trailingComma": "none",
"printWidth": 80,
"tabWidth": 4
}
Right now, it prettifies on save for JS & HTML, perfectly. ✨
I want
to make it works with Vue.js.
I tried
add vue --> "[javascript, vue]":
It is not working.
How would one do that do Vue.js ?
Adding this block of codes to my main settings seems to work.
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
Final settings
{
"workbench.sideBar.location": "left",
"window.zoomLevel": 1,
"workbench.colorTheme": "Monokai Pro",
"workbench.iconTheme": "Monokai Pro Icons",
"editor.formatOnSave": true,
"editor.renderWhitespace": "none",
"breadcrumbs.enabled": true,
"editor.minimap.enabled": false,
"prettier.tabWidth": 4,
"prettier.vueIndentScriptAndStyle": true,
"prettier.useTabs": true,
"prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"redhat.telemetry.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"explorer.confirmDelete": false,
"editor.tabSize": 4,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html"
}
}
Note: I am not sure if what I did is the right way to do it, but it is working for now.
I'm having a hard time figuring out how to access item properties from within a v-data-table slot with a specific JSON format.
The items bound to the v-data-table have a nested property called "technicals" which also contains several nested properties for each interval like "5m", "15m" etc...
I generated the v-data-table headers with a computed property and everything is displaying fine but now I want to access the data with a slot inside the table to manipulate the boolean values of true/false with some additional styling etc. I just can't find out how to access the properties in the slot tag.
The values assigned to the headers are of this structure
Object.technicals.side.interval.value
Where "side" and "interval" are component props stored in the data object.
{
"market": {
"id": "xyx"
},
"technicals": {
"buy": {
"1m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
}
}
}
<v-data-table
:headers="headers"
:items="tickerStats"
:sort-by.sync="sortBy"
:sort-desc.sync="isDescending"
>
<template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
<v-chip>doSomething</v-chip>
</template>
</v-data-table>
I need to get access from this line but I can't access the props from the component (side and interval) and can't access the other things either by trying.
<template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
It only works accessing the market ID like so, but I don't need to modify the ID column.
<template v-slot:item.market.id="{ item }">
UPDATE
Here is how I generate the headers
headers() {
let fnc = this.functions.filter(f => {
return f.type == this.side;
});
let headers = [
{
text: "MARKET",
align: "start",
sortable: true,
value: "market.id",
type: String
}
];
let side = this.side;
for (let i = 0; i < fnc.length; i++) {
headers.push({
text: fnc[i].name,
align: "start",
sortable: true,
type: Boolean,
value:
"technicals[" +
this.side +
"]." +
this.interval +
"[" +
fnc[i].name +
"]"
});
}
return headers;
}
Function is an array of objects of this format
{
name: "RSI_OVERSOLD",
formatted_name: "RSI OVERSOD"
}
This is the structure of one item inside the items array used for: items from which I only want to display the market.id and the technicals for the given side and interval passed as a prop to the component.
{
"id": "ETHUSDT",
"ticker": {
"exchange": "Binance",
"base": "ETH",
"quote": "USDT",
"timestamp": 1613375545712,
"last": "1753.52000000",
"open": "1671.49000000",
"high": "1847.54000000",
"low": "1655.67000000",
"volume": "935312.43155000",
"quoteVolume": "1656379605.10542940",
"change": "-82.03000000",
"changePercent": "-4.469",
"bid": "1753.37000000",
"bidVolume": "5.70749000",
"ask": "1753.52000000",
"askVolume": "0.21402000"
},
"market": {
"limits": {
"amount": {
"min": 0.001,
"max": 10000
},
"price": {
"min": 0.01,
"max": 100000
},
"cost": {
"min": 1
},
"market": {
"min": 0.001,
"max": 10000
}
},
"precision": {
"base": 8,
"quote": 8,
"amount": 3,
"price": 2
},
"tierBased": false,
"percentage": true,
"taker": 0.001,
"maker": 0.001,
"id": "ETHUSDT",
"lowercaseId": "ethusdt",
"symbol": "ETH/USDT",
"base": "ETH",
"quote": "USDT",
"baseId": "ETH",
"quoteId": "USDT",
"info": {
"symbol": "ETHUSDT",
"pair": "ETHUSDT",
"contractType": "PERPETUAL",
"deliveryDate": 4133404800000,
"onboardDate": 1569398400000,
"status": "TRADING",
"maintMarginPercent": "2.5000",
"requiredMarginPercent": "5.0000",
"baseAsset": "ETH",
"quoteAsset": "USDT",
"marginAsset": "USDT",
"pricePrecision": 2,
"quantityPrecision": 3,
"baseAssetPrecision": 8,
"quotePrecision": 8,
"underlyingType": "COIN",
"underlyingSubType": [],
"settlePlan": 0,
"triggerProtect": "0.0500",
"filters": [
{
"minPrice": "0.01",
"maxPrice": "100000",
"filterType": "PRICE_FILTER",
"tickSize": "0.01"
},
{
"stepSize": "0.001",
"filterType": "LOT_SIZE",
"maxQty": "10000",
"minQty": "0.001"
},
{
"stepSize": "0.001",
"filterType": "MARKET_LOT_SIZE",
"maxQty": "10000",
"minQty": "0.001"
},
{
"limit": 200,
"filterType": "MAX_NUM_ORDERS"
},
{
"limit": 100,
"filterType": "MAX_NUM_ALGO_ORDERS"
},
{
"notional": "1",
"filterType": "MIN_NOTIONAL"
},
{
"multiplierDown": "0.8500",
"multiplierUp": "1.1500",
"multiplierDecimal": "4",
"filterType": "PERCENT_PRICE"
}
],
"orderTypes": [
"LIMIT",
"MARKET",
"STOP",
"STOP_MARKET",
"TAKE_PROFIT",
"TAKE_PROFIT_MARKET",
"TRAILING_STOP_MARKET"
],
"timeInForce": [
"GTC",
"IOC",
"FOK",
"GTX"
]
},
"type": "future",
"spot": false,
"margin": true,
"future": true,
"delivery": false,
"active": true
},
"technicals": {
"buy": {
"1m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
}
},
"sell": {
"1m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
}
}
}
},
I am trying to use "Fixed columns" feature in datatables with remote data pulled using ajax. Everything works perfectly without any errors. However, the "Fixed columns" feature doesn't work. Below is my code
$('#dataTable').DataTable({
"order": [[ groupColumn, "asc" ]],
"rowReorder": true,
"dom": 'l<"toolbar">frtip',
"scrollX": true,
"bscrollCollapse": true,
"displayLength": 25,
"fixedColumns": true,
"columnDefs": [
{ "visible": false, "targets": groupColumn },
{ "orderable": true, "targets": groupColumn },
{ "orderable": false, "targets": "_all" }
],
"processing": false,
"pageLength": 60,
"ajax": {
url: "http://example.com/output",
type: 'post',
data: {id:id}
},
"columns": {
//column definitions provided here
}
});
In a jqgrid we will have the index values(sl numbers) on the very first row these values are assigned internally by jqgrid. How to print in reverse order?
$("#predefinedProcessGrid").jqGrid({
data: processTasks,
datatype: "local",
colNames: ["Assigned By", "Assigned To","Step Name","Created On","Expected Start Date", "Actual Start Date", "Actual End Date","Status","Priority"," IP Address","Past Due (ms)"],
colModel: [{
name: "assignedByUserName",
index: "assignedByUserName",
editable: false,
align: "left",
width: 130,
sorttype:'int',
}, {
name: "assignedToUserOrOrgText",
index: "assignedToUserOrOrgText",
editable: false,
align: "left",
width: 130,
},{
name: "processStepName",
index: "processStepName",
editable: false,
align: "left",
width: 220,
},{
name: "formattedCreatedDateTime",
index: "formattedCreatedDateTime",
editable: false,
align: "left",
width: 150,
} ,{
name: "formattedExpectedStartDate",
index: "formattedExpectedStartDate",
editable: false,
align: "left",
width: 150,
}, {
name: "formattedActualStartDate",
index: "formattedActualStartDate",
editable: false,
align: "left",
width: 150,
sorttype:'int',
}, {
name: "formattedActualEndDate",
index: "formattedActualEndDate",
editable: false,
align: "left",
width: 150,
},
{
name: "formattedUserTaskStatus",
index: "formattedUserTaskStatus",
editable: false,
align: "left",
width: 130,
sorttype:'int',
}, {
name: "formattedTaskPriority",
index: "formattedTaskPriority",
editable: false,
align: "left",
width: 100,
sorttype:'int',
}, {
name: "userTaskFromIPAddress",
index: "userTaskFromIPAddress",
editable: false,
align: "center",
width: 120,
sorttype:'int'
}, {
name: "millisPastDue",
index: "millisPastDue",
editable: false,
align: "center",
width: 100,
sorttype:'int',
}
],
// cmTemplate:{resizable:true},
rowNum: 1e5,
pager: "#predefinedProcessPager",
ignoreCase:true,
gridview: true,
rownumbers: true,
sortable:true,
"resizable": true,
viewrecords: true,
reverse:true,
// sortname: 'Expected Start Date',
// sortorder: "desc",
editurl: "clientArray",
sortorder: "desc",
autowidth: true,
shrinkToFit: false,
height: 470,
keys: true,
hidegrid: false,
loadComplete: function () {
var e = this;
setTimeout(function () {
updatePagerIcons(e);
enableTooltips(e)
}, 0)
},
}
horizontal scroll in datatable.net not aligning headers with actual column data on scrolling.
On scrolling table body gets moved but headers doesn't. I want to set headers scrollable.
My Code sample ::--------
$('#abc').dataTable({
"aaData": userContactGridData,
"bAutoWidth":false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["icon", "adminRoleIcon", "gearIcon"] },// disable sorting on first and last column
{ "sWidth": "20px", "aTargets": ["icon", "gearIcon"] },
{ "sWidth": "200px", "aTargets": ["userName"] },
{ "sClass": "icon", "aTargets": ["icon"] },
{ "sClass": "gearIcon", "aTargets": ["gearIcon"] },
{ "sClass": "userName", "aTargets": ["userName"] },
{ "sClass": "adminRoleIcon", "aTargets": ["adminRoleIcon"] },
{ "bVisible": false, "aTargets": ["adminRoleIcon"] },
],
"sDom": 'C<"H"Tfr>t<"F"ip>',
"iDisplayLength": 6,
"bProcessing": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[2, "asc"]], // sort by name by default
"sScrollX": "100%",
"bScrollCollapse": true
});
Try adding sScrollX: 100% and bScrollCollapse: true
Then your code look like as below
var oTable;
$(document).ready(function () {
oTable = $("#yourElementName").dataTable({
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "aTargets": [0], "bSortable": true },
{ "aTargets": ['_all'], "bSortable": false}],
"aaSorting": [[0, 'asc']]
});
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 10);
});