React Ant design Table is not visible although data is visible - javascript

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";

Related

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>

How can I make texts highlightable in ExtJs?

I'm still finding my way around Extjs, I'm currently displaying text data to a UI like so:
reference: 'agentLogGrid',
store: {
xclass: 'Ext.data.ChainedStore',
source: 'LogViewSource',
},
itemConfig: {
viewModel: true,
},
columns: [{
text: 'Timestamp',
xtype: 'templatecolumn',
tpl: '{timestamp}',
flex: 1,
}, {
text: 'Data',
xtype: 'templatecolumn',
tpl: '{data}',
flex: 1,
}],...
But the texts are not highlightable, that means I can't highlight them and copy, or select and copy. When I mouse over, the pointer sees it as a link, but I can't highlight or select. How do I make just the {data} highlightable?
In classic toolkit you can use enableTextSelection property. Something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'department'],
groupField: 'department',
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
department: "Management"
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
department: "Sales"
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
department: "Sales"
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
department: "Accounting"
}, {
firstname: "Angela",
lastname: "Martin",
seniority: 5,
department: "Accounting"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Template Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'Full Name',
xtype: 'templatecolumn',
tpl: '{firstname} {lastname}',
flex: 1
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{department} ({seniority})'
}],
// USE viewConfig enableTextSelection property
viewConfig: {
enableTextSelection: true
},
height: 200,
width: 300,
renderTo: Ext.getBody()
});
}
});

Cannot Offline-Exporting highchart Treemap to PDF

I can't Offline-Exporting highchart Treemap to PDF, but PNG, JPEG, SVG can work well. (version 9.3.0)
Use Online-Exporting can works well too.
There has an error in Console:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. offline-exporting.js:23
Here's my code:
Highcharts.chart('container', {
series: [
{
type: 'treemap',
layoutAlgorithm: 'squarified',
colorByPoint: true,
data: [
{
name: 'Apple',
id: 'Apple',
value: 75.09627342252769,
},
{
name: 'Banana',
id: 'Banana',
value: 9.52872657747232,
},
{
name: 'Watermelon and Grape',
id: 'Watermelon and Grape',
value: 4.157502418100004,
},
{
name: 'Pomegranate/Cherry',
id: 'Pomegranate/Cherry',
value: 3.5141563985028808,
},
{
name: 'Strawberry',
id: 'Strawberry',
value: 2.1298309432692712,
},
{
name: 'Peach/pear',
id: 'Peach/pear',
value: 2.078751209050002,
},
{
name: 'Mulberry',
id: 'Mulberry',
value: 2.0722854199083227,
},
{
name: 'Sponge Cream and Fruit',
id: 'Sponge Cream and Fruit',
value: 1.4224736111695193,
},
],
},
],
title: {
text: 'Highcharts Treemap',
},
subtitle: {
text: 'Test Export',
},
});
Here's the demo online: https://jsfiddle.net/whpLg92u/1/

Adding new property to Ext JS Grid column

Can I add a new unique property to gridcolumn in Ext JS? I want to use that property in some other place
{
xtype: 'gridcolumn',
dataIndex: 'startupPercent',
sortable: true,
'property': 'value', // so that i can access it later
text: 'StartUp%'
}
Can I add a new unique property to gridcolumn
Yes you can and you use that property other place.
In this FIDDLE, I have created a demo provide a custom config and get on header click. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.grid.Panel', {
title: 'Demo',
store: {
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name',
isName: true
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
renderTo: Ext.getBody(),
listeners: {
headerclick: function (ct, column, e, t, eOpts) {
if (column.isName) {
console.log(column.isName);
}
}
}
});
}
});

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

Categories