Hi,
I am giving a try to this grid. I am having a problem with my first code. Maybe I am missing something, but I am unable to figure out.
I have this at the top (css) and at the bottom (js) -it is an ASP MVC project, so I am summarizing-:

<link rel="stylesheet" type="text/css" href="~/Scripts/smartui/styles/smart.default.css" />
<script type="module" src="~/Scripts/smartui/modules/smart.grid.js"></script>
<script src="~/Scripts/data.js"></script>
<script src="~/Scripts/site.js"></script>

Then I have this in the body:

<smart-grid id="grid"></smart-grid>

And my “site.js” contains the code to configure the grid as follows (it is basically taken from the documentation):

Smart('#grid', class {
    get properties() {
        return {
            appearance: {
                allowSortAnimation: true
            },
            sorting: {
                enabled: true
            },
            filtering: {
                enabled: true,
                filter:
                    [
                        ['firstName', 'contains Andrew or contains Nancy'],
                        ['quantity', '>= 3 and <= 8']
                    ]
            },
            selection: {
                enabled: true,
                mode: 'one'
            },
            dataSource: new Smart.DataAdapter(
                {
                    dataSource: generateData(10000),
                    dataFields:
                        [
                            'id: number',
                            'firstName: string',
                            'lastName: string',
                            'productName: string',
                            'quantity: number',
                            'price: number',
                            'total: number'
                        ]
                }),
            columns: [
                {
                    label: 'First Name', dataField: 'firstName'
                },
                { label: 'Last Name', dataField: 'lastName' },
                { label: 'Product', dataField: 'productName' },
                { label: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right', },
                { label: 'Unit Price', dataField: 'price', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                { label: 'Total', dataField: 'total', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }
            ]
        }
    }
});

This produces the following graphical issue -notice how the filter button is out of its natural position-:
https://ibb.co/qRcq5c5
I also get the following error when selecting any row (only one time), maybe it is related:

smart.grid.js:8 Uncaught TypeError: Cannot read property ‘disabled’ of undefined
at HTMLElement.get [as disabled] (smart.grid.js:8)
at HTMLDocument.handlers (jquery-3.4.1.js:5281)
at HTMLDocument.dispatch (jquery-3.4.1.js:5217)
at HTMLDocument.elemData.handle (jquery-3.4.1.js:5044)

How can I fix these two issues?
Thanks in advance.