We Keep Coding

React Ant design Table is not visible although data is visible

I am trying to create a table from ant design react I have copied an example but When I am trying to run it the output is not as expected.
Although I am using the same code can someone tell me what is the problem
const columns = [
{
title: 'Name',
dataIndex: 'name',
filters: [
{
text: 'Joe',
value: 'Joe',
},
{
text: 'Category 1',
value: 'Category 1',
children: [
{
text: 'Yellow',
value: 'Yellow',
},
{
text: 'Pink',
value: 'Pink',
},
],
},
{
text: 'Category 2',
value: 'Category 2',
children: [
{
text: 'Green',
value: 'Green',
},
{
text: 'Black',
value: 'Black',
},
],
},
],
filterMode: 'tree',
filterSearch: true,
onFilter: (value, record) => record.name.includes(value),
width: '30%',
},
{
title: 'Age',
dataIndex: 'age',
sorter: (a, b) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
onFilter: (value, record) => record.address.startsWith(value),
filterSearch: true,
width: '40%',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
const onChange = (pagination, filters, sorter, extra) => {
console.log('params', pagination, filters, sorter, extra);
};
const DataTable = () =>{
return(
<div className='data-table'>
<Table columns={columns} dataSource={data} onChange={onChange} bordered/>
</div>
);
};
export default DataTable;
The table was supposed to be:
enter image description here
But the output is:
enter image description here
I was used the same code entered the same components I am unable to understand what the problem is.

It seems that the antd styles were missing. In order to load the styles correctly, add the following line to your index.js file.
import "antd/dist/antd.css";

Clearing a selected item in dropdown after selecting item in other dropdown with vue-treeselect

I'm coding about auto select provinces in Thailand, When I choose province A in province dropdown the district dropdown will change to value in province A, and when I change to province B in province dropdown value in district dropdown has changed to district in province B already but the UI of district dropdown still shows district in province A.
I have researched treeselect docs and tried for several days now, and I really can't find a solution :-(
This is UI rightnow
<treeselect
id="province-selected"
v-model="state.provinceSelected"
:options="provinceArr"
placeholder="กรุณาเลือกจังหวัด"
noResultsText="ไม่พบข้อมูล"
data-test="province-input"
:class="{ errorselect: v$.provinceSelected.$errors.length }"
:normalizer="normalizerProvince"
#select="getDistrict"
zIndex="20000"
:clearable="false"
:allowClearingDisabled="true"
/>

The official documentation of VueTreeselect mentions, the select event is Emitted after selecting an option. It has no dependency with the value update. I prefer you to use input event instead of select. Because the documentation states, the input event will be Emitted after value changes. So inside this method you will get the updated value for the first select.
Working Fiddle
Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
el: '#app',
data: {
provinceArr: [
{ id: 1, label: 'Province 1', districtArr: [
{ id: 10, label: 'District 01' },
{ id: 11, label: 'District 02' },
{ id: 12, label: 'District 03' },
{ id: 13, label: 'District 04' },
]},
{ id: 2, label: 'Province 2', districtArr: [
{ id: 20, label: 'District 21' },
{ id: 21, label: 'District 22' },
{ id: 22, label: 'District 23' },
{ id: 23, label: 'District 24' },
]},
{ id: 3, label: 'Province 3', districtArr: [
{ id: 30, label: 'District 31' },
{ id: 31, label: 'District 32' },
{ id: 32, label: 'District 33' },
{ id: 33, label: 'District 34' },
] },
{ id: 4, label: 'Province 4', districtArr: [
{ id: 40, label: 'District 41' },
{ id: 41, label: 'District 42' },
{ id: 42, label: 'District 43' },
{ id: 43, label: 'District 44' },
] },
{ id: 5, label: 'Province 5', districtArr: [
{ id: 50, label: 'District 51' },
{ id: 51, label: 'District 52' },
{ id: 52, label: 'District 53' },
{ id: 53, label: 'District 54' },
] },
{ id: 6, label: 'Province 6', districtArr: [
{ id: 60, label: 'District 61' },
{ id: 61, label: 'District 62' },
{ id: 72, label: 'District 73' },
{ id: 73, label: 'District 74' },
] },
],
districtArr: [],
state: {
provinceSelected: null,
districtSelected: null,
},
},
methods: {
getDistrict: function(node, instanceId) {
console.log(this.state.provinceSelected, node, instanceId);
// Some logic to populate districts
this.districtArr = this.provinceArr.find(item => item.id === this.state.provinceSelected).districtArr;
},
onDistrictSelected: function(node, instanceId) {
console.log(this.state.districtSelected)
}
}
})
<!-- include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/vue#^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.min.css">
<div id="app">
<div>
<p>Province</p>
<treeselect
id="province-selected"
v-model="state.provinceSelected"
:options="provinceArr"
placeholder="กรุณาเลือกจังหวัด"
noResultsText="ไม่พบข้อมูล"
data-test="province-input"
#input="getDistrict"
zIndex="20000"
:clearable="false"
:allowClearingDisabled="true"
/>
</div>
<div>
<p>District</p>
<treeselect
id="district-selected"
v-model="state.districtSelected"
:options="districtArr"
placeholder="กรุณาเลือกจังหวัด"
noResultsText="ไม่พบข้อมูล"
data-test="district-input"
#input="onDistrictSelected"
zIndex="20000"
:clearable="false"
:allowClearingDisabled="true"
/>
</div>
</div>

Can hidden values be passed between a highcharts drilldown?

