React JqxGrid Export issue

[vivekkrsParticipant]

Hi,

Can you please help with below component to be able to extract to excel? I have seen your typescript example but I am not able to convert this same logic to work in my jsx file. Below is the code that I am using to render the table. Need the export feature to be added to it. Thanks in advance.

/* eslint-disable new-cap */
import React from ‘react’;
import ‘jqwidgets-framework/jqwidgets/styles/jqx.base.css’;
import JqxGrid, { jqx } from ‘jqwidgets-framework/jqwidgets-react-tsx/jqxgrid’;
// import JqxButton from ‘jqwidgets-framework/jqwidgets-react-tsx/jqxbuttons’;

class TempGrid extends React.Component {
myGrid = React.createRef();
constructor(props) {
super(props);

// this.excelBtnOnClick = this.excelBtnOnClick.bind(this);
const data = [];

const firstNames =
[
‘Andrew’, ‘Nancy’, ‘Shelley’, ‘Regina’, ‘Yoshi’, ‘Antoni’, ‘Mayumi’, ‘Ian’, ‘Peter’, ‘Lars’, ‘Petra’, ‘Martin’, ‘Sven’, ‘Elio’, ‘Beate’, ‘Cheryl’, ‘Michael’, ‘Guylene’,
];

const lastNames =
[
‘Fuller’, ‘Davolio’, ‘Burke’, ‘Murphy’, ‘Nagase’, ‘Saavedra’, ‘Ohno’, ‘Devling’, ‘Wilson’, ‘Peterson’, ‘Winkler’, ‘Bein’, ‘Petersen’, ‘Rossi’, ‘Vileid’, ‘Saylor’, ‘Bjorn’, ‘Nodier’,
];

const productNames =
[
‘Black Tea’, ‘Green Tea’, ‘Caffe Espresso’, ‘Doubleshot Espresso’, ‘Caffe Latte’, ‘White Chocolate Mocha’, ‘Cramel Latte’, ‘Caffe Americano’, ‘Cappuccino’, ‘Espresso Truffle’, ‘Espresso con Panna’, ‘Peppermint Mocha Twist’,
];

const priceValues =
[
‘2.25’, ‘1.5’, ‘3.0’, ‘3.3’, ‘4.5’, ‘3.6’, ‘3.8’, ‘2.5’, ‘5.0’, ‘1.75’, ‘3.25’, ‘4.0’,
];

for (let i = 0; i < 200; i += 1) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row.firstname = firstNames[Math.floor(Math.random() * firstNames.length)];
row.lastname = lastNames[Math.floor(Math.random() * lastNames.length)];
row.productname = productNames[productindex];
row.price = price;
row.quantity = quantity;
row.total = price * quantity;
data[i] = row;
}

const source =
{
localdata: data,
datatype: ‘array’,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ },
],
};

this.state = {
columns:
[
{ text: ‘Name’, datafield: ‘firstname’, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 120 },
{ text: ‘Product’, datafield: ‘productname’, width: 180 },
{
text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’,
},
{
text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’,
},
{
text: ‘Total’, datafield: ‘total’, cellsalign: ‘right’, cellsformat: ‘c2’,
},
],
source: new jqx.dataAdapter(source),

};
}

// const TempGrid = () => {
render() {
return (
<div>
<JqxGrid
// ref={this.myGrid}
width={850}
source={this.state.source}
pageable
sortable
altrows
enabletooltips
autoheight
editable
columns={this.state.columns}
selectionmode=”multiplecellsadvanced”
/>
{/* <JqxButton onClick={this.excelBtnOnClick}>Export to Excel</JqxButton> */}
</div>
);
}
}
export default TempGrid;

[HristoParticipant]

Hello vivekkrs,

Is there any error message?

I would like to suggest you try to use a better approach with TypeScript.
For this purpose you could use this tutorial to build one simple project:
https://www.jqwidgets.com/react-components-documentation/documentation/create-jqwidgets-react-app/index.htm?search=
It is a more clear and stable approach.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts