QEditableList

An inline-editable list with add/remove rows and a searchable combobox picker.

Updated 2026-06-04

Editable rows

const [data, setData] = useState([
  { name: "Widget", qty: 3, price: 9.99 },
  { name: "Gadget", qty: 1, price: 19.99 },
]);

<QEditableList
  columns={[
    { key: "name", header: "Name", type: "text", placeholder: "Item name" },
    { key: "qty", header: "Qty", type: "number", width: 90 },
    { key: "price", header: "Price", type: "currency", width: 120 },
  ]}
  data={data}
  onChange={setData}
  createEmpty={() => ({ name: "", qty: 1, price: 0 })}
  addLabel="Add item"
/>

An inline-editable list with add/remove rows and a searchable combobox picker.

Installation

railbase ui add QEditableList

Note

railbase ui add also copies the button, checkbox, command, input, popover, select, tooltip components — they ship alongside this component automatically.

Usage

import { QEditableList } from "@/lib/ui/QEditableList";

<QEditableList
  items={items}
  options={options}
  onChange={setItems}
/>