#102289
nkralj
Member

Sorry i was having wrong code in clipboard.
Please check the animated GIF.
Smart Grid Vue issue
Here’s the right code:


<script>
    /* eslint-disable */
    import "../../node_modules/smart-webcomponents/source/styles/smart.default.css";
    import "../../node_modules/smart-webcomponents/source/modules/smart.grid.js";
    export default {
        mounted() {
            this.initGrid();
        },
        methods: {
            initGrid() {
                let vm = this;
                window.Smart('#grid', class {
                    get properties() {
                        return {
                           editing: {
                                enabled: true,
                                mode: 'row'
                            },
                            filtering: {
                                enabled: true,
                                filterRow: {
                                    visible: true
                                }
                            },
                            dataSource: new window.Smart.DataAdapter({
                                dataSource: [
                                    {id: 11, premiered: '2021-01-01', name: 'Only Fools and Horses'},
                                    {id: 22, premiered: '2021-02-02', name: 'Breaking Bad'},
                                    {id: 33, premiered: '2021-03-03', name: 'Sweet Tooth'},
                                ],
                                dataFields: [
                                    { name: 'id', dataType: 'int'},
                                    { name: 'premiered', dataType: 'date'},
                                    { name: 'name', dataType: 'string'},
                                ]
                            }),
                            columns: [
                                {
                                    label: 'Show',
                                    dataField: 'name'
                                },
                                {
                                    label: 'Premiered',
                                    dataField: 'premiered',
                                    cellsFormat: "dd.MM.yyyy"
                                }
                            ],
                        }
                    }
                }
            )
        }
    }
}
</script>