smart-html-elements

Grid Row Resize

JavaScript

Angular

Vue

React

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.

Row Freeze

Rows can be frozen either to the 'top' or to the 'bottom'. The feature is also known as pinned rows and floating rows. To freeze a row, you need to set the row.freeze property.

Example:

onRowInit(index, row) {
	if (index < 3) {
		row.freeze = true;
	}
}

To freeze a row to the bottom, set the row.freeze property to 'far'.

onRowInit(index, row) {
	if (index > 2996) {
		row.freeze = 'far';
	}
}

For AI tooling

Developer Quick Reference

Topic: grid-row-freeze Component: Grid Framework: Vue

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

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

Lifecycle guidance: Use template refs with