import * as React from 'react'
import { useState } from 'react'
import JqxDataTable, { IDataTableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable'

function App() {
    const [columns] = useState<IDataTableProps['columns']>([
        { text: 'First Name', dataField: 'First Name', width: 200 },
        { text: 'Last Name', dataField: 'Last Name', width: 200 },
        { text: 'Product', dataField: 'Product', width: 250 },
        { text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
        { text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' }
    ])

    return (
        <JqxDataTable
            theme="material-purple"
            // @ts-ignore
            width="100%"
            columns={columns}
            selectionMode="singleRow"
            altRows
            sortable
            editable
        >
            <table id="table" style={{ border: '1px' }}>
                <thead>
                    <tr>
                        <th align="left">First Name</th>
                        <th align="left">Last Name</th>
                        <th align="left">Product</th>
                        <th align="right">Price</th>
                        <th align="right">Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Ian</td>
                        <td>Devling</td>
                        <td>Espresso Truffle</td>
                        <td>$1.75</td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>Nancy</td>
                        <td>Wilson</td>
                        <td>Cappuccino</td>
                        <td>$5.00</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>Cheryl</td>
                        <td>Nodier</td>
                        <td>Caffe Americano</td>
                        <td>$2.50</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>Martin</td>
                        <td>Saavedra</td>
                        <td>Caramel Latte</td>
                        <td>$3.80</td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>Guylene</td>
                        <td>Bjorn</td>
                        <td>Green Tea</td>
                        <td>$1.50</td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>Andrew</td>
                        <td>Burke</td>
                        <td>Caffe Espresso</td>
                        <td>$3.00</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>Regina</td>
                        <td>Murphy</td>
                        <td>White Chocolate Mocha</td>
                        <td>$3.60</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>Michael</td>
                        <td>Murphy</td>
                        <td>Caramel Latte</td>
                        <td>$3.80</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>Petra</td>
                        <td>Bein</td>
                        <td>Caffe Americano</td>
                        <td>$2.50</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>Nancy</td>
                        <td>Nodier</td>
                        <td>Caffe Latte</td>
                        <td>$4.50</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Peter</td>
                        <td>Devling</td>
                        <td>Green Tea</td>
                        <td>$1.50</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>Beate</td>
                        <td>Saylor</td>
                        <td>Espresso con Panna</td>
                        <td>$3.25</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>Shelley</td>
                        <td>Nodier</td>
                        <td>Peppermint Mocha Twist</td>
                        <td>$4.00</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>Nancy</td>
                        <td>Murphy</td>
                        <td>Peppermint Mocha Twist</td>
                        <td>$4.00</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>Lars</td>
                        <td>Wilson</td>
                        <td>Caffe Espresso</td>
                        <td>$3.00</td>
                        <td>11</td>
                    </tr>
                </tbody>
            </table>
        </JqxDataTable>
    )
}

export default App