Grid - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid for Vue

Vue 3 version using Smart custom elements and template refs.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

<script setup>
import { onMounted, ref } from 'vue';
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.grid.js';

const component = ref();
const componentProps = {
  // Copy this topic's JavaScript configuration here.
};

onMounted(() => {
  Object.assign(component.value, componentProps);
});
</script>

<template>
  <smart-grid ref="component"></smart-grid>
</template>

Use component.value for API methods in this topic.

Grid Scrolling

When loading a large data set in Smart.Grid and the Grid's height is not enough to show all data, a scrollbar is shown.

There are four different scroll modes in the Gid which can be set via the property scrolling. The default mode is 'physical', which enables scrolling behavior similar to that of standard HTML elements. The other three modes are:


More information: property scrolling in the Grid API documentation.

Virtual scrolling

Virtual scrolling is enabled by setting scrolling to 'virtual'. In this case, data is loaded on demand while scrolling. This makes this scrolling mode suitable for large data sets that are dynamically retrieved from the server.

For virtual scrolling to work as expected, related properties of the Grid's data source also have to be set, e.g.:

dataSource: new Smart.DataAdapter({
            virtualDataSourceLength: 100000,
            virtualDataSourceCache: true,
            virtualDataSource: function(resultCallbackFunction, details) {
                setTimeout(function() {
                    resultCallbackFunction({
                        dataSource: GetData(details.first, details.last)
                    });
                }, 100);
            },
  • virtualDataSourceLength - the number of records in the remote data source.
  • virtualDataSourceCache - if set to true, data is cached and will not be reloaded if scrolled to again.
  • virtualDataSource - a callback function which executes when a scroll position is reached and fetches only the portion of the remote data source that will be visible in the Grid.

Infinite scrolling

Infinite scrolling is enabled by setting scrolling to 'infinite'. In this case, data is loaded on demand the user has scrolled to the bottom of the Grid's view. This makes this scrolling mode suitable for large data sets that are dynamically retrieved from the server when the size of the data source is unknown.

For infinite scrolling to work as expected, the virtualDataSource property of the Grid's data source also has to be set.

Deferred scrolling

Deferred scrolling is enabled by setting scrolling to 'deferred'. In this mode, the Grid's view is updated when the scrollbar's thumb is released. The lack of reload while moving the thumb improves the performance significantly.

For AI tooling

Developer Quick Reference

Topic: grid-scrolling   Component: Grid   Framework: Vue

Main methods: (none detected)

Common config keys: dataSource, virtualDataSource

Implementation Notes

Compatibility: Vue 3+   API access pattern: const component = ref() + component.value.method()

Lifecycle guidance: Use template refs with