<baht-keyvalue-editor>

Inline key = value row editor for field maps and config objects. Rows with an empty key are kept while editing but dropped from the emitted object.

Edit an object

key-placeholdervalue-placeholderadd-labeldisabled

Listen to baht-change and store detail.value.

HTMLReactAngular

Copy

<baht-keyvalue-editor add-label="Add row"></baht-keyvalue-editor>

<script>
  const el = document.querySelector('baht-keyvalue-editor');
  el.value = {
    "state": "resolved",
    "priority": "p2"
  };
</script>

Props

Name	Type	Default	Description
valueJS	Record<string, unknown>	{}	The object being edited
key-placeholder	string	'key'	Key input placeholder
value-placeholder	string	'value'	Value input placeholder
add-label	string	'Add row'	Add button text
disabled	boolean	false	Disabled

Events

Event	detail	Description
name	CustomEvent
baht-change	{ value }	The object after any edit