I have an array of object and i need to convert that into antd table columns format. Here is the online editor link.
const a = [
{
id: 1,
startValue: 1,
endValue: 3,
box: "ele",
},
{
id: 2,
startValue: 3,
endValue: 5,
box: "vcu",
},
{
id: 3,
startValue: 2,
endValue: 6,
box: "mcu",
},
]
// output
// [
// {
// dataindex: id,
// key: id,
// title: id,
// },
// {
// dataindex: startValue,
// key: startValue,
// title: startValue,
// },
// {
// dataindex: endValue,
// key: endValue,
// title: endValue,
// },
// {
// dataindex: box,
// key: box,
// title: box,
// },
// ]
Based on what you provided, I guess you are trying to automatically extract the column names from the given dataSource. Here is what you are looking for (I reused the variable named a :
const columns = Object.keys(a[0]||{})
.map(key => ({dataIndex: key, key, title: key}));
<Table dataSource={a} columns={columns} />
There is little to do to achieve what you want. According to Ant Design documentation your data does not need to be converted into output. It can directly be used as the dataSource array. And you will need to supply the columns array as shown below:
const dataSource = [
{
id: 1,
startValue: 1,
endValue: 3,
box: "ele",
},
{
id: 2,
startValue: 3,
endValue: 5,
box: "vcu",
},
{
id: 3,
startValue: 2,
endValue: 6,
box: "mcu",
}
];
const columns=
[
{
dataindex: "id",
key: "id",
title: "Id"
},
{
dataindex: "startValue",
key: "startValue",
title: "Start value"
},
{
dataindex: "endValue",
key: "endValue",
title: "End value"
},
{
dataindex: "box",
key: "box",
title: "Box"
}
];
// the following JSX expression will create the ant table in a React environment:
<Table dataSource={dataSource} columns={columns} />;
With the columns array you define which property of the dataSource elements you want to display in the table. The title property defines the title to be shown in each column header.
Related
I would like to find a solution to cascade lookups on a popup form, given that the second lookup needs to set its dataSource at runtime (or calling an API), since the lookup source could be coming from different sources. For example, say that if I selected Arkansas, then it would set a different lookup from a web service call, and if California is selected it would use a call from a database to populate the lookup values.
I have taken the DevExtreme sample below as an example, what events or methods would I need to achieve this?
Code Example:
$(() => {
$('#gridContainer').dxDataGrid({
keyExpr: 'ID',
dataSource: employees,
showBorders: true,
editing: {
allowUpdating: true,
allowAdding: true,
mode: 'popup',
},
onEditorPreparing(e) {
if (e.parentType === 'dataRow' && e.dataField === 'CityID') {
e.editorOptions.disabled = (typeof e.row.data.StateID !== 'number');
}
},
columns: ['FirstName', 'LastName', 'Position',
{
dataField: 'StateID',
caption: 'State',
setCellValue(rowData, value) {
rowData.StateID = value;
rowData.CityID = null;
},
lookup: {
dataSource: states,
valueExpr: 'ID',
displayExpr: 'Name',
},
},
{
dataField: 'CityID',
caption: 'City',
lookup: {
//this is not a static list and will need to be populated when the State changes from various sources...
dataSource(options) {
return {
store: cities,
filter: options.data ? ['StateID', '=', options.data.StateID] : null,
};
},
valueExpr: 'ID',
displayExpr: 'Name',
},
},
],
});
});
Data:
const states = [{
ID: 1,
Name: 'Alabama',
}, {
ID: 2,
Name: 'Alaska',
}, {
ID: 3,
Name: 'Arizona',
}, {
ID: 4,
Name: 'Arkansas',
}, {
ID: 5,
Name: 'California',
}];
const cities = [{
ID: 1,
Name: 'Tuscaloosa',
StateID: 1,
}, {
ID: 2,
Name: 'Hoover',
StateID: 1,
}, {
ID: 3,
Name: 'Dothan',
StateID: 1,
}, {
ID: 4,
Name: 'Decatur',
StateID: 1,
}, {
ID: 5,
Name: 'Anchorage',
StateID: 2,
}, {
ID: 6,
Name: 'Fairbanks',
StateID: 2,
}, {
ID: 7,
Name: 'Juneau',
StateID: 2,
}, {
ID: 8,
Name: 'Avondale',
StateID: 3,
}, {
ID: 9,
Name: 'Buckeye',
StateID: 3,
}];
I managed to resolve the issue using the onEditorPreparing method, basically you have to register the onValueChanged event to manipulate the column cell you need to:
onEditorPreparing: (e): any => {
if (e.parentType === 'dataRow') {
if (e.dataField === 'FieldType') {
e.editorName = 'dxLookup';
$.extend(e.editorOptions, {
showClearButton: true,
dataSource: this.SetDatasource(this.GetArrayDataStore(AdvancedSettingsBuilder.GetFieldTypes)),
valueExpr: 'value',
displayExpr: 'text',
value: e.value || [],
onValueChanged: async (args): Promise<void> => {
e.setValue(args.value);
.........
I am using Tabulator to create the table and adding a button to print out the table, however, when i click the button it shows the progress bar in my table doesn't show on the print out results. Does anyone know why i can not print out the progress bar? Thank you.
var tabledata = [{
id: 1,
name: "postp_ckmb_ngml_group_>=5.6",
confidence: "1.08",
acceptable: "true"
},
{
id: 2,
name: "pci_status_cd_急诊",
confidence: "1.05",
acceptable: "true"
},
{
id: 3,
name: "conclision_angiography_type_冠脉三支病变",
confidence: "1.01",
acceptable: "true"
},
{
id: 4,
name: "pci_indication_cd_STEMI的紧急PCI治疗",
confidence: "0.89",
acceptable: "true"
},
{
id: 5,
name: "postp_bnp_pnml_group_>500",
confidence: "0.82",
acceptable: "true"
},
{
id: 6,
name: "postp_bnp_pnml_group_100-500",
confidence: "0.82",
acceptable: "true"
},
{
id: 7,
name: "cad_presentation_cd_STEMI(7天)",
confidence: "0.79",
acceptable: "true"
},
{
id: 8,
name: "pci_status_cd_早期",
confidence: "0.64",
acceptable: "true"
},
{
id: 9,
name: "cad_presentation_cd_Non-STEMI(7天)",
confidence: "0.61",
acceptable: "true"
},
{
id: 10,
name: "if_pior_cvd_1.0",
confidence: "0.37",
acceptable: "true"
}
];
const table = new Tabulator("#tableContainer", {
data: tabledata,
height: "292px",
layout: "fitColumns",
printAsHtml: true,
printCopyStyle: true,
printHeader: "<h3>Feature Selection Results<h3>",
columns: [{
title: "",
field: "id",
width: 50
},
{
title: "Feature",
field: "name"
},
{
title: "Confidence",
field: "confidence",
sorter: "number",
align: "left",
formatter: "progress",
width: 400,
formatterParams: {
mix: 0,
max: 1.1,
color: ["#296FAB"],
legend: true,
legendColor: "#333333",
legendAlign: "right"
}
},
{
title: "Acceptability",
field: "acceptable",
align: "center",
editor: true,
sorter: "boolean",
formatter: "tickCross",
width: 150
},
],
});
const printTable = () => {
table.print(false, true);
}
<script src="https://unpkg.com/tabulator-tables#4.3.0/dist/js/tabulator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.3.0/css/tabulator.min.css" rel="stylesheet" />
<button onclick="printTable()">Print
</button>
<div id="tableContainer"></div>
I want to use the print out button to print out the entire table include the progress bar.
This was a limitation of the original Tabulator print system only being able to handle text based formatters
As of version 4.6, released mid 2020, you should have no problem printing graphical formatters
I am working on a bar chart, and for some rows I have a particular column which contains link, now on ready event I want to iterate over all the rows to find out what is the link, if link is type a I want to set element color red, otherwise not.
cols: [
{
id: 'first value',
label: 'name',
type: 'string'
},
{
id: 'second value',
label: 'type',
type: 'number'
},
],
rows: [
{
c: [
{
v: 'apple'
},
{
v: 24,
link : 'type A or type B '
},
]
},
]
Any help about this ?
I have an object which has two members:
num which is just an integer and article which is an object that I get through JSON and has a number of members itself. Now I want to use members from article for the name and pris fields in a SlickGrid. The example beneath does not seem to work however:
var columns = [
{ id: "antal", name: "Antal", field: "num", width: 10},
{ id: "namn", name: "Artikelnamn", field: "article.name", width: 50},
{ id: "pris", name: "Totalpris", field: "article.price", width: 50}
];
Can anyone assist me in implementing this correctly based on the code provided?
Use article as the field, and employ a column formatter. So:
var columns = [
{
id: "antal", name: "Antal", field: "num", width: 10
},
{
id: "namn", name: "Artikelnamn", field: "article", width: 50,
formatter : function(row, cell, value, columnDef, dataContext){
return value.name;
}
},
{
id: "pris", name: "Totalpris", field: "article", width: 50,
formatter : function(row, cell, value, columnDef, dataContext){
return value.price;
}
}
];
I am doing a project using Kendo UI controls. In project left side "treeview" and right side "kendogrid" are placed.
Here my requirement is to filter the grid based on treeview nodes, and need to do multi-selection.
For example:eg:10249,10248 Based on this nodes filter the grid.
Here is my fiddle: http://jsfiddle.net/RHh67/7/
Here is tried code:
var tree= $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "10248" },
{ id: 4, text: "10249" },
{ id: 5, text: "10250" },
{ id: 6, text: "10251" },
{ id: 7, text: "10252" }
]
}]
}]
}).data("kendoTreeView");
tree.dataSource.bind("change", function (e) {
var ds = $("#grid").data("kendoGrid").dataSource;
ds.filter([
{"logic":"or",
"filters":[
{
"field":"OrderId",
"operator":"eq",
}
]}
]);
});
Can any one help me find where exactly I am wrong?
The handler for change on the tree should do:
Get selected checkboxes.
Build a filter condition for ticked checkboxes.
Apply filter to the DataSource.
Something like:
$("#treeview").on("change", function (e) {
var selected = $('#treeview :checked').closest('li');
var ds = grid.dataSource;
var filter = {
logic : "or",
filters: []
};
$.each(selected, function (idx, elem) {
var item = tree.dataItem(elem);
if (parseInt(item.text)) {
console.log("item.text", item.text);
filter.filters.push({
field : "OrderID",
operator: "eq",
value : parseInt(item.text)
});
}
});
console.log("filter", filter);
ds.filter(filter);
});
Running here