React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS DataTable demo. An end-user can easily search through a DataTable's data via the built-in Search Input field. The DataTable automatically filters records and displays only those that match the user's search string.

Formaggi Fortini s.r.l.	Mozzarella di Giovanni	24	$34.80	Viale Dante, 75	Ravenna
Leka Trading	Singaporean Hokkien Fried Mee	32	$14.00	471 Serangoon Loop, Suite #402	Singapore
Cooperativa de Quesos 'Las Cabras'	Queso Cabrales	1	$21.00	Calle del Rosal 4	Oviedo
G'day, Mate	Manjimup Dried Apples	50	$53.00	170 Prince Edward Parade Hunter's Hill	Sydney
Mayumi's	Tofu	40	$23.25	92 Setsuko Chuo-ku	Osaka
PB Knckebrd AB	Gustaf's Knckebrd	24	$21.00	Kaloadagatan 13	Gteborg
G'day, Mate	Manjimup Dried Apples	50	$53.00	170 Prince Edward Parade Hunter's Hill	Sydney
Pasta Buttini s.r.l.	Ravioli Angelo	24	$19.50	Via dei Gelsomini, 153	Salerno
New Orleans Cajun Delights	Louisiana Fiery Hot Pepper Sauce	32	$21.05	P.O. Box 78934	New Orleans
New England Seafood Cannery	Jack's New England Clam Chowder	12	$9.65	Order Processing Dept. 2100 Paul Revere Blvd.	Boston

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS DataTable demo. An end-user can easily search through a DataTable's data via the built-in Search Input field. The DataTable automatically filters records and displays only those that match the user's search string.
    </title>
    <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/jqxdatatable.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS DataTable demo. An end-user can easily search through a DataTable's data via the built-in Search Input field. The DataTable automatically filters records and displays only those that match the user's search string.
    </div>
    <div id="app"></div>
    <script src="../build/datatable_searchfield.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxDataTable from '../../../jqwidgets-react/react_jqxdatatable.js';class App extends React.Component {
    render() {
        let source =
            {
                datatype: 'xml',
                dataFields: [
                    { name: 'SupplierName', type: 'string' },
                    { name: 'Quantity', type: 'number' },
                    { name: 'OrderDate', type: 'date' },
                    { name: 'OrderAddress', type: 'string' },
                    { name: 'Freight', type: 'number' },
                    { name: 'Price', type: 'number' },
                    { name: 'City', type: 'string' },
                    { name: 'ProductName', type: 'string' },
                    { name: 'Address', type: 'string' }
                ],
                url: '../sampledata/orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };

        let dataAdapter = new $.jqx.dataAdapter(source);

        let columns =
            [
                { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 250 },
                { text: 'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 250 },
                { text: 'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
                { text: 'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
                { text: 'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
                { text: 'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City' }
            ];

        return (
            <JqxDataTable
                width={850} height={400} source={dataAdapter} altRows={true}
                pageable={true} filterable={true} columns={columns}
                pagerButtonsCount={10} filterMode={'simple'}
            />
        )
    }
}

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