Skip to main content

Freezing columns

The widget allows freezing columns on the left side, which makes the leftmost columns visible while scrolling. To freeze columns, add the split attribute to the Grid tag and set its value to left with a specified number of columns to be fixed.

Example:

<script setup>
import { Grid } from "@svar-ui/vue-grid";
import { ref } from "vue";

import { getData } from "./common/data";
const { data, allColumns } = getData();

const left = ref(2); //freeze 2 columns

</script>

<template>
<Grid :data="data" :columns="allColumns"
:split="{ left }" />
</template>

Related sample: Fixed columns