PhSelectMultirow

A custom multi-row select component for Quasar 2 (Vue 3) with nested optgroups support.

Installation

npm install https://github.com/PavloHalk/ph-select-multirow

Usage

Import Vue component and type for options:

import PhSelectMultirow from 'ph-select-multirow';
import { PhSelectMultirowOption } from 'ph-select-multirow'

Create options, like:

const options = ref<PhSelectMultirowOption[]>([
  {
    value: 1,
    text: 'Group one',
    type: 'optgroup',
    selected: false,
    children: [
      {
        value: 101,
        text: 'One',
        type: 'option',
        selected: false,
      }
    ],
  },
  {
    value: 2,
    text: 'Group two',
    type: 'optgroup',
    selected: false,
    children: [
      {
        value: 201,
        text: 'One',
        type: 'option',
        selected: false,
      },
      {
        value: 202,
        text: 'Two',
        type: 'option',
        selected: false,
      },
    ],
  }
]);

Add component to the template:

<ph-select-multirow v-model="options" rows="10" />

Data Structures

PhSelectMultirowOption (Interface)

This is the main object structure for each item in the options array.

Property	Type	Required	Description
value	number	✅	Unique identifier of the item.
text	string	✅	Label displayed in the list.
type	PhSelectMultirowOptionType	✅	Defines if the item is a group or a selectable option.
selected	boolean	✅	Current selection state.
children	PhSelectMultirowOption[]	❌	Nested items array. Used only when type: 'optgroup'.

---

PhSelectMultirowOptionType (Type)

Defines the role of the object in the list hierarchy.

Value	Description
'optgroup'	Acts as a header for a group. Can contain nested children.
'option'	A standard list item that can be selected.

Note: Nested optgroups are not supported. Any depth within children beyond the first level will be ignored by the renderer.

Component properties

Property	Type	Description
v-model	PhSelectMultirowOption[]	Slecectable options
rows	number | string	How many rows are shown without scroll

Features

Works with TypeScript in the Quasar2 ecosystem.