NuGrid provides flexible row selection with support for single selection, multi-selection, and per-row selection control.
Enable multi-row selection with checkboxes:
<script setup lang="ts">
const rowSelection = ref({})
</script>
<template>
<NuGrid
v-model:row-selection="rowSelection"
:data="data"
:columns="columns"
:selection="{ mode: 'multi' }"
/>
</template>
Limit selection to one row at a time:
<template>
<NuGrid
v-model:row-selection="rowSelection"
:data="data"
:columns="columns"
:selection="{ mode: 'single' }"
/>
</template>
Configure selection behavior with an options object:
<script setup lang="ts">
import type { NuGridRowSelectOptions, NuGridRow } from '#nu-grid/types'
// Function to determine if a row can be selected
function canSelectRow(row: NuGridRow<Employee>): boolean {
return row.original.status !== 'inactive'
}
const selectionOptions: NuGridRowSelectOptions<Employee> = {
mode: 'multi',
hidden: false, // Show/hide checkbox column
enabled: true, // Enable/disable all checkboxes
rowSelectionEnabled: canSelectRow, // Per-row selection control
}
</script>
<template>
<NuGrid
v-model:row-selection="rowSelection"
:data="data"
:columns="columns"
:selection="selectionOptions"
/>
</template>
| Option | Type | Default | Description |
|---|---|---|---|
mode | 'single' | 'multi' | 'multi' | Selection mode |
hidden | boolean | false | Hide the checkbox column |
enabled | boolean | true | Enable/disable all checkboxes |
rowSelectionEnabled | (row) => boolean | - | Per-row selection control function |
Access selected rows programmatically:
<script setup lang="ts">
const gridRef = useTemplateRef('grid')
// Get selected row data
const selectedRows = computed(() => {
return gridRef.value?.getSelectedRows<Employee>() ?? []
})
// Get selection state object
const selectionState = computed(() => {
return gridRef.value?.tableApi?.getFilteredSelectedRowModel().rows ?? []
})
</script>
<template>
<NuGrid ref="grid" :data="data" :columns="columns" :selection="{ mode: 'multi' }" />
<div v-if="selectedRows.length > 0">
Selected: {{ selectedRows.map(r => r.name).join(', ') }}
</div>
</template>
Listen for selection changes:
<script setup lang="ts">
function onSelectionChanged(selection: Record<string, boolean>) {
const selectedIds = Object.entries(selection)
.filter(([, selected]) => selected)
.map(([id]) => id)
console.log('Selected row IDs:', selectedIds)
}
</script>
<template>
<NuGrid
v-model:row-selection="rowSelection"
:data="data"
:columns="columns"
:selection="{ mode: 'multi' }"
@row-selection-changed="onSelectionChanged"
/>
</template>
Clear all selections programmatically:
<script setup lang="ts">
const rowSelection = ref({})
function clearSelection() {
rowSelection.value = {}
}
</script>
<template>
<UButton @click="clearSelection">Clear Selection</UButton>
<NuGrid
v-model:row-selection="rowSelection"
:data="data"
:columns="columns"
:selection="{ mode: 'multi' }"
/>
</template>
Enable selection without showing the checkbox column:
<template>
<NuGrid
v-model:row-selection="rowSelection"
:data="data"
:columns="columns"
:selection="{ mode: 'multi', hidden: true }"
/>
</template>
'row'.