ListVirtual

A searchable dropdown component with server-side filtering, infinite scrolling, and support for both single and multiple selection.

Features

• Server-side search
• Infinite scrolling
• Single select mode
• Multiple select mode
• Custom request headers via ApiProvider
• Default value support
• Material UI integration

---

Installation

npm install your-library-name

Import

import { ApiProvider, ListVirtual } from "your-library-name";

---

Setup

Wrap your application or component with ApiProvider to provide API headers.

<ApiProvider
  headers={{
    Authorization: `Bearer ${token}`,
  }}
>
  <ListVirtual
    id="company-select"
    label="Company"
    name="name"
    url="/company"
  />
</ApiProvider>

---

Single Selection

const [company, setCompany] = useState(null);

<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  getData={(row) => {
    setCompany(row);
  }}
/>

Selected Value

{
  id: 123,
  name: "My Company"
}

---

Multiple Selection

const [companies, setCompanies] = useState([]);

<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  multiple
  getData={(rows) => {
    setCompanies(rows);
  }}
/>

Selected Value

[
  {
    id: 1,
    name: "Company A"
  },
  {
    id: 2,
    name: "Company B"
  }
]

---

Using Default Value

Single Selection

<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  defaultValue={{
    id: 123,
    name: "My Company"
  }}
/>

Multiple Selection

<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  multiple
  defaultValue={[
    {
      id: 1,
      name: "Company A"
    },
    {
      id: 2,
      name: "Company B"
    }
  ]}
/>

---

Props

Prop	Type	Default	Description
id	string	-	Unique component identifier
label	string	-	TextField label
name	string	-	Property name used for display
url	string	-	API endpoint used to fetch data
getData	function	undefined	Callback triggered when selection changes
defaultValue	object	array	undefined
multiple	boolean	false	Enable multiple selection mode
disabled	boolean	false	Disable the component
required	boolean	false	Mark field as required
error	boolean	false	Error state
helperText	string	undefined	Helper text displayed below the field
size	string	"medium"	TextField size (small or medium)
lengthData	number	100	Number of records fetched per request
filter	array	[]	Additional API filters
isApiGo	boolean	false	Use Go API request mode

---

Custom Filters

<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  filter={[
    {
      name: "status",
      value: 1,
      logic_operator: "="
    }
  ]}
/>

---

API Response Format

The component expects the API response to have the following structure:

{
  "data": [
    {
      "id": 1,
      "name": "Company A"
    }
  ],
  "totalRecord": 100
}

---

Notes

• The property specified in the name prop is used as the displayed label.
• Infinite scrolling automatically loads additional records when the user reaches the bottom of the list.
• In multiple mode, the getData callback returns an array of selected objects.
• In single mode, the getData callback returns a single selected object.