React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

This example shows how to enable the Excel-like filter mode of the React Grid.

Vins et alcools Chevalier

Reims

France

32.38

59 rue de l'Abbaye

Toms Spezialitäten

Münster

Germany

11.61

Luisenstr. 48

Hanari Carnes

Rio de Janeiro

Brazil

65.83

Rua do Paço, 67

Victuailles en stock

Lyon

France

41.34

2, rue du Commerce

Suprêmes délices

Charleroi

Belgium

51.30

Boulevard Tirou, 255

Hanari Carnes

Rio de Janeiro

Brazil

58.17

Rua do Paço, 67

Chop-suey Chinese

Bern

Switzerland

22.98

Hauptstr. 31

Richter Supermarkt

Genève

Switzerland

148.33

Starenweg 5

Wellington Importadora

Resende

Brazil

13.97

Rua do Mercado, 12

HILARION-Abastos

San Cristóbal

Venezuela

81.91

Carrera 22 con Ave. Carlos Soublette #8-35

Ernst Handel

Graz

Austria

140.51

Kirchgasse 6

Centro comercial Moctezuma

México D.F.

Mexico

3.25

Sierras de Granada 9993

Ottilies Käseladen

Köln

Germany

55.09

Mehrheimerstr. 369

Que Delícia

Rio de Janeiro

Brazil

3.05

Rua da Panificadora, 12

<!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 enable the Excel-like filter mode of the React Grid.
    </title>
	<meta name="description" content="This React Grid demo showcases how to use React Grid Excel Filter"/>
	
    <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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.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.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxpanel.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 enable the Excel-like filter mode of the React Grid.
    </div>
    <div id="app"></div>
    <script src="../build/grid_excellikefilter.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 source =
            {
                datatype: 'xml',
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: 'entry',
                record: 'content',
                id: 'm\\:properties>d\\:OrderID',
                url: '../sampledata/orders.xml'
            };

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


        let columns =
            [
                { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                { text: 'Ship City', datafield: 'ShipCity', width: 250 },
                { text: 'Ship Country', datafield: 'ShipCountry', width: 200 },
                { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
                { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
            ];

        return (
            <JqxGrid
                width={850} source={dataAdapter} filterable={true}
                sortable={true} filtermode={'excel'} columnsresize={true}
                autoshowfiltericon={false} columns={columns}
            />
        )
    }
}

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