How can I do in REACT if I want to connect Google Sheets as a remote source into React Grid (from DevEstreme)?
Well, DevExtream Reactive Grid can work with data only in the following format:
<Grid
rows={[
{ id: 0, product: 'DevExtreme', owner: 'DevExpress' },
{ id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
]}
columns={[
{ name: 'id', title: 'ID' },
{ name: 'product', title: 'Product' },
{ name: 'owner', title: 'Owner' },
]}>
<Table />
</Grid>
You need to associate a column with a row field using the column’s name field. It means that if you could get data from your Google Sheet (e.g. as in Google Sheets API - Reading and Writing Values) and modify them according to this, you will be able to display them.
If you need an automatical connection, the answer is no. Reactive Grid accepts only this data format. Otherwise, you need to process data manually.
Related
I have an array that I want to get inside a material ui table. This is the structure of my array, which is taken from a file that I import (using react papa parse 3):
https://react-papaparse.js.org/
This is a link to the code I am trying to get the data into:
https://codesandbox.io/s/htvjz?file=/demo.js
I am a bit confused on the structure of the array, being relatively new at this. Does my row data go one extra level deep with the "data" level in there?
How can I get this into the material ui array table linked to above?
Spent all day on this and going round and round in circles.
the link you show uses table. That closely resembles an HTML table.
I can recommend using a instead. It's easier to read, faster to write, it's more powerful.
import * as React from 'react';
import { DataGrid } from '#material-ui/data-grid';
// define which columns you have in your data
const columns = [
{ field: 'id', headerName: 'ID' },
{ field: 'firstName', headerName: 'First name' },
{ field: 'lastName', headerName: 'Last name' },
];
// your rows.. you probably won't hard code them but get them from elsewhere
// but they should look like this:
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon'},
{ id: 2, lastName: 'Lannister', firstName: 'Cersei'},
{ id: 3, lastName: 'Lannister', firstName: 'Jaime' },
{ id: 4, lastName: 'Stark', firstName: 'Arya' }
];
...
// Then, wherever you want to have your grid, do this:
<DataGrid rows={rows} columns={columns} />
I am generating dataTable using material-table plugin in ReactJS. I couldn't find any direct way or option to generate rowspan or column span at dataTable using the plugin. Is there any way to do it ?
Here is a sample screenshot of what table might look like but will be shown via dataTable
The explanation of what you are trying to do is a little bit unclear.
If you want to add something like a button on each row in a col span you can define it in the "columns" prop of your Table like so:
columns={[
{ title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
{ title: 'Name', field: 'name' },
....
]}
This will add an update button which will call on the doSomethingWithId() function passing the id of the line as a parameter.
Is it what you are looking for? Else would you mind explaining a little bit more what you want?
EDIT
Here is what i obtain
with the following code
<MaterialTable
data={[
{ name: '', nationality: 'British', address: '', country: 'England' },
{ name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
{ name: '', nationality: 'Chinese', address: '', country: 'China' },
{ name: '', nationality: '', address: '', country: '' },
]}
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Nationality', field: 'nationality' },
{ title: 'Address', field: 'address' },
{ title: 'Country', field: 'country' },
]}
options={{
rowStyle: {
height: '25px',
},
}}
title="Display Data"
/>
You don't need to add rows or colspan to achieve this render, just giving the good dataSet and the Columns definition will do.
In your data props you need to give a list of objects with all the datas you need.
You then define which datas are displayed where with the columns props. if you want a more personalize render in one column (ex: you want to display the country in bold) you can define it by giving a render in the columns object like so:
{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>
for the empty row to have the same size as others, use props options on your table.
Does this help you?
After an initial load of a chart I want to append Annotations on the go by updating the chart.
Currently I have an update function which append data to the chart:
const chart = this.chart.getChart();
const serie = this.getSerie();
chart.series[0].setData(serie.list);
Is there a way where I can append Annotations in a similar way?
At the moment I insert annotations into the initial chart config:
annotations: [{
xAxis: 0,
yAxis: 0,
xValue:1515571888000.3572,
yValue: 200,
anchorX: 'left',
anchorY: 'top',
title: 'Annotation text',
}]
But i'm interested in being able to add annotations as I update the chart.
Currently i'm using react-highcharts v. ^11.0.0 from npm.
Refer to this live demo: http://jsfiddle.net/kkulig/gxv5f3xn/
You can use Chart.removeAnnotation() and Chart.addAnnotation() to perform dynamic updates (Chart.update() won't work). These methods are not docummented in the API yet.
annotations: [{
id: 'anno1',
labels: [{
point: 'first',
format: '1'
}, {
point: 'second',
format: '2'
}]
}]
(...)
chart.removeAnnotation('anno1');
chart.addAnnotation({
id: 'anno2',
labels: [{
point: 'first',
format: '3'
}, {
point: 'second',
format: '4'
}]
});
When the series is being hidden via legend item click the error occurs - it's a bug (the official fix for it should be implemented soon). To prevent this error from happening I used modified core functions (lines 1 - 39 in the demo).
I am new to the highcharts. I am using donut highchart where in the below provided link we can get the static data
http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-pie-donut/
But i have a no. of data in the same format as
Highcharts.chart('container5',{
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Daily Report'
},
subtitle: {
text: '3D donut'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Amount',
data: [$rootScope.oprep2]
}]
})
Here $rootScope.oprep2 is the data which in the array format as per the format shown / given in the demo as
in the above picture you can the line number 1025 which is in the required format.
the above pic shows the open array which contains data as unitno and amountpaid
My Query is, that the data is not displaying in the chart. So any idea, which will help me a lot. Here is the view as daily report
Here is my data
Array[11] =>
Array[2]=>
0:"001"
1:180
Array[2]=>
0:"007"
1:4570
Array[2]=>
0:"008"
1:1060
Array[2]=>
0:"026"
1:180
Each array is seperated by ,
As i have gone through your code, i see that your getting array of array, but you are assigning that data again with array which is not getting the chart. Instead of joining, separation, try to remove the array assign it directly.
data:$rootScope.oprep2
but not
data:[$rootScope.oprep2]
I am looking to create some logic for JSON data retrieved from a server request. As you can see from the raw data below, it is received in a particular format.
There is a "balances" entry which, in this case, has 5 different sub-values, of which names can vary dependent upon a given user.
For example:
Barry has 5 bank accounts, each with different balances.
Melissa has 2 bank accounts, each with different balances.
Melissa's bank accounts are different to Barry's bank accounts, and vise versa.
The Balance ID numbers that are assigned, may not necessarily match both Barry and Melissa.
In the Ext JS grid, the column headings which need to be displayed, must adjust to both Barry and Melissa's individual bank account balances.
Barry's JSON Data:
{
"firstName": "Foo",
"lastName": "Bar",
"balances":
{
Natwest: 9,
BankofScotland: 2,
Lloyds: 40,
Halifax: 89,
Lords: 12
},
}
Melissa's JSON Data:
{
"firstName": "Melissa",
"lastName": "Bar",
"balances":
{
DifferentNatwest: 10,
DiffferentBankofScotland: 45
},
}
At the moment, I only have one mapping in my store/model, called "balances" which only takes one value:
Store/Model definitions:
fields: ['firstName', 'lastName', 'balances']
So, obviously the following issue occurs when the grid is generated, as more than one value is being passed:
Results:
The Question:
Does anyone know what I can do to get the columns to dynamically generate in this Ext JS grid, dependant upon the JSON data being received for this balances information?
What you need is to create the grid columns and store for it dynamically.
I don't know if there is some more "ExtJS" way (simpler, automatic creation) but I would do a straightforward solution.
1# Solution - with multiple columns
Get the data, get the JSON object
Based on the JSON object create the new grid columns
Based on the JSON object create the new store with correct records (I
don't think there is model which can have object in it - you need to transofrm it)
Create the grid and add the new store and columns to it.
Here is the code snippet with the most important part:
for (var key in d.balances) {
bankAcountsColumns.push({
xtype: 'gridcolumn',
dataIndex: key,
text: key
});
transformData[key] = d.balances[key];
fields.push(key);
}
var myCustomColumns = [{
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'Name'
}, {
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName '
}, {
xtype: 'gridcolumn',
text: 'Bank accounts',
columns: bankAcountsColumns
}]
Ext.create('MyApp.view.MyGridPanel', {
renderTo: Ext.getBody(),
columns: myCustomColumns,
store: {
fields: fields,
data: transformData
}
});
Here is working fiddle example:
https://fiddle.sencha.com/#view/editor&fiddle/1l5j
2# Solution - one column
If you want to have only one column with all the balances, you would need templatecolumn
In there I would create template for 5 items (or it can be again created dynamically):
tpl:'{bank1name} {bank1value} {bank2name} {bank2value} ...'
And than you would have to dynamically create the data for the new store.
data:[
{ firstName: "Foo", lastName:"Scott", bank1name: "Natwest", bank1value: "9" ... },
{ firstname: "Dwight", lastName: "Bar", ... bank5name: "" ... }
]