PxGridSelect

A complex selector that combines a searchable dropdown with a data grid (table) for selected items. Useful for scenarios where users need to select multiple items and see their details (like name, color, and custom fields) in a structured format before saving. Built natively using PxSelect.

Basic Usage

Basic Usage

Selected Items

Choose item...

No items selected

<script setup>
import { ref } from 'vue'
import { PxGridSelect } from 'praxis-vue-ui'

const selectedItems = ref([])
const options = [
  { id: 1, name: 'Option A' },
  { id: 2, name: 'Option B' }
]
</script>

<template>
  <PxGridSelect
    v-model:selectedItems="selectedItems"
    :options="options"
    title="Selected Items"
  />
</template>

Schema-Driven Usage (Backend Field)

When using PxSchemaForm, you can pass a FormSchemaField directly using the field prop. The component will automatically extract options, label_field, value_field, and handle pagination via infinite scroll if configured.

<PxGridSelect
  v-model:selectedItems="selected"
  :field="mySchemaField"
  @search="handleSearch"
  @scroll-bottom="loadMore"
/>

API Reference

Prop	Type	Default	Description
options	SelectableItem[] | any[]	() => []	—
selectedItems	SelectableItem[]	() => []	—
title	string	""	—
isRequired	boolean	false	—
placeholder	string	"Choose item..."	—
labelField	TSTypeOperator	"name"	—
valueField	string	"id"	—
field	FormSchemaField	undefined	—
showColorPicker	boolean	false	—
colorField	string	"color"	—
columns	string[]	() => []	—
additionalFields	AdditionalField[]	() => []	—
disabled	boolean	false	—
selectWidth	string	"w-[400px]"	—
maxHeight	string	undefined	—
showCustomOptionTemplate	boolean	false	—
showSelected	boolean	true	—
loading	boolean	false	—
showButtonDelete	boolean	true	—
hideLabelColumn	boolean	false	—
isInfinity	boolean	false	—
loadMoreScroll	TSFunctionType	undefined	—
hasMore	boolean	false	—
loadingScroll	boolean	false	—
searchFunction	TSFunctionType	undefined	—
nonRemovableField	string	undefined	—
nonRemovableValue	string | number | null	undefined	—
showAvatar	boolean	false	—