React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

This example shows how to populate the React Grid with large data set.

Yoshi

Wilson

Caffe Espresso

$3.00

$12.00

Beate

Winkler

Cramel Latte

$3.80

$41.80

Mayumi

Bjorn

Caffe Latte

$4.50

Martin

Rossi

White Chocolate Mocha

$3.60

$7.20

Martin

Saavedra

Doubleshot Espresso

$3.30

$13.20

Martin

Winkler

Caffe Latte

$4.50

$13.50

Nancy

Ohno

Caffe Espresso

$3.00

$12.00

Ian

Burke

Black Tea

$2.25

$9.00

Beate

Wilson

Doubleshot Espresso

$3.30

$13.20

Nancy

Winkler

Black Tea

$2.25

$13.50

Martin

Ohno

Caffe Americano

$2.50

$25.00

Peter

Saavedra

Black Tea

$2.25

$20.25

Yoshi

Vileid

Caffe Americano

$2.50

$15.00

Nancy

Murphy

Caffe Americano

$2.50

$12.50

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        This example shows how to populate the React Grid with large data set.
    </title>
	<meta name="description" content="This React Grid demo showcases how to use the Grid with large data"/>
	
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        This example shows how to populate the React Grid with large data set.
    </div>
    <div id="app"></div>
    <script src="../build/grid_largedataset.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxGrid from '../../../jqwidgets-react/react_jqxgrid.js';

class App extends React.Component {
    render() {
        let data = new Array();
        let firstNames =
            [
                'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
            ];
        let lastNames =
            [
                'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
            ];
        let 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'
            ];
        let 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 < 30000; i++) {
            let row = {};
            let productindex = Math.floor(Math.random() * productNames.length);
            let price = parseFloat(priceValues[productindex]);
            let quantity = 1 + Math.round(Math.random() * 10);
            row['id'] = i;
            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;
        }
        let source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: 'array'
            };

        let columns =
            [
                { text: 'Id', datafield: 'id', width: 50 },
                { text: 'First Name', datafield: 'firstname', width: 130 },
                { text: 'Last Name', datafield: 'lastname', width: 130 },
                { text: 'Product', datafield: 'productname', width: 180 },
                { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                { text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
                { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
            ];

        return (
            <div style={{ fontSize: 13, fontFamily: 'Verdana', float: 'left' }}>
                <JqxGrid
                    width={850} source={source} columns={columns}
                />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));