I want to pass a hidden value between a HighCharts drill down. When a user clicks on an item (Item 1), they them have 3 selections. On clicking any of these selections, I would like to have a hidden id passed from Item 1 in order to use this ID to perform an action using another PHP script. Is this possible?
$(function() {
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Overall Status'
},
xAxis: {
type: 'category',
labels: {
style: {
fontSize: '15px'
}
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
style: {
fontSize: '20px'
}
},
cursor: 'pointer',
point: {
events: {
click: function() {
if (this.options && this.options.url) {
location.href = this.options.url;
}
}
}
}
}
},
series: [{
name: 'Status',
colorByPoint: true,
data: [{
name: 'Item 1',
y: 80,
drilldown: 'item1'
}, {
name: 'Item 2',
y: 33,
drilldown: 'item2'
}]
}],
drilldown: {
series: [{
id: 'item1',
data: [{
name: 'Condition 1',
url: 'http://myurl?id=item 1',
y: 7
}, {
name: 'Condition 2',
url: 'http://myurl?id=item 1',
y: 2,
}, {
name: 'Condition 3',
url: 'http://myurl?id=item 1',
y: 1,
}]
}, {
id: 'item2',
data: [{
name: 'Condition 1',
url: 'http://myurl?id=item 2',
y: 3
}, {
name: 'Condition 2',
url: 'http://myurl?id=item 2',
y: 2,
}, {
name: 'Condition 3',
url: 'http://myurl?id=item 2',
y: 9,
}]
}]
}
});
});
Have a jsfiddle here https://jsfiddle.net/mark2017/bd1v6tew/2/

You can do it dynamically on a drilldown event.
Define a hidden property for a point.
series: [{
name: 'Status',
colorByPoint: true,
data: [{
name: 'Item 1',
y: 80,
drilldown: 'item1',
hiddenValue: 'hidden 1',
}, {
name: 'Item 2',
y: 33,
drilldown: 'item2',
hiddenValue: 'hidden 2'
}]
}],
Save a parent hiddent property to the new series on the drilldown event:
chart: {
type: 'bar',
events: {
drilldown: function (e) {
e.seriesOptions.hiddenValue = e.point.options.hiddenValue;
}
}
},
Read it on the point click event:
click: function() {
var seriesOptions = this.series && this.series.options;
var hiddenValue = seriesOptions && seriesOptions.hiddenValue;
console.log(hiddenValue);
example: https://jsfiddle.net/enjk7w1r/

Heat Map With Red Color Range For Negative Values And Green Color Range For Positive Values

I am using heat map of highchart. Its working fine.
Now i want to set color ranges for values. Like green color range for positive values and red color range for negative values.
Is there any option i can use to achieve it ?
Heat Map Sample

U need to Change the min color and max Color
$(function () {
$('#container').highcharts({
colorAxis: {
minColor: '#00FF00',
maxColor: '#FF0000'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'Positive A',
value: 6,
colorValue: 1
}, {
name: 'Positive B',
value: 6,
colorValue: 2
}, {
name: 'Positive C',
value: 4,
colorValue: 3
}, {
name: 'Neutral',
value: 3,
colorValue: 4
}, {
name: 'Negative E',
value: 2,
colorValue: 5
}, {
name: 'Negative F',
value: 2,
colorValue: 6
}, {
name: 'Negative G',
value: 1,
colorValue: 7
}]
}],
title: {
text: 'Highcharts Treemap'
}
});
});
Here is the JS Fiddle for it

You can mention color to be used while preparing the data to be loaded to chart, you can add your checks and choose at data preparing part.
Example:
data: [{
name: 'A',
value: 6,
color: "red"
}, {
name: 'B',
value: 6,
color: "red"
}, {
name: 'C',
value: 4,
color:"green"
}, {
name: 'D',
value: 3,
color: "red"
}, {
name: 'E',
value: 2,
color:"green"
}, {
name: 'F',
value: 2,
color:"green"
}, {
name: 'G',
value: 1,
color:"yellow"
}]
Sample fiddle

ExtJS 4.2.3 Grouping Bug

I am using the store.group() to provide option to the user to group the grid by various fields.
Using extjs4.2.3 now after having faced many bugs in 4.2.1, store.group() does not seem to be working at all.
How to replicate:
Press the "Group" button, which should group the grid. Only sorts the data.
Choose "Group by this field" from the column menu and the grouping starts to work fine.
Similarly store.clearGrouping() behaves the same way.
Here is sample code:
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'
}]
});
Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
itemId: 'gridtest',
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
store: {
model: 'TestResult',
itemId: 'testStore',
//groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
}, {
student: 'Student 1',
subject: 'Science',
mark: 72
}, {
student: 'Student 2',
subject: 'Math',
mark: 96
}, {
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value) {
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}],
tbar: [{
xtype: 'button',
text: 'Group',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.group('subject');
}
}, {
xtype: 'button',
text: 'clear',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.clearGrouping();
}
}]
});
Running the code in ExtJS 4.2.1 works fine on the sencha fiddle, but not on 4.2.3
I tested using the code preview option on http://docs.sencha.com/extjs/4.2.3/.

Above code is working fine in extjs-4.2.3.
Open http://docs.sencha.com/extjs/4.2.3/ and in Developer tools Console tab execute following code:-
Group on 'Group' button is working fine.
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'
}]
});
var grpGrid = Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
itemId: 'gridtest',
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
store: {
model: 'TestResult',
itemId: 'testStore',
//groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
}, {
student: 'Student 1',
subject: 'Science',
mark: 72
}, {
student: 'Student 2',
subject: 'Math',
mark: 96
}, {
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value) {
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}],
tbar: [{
xtype: 'button',
text: 'Group',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.group('subject');
}
}, {
xtype: 'button',
text: 'clear',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.clearGrouping();
}
}]
});
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: [grpGrid]
}).show();

Issue is resolved in nightly build for ExtJS 4.2.4
Defect Id: EXTJS-15190 link