<template>
    <JqxDataTable :width="getWidth" :columns="columns" :selectionMode="'singleRow'"
                  :altRows="true" :sortable="true" :editable="true">
        <table id='table' border='1'>
            <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>
</template>

<script>
    import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdatatable.vue";

    export default {
        components: {
            JqxDataTable
        },
        data: function () {
            return {
                getWidth: '90%',
                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' }
                ]
            }
        }
    };
</script>

<style>
</style>