Props

JSON value string | !required
Use a JSON object that contains your list using this format:

[{
	"title":"Monday",
  "subtitle":"Morning",
  "avatarInitials":"MM",
  "value":"Go for it now",
  "moreOptions":[{
    "label":"Option1"}],
  	"date":"20/09/2024"
}]

By default, the list will try to use the values of the JSON value items: title, subtitle, avatarInitials, value, moreOptions, label, date. These properties may be replaced using JSON mapping.

JSON mapping table
The properties on JSON value may be replaced using JSON mapping.

Name	Type	Description
Custom name	`string`	The value that you want to replace. E.g.: if your endpoint returns `txTitle` and you want to add it on the row's title, you should type here “txTitle”
Real name	`string`	The name of the text that’ll be replaced on the row. E.g.: to replace "title" in the row, select it from the dropdown menu. The value you enter in `Custom name` will then be applied as the new "title"

Status mapping table
Map the variables with the expected chip style.

Name	Type	Description
Status value	`string`	The value that the chip will store.
Label	`string`	Select an icon to be added to the item. This will be a fallback if the image is not found and no initials have been added.
Status variant	`string`	Select the size of the avatar.

Example:

Label Status value Status variant
My Chip Value Label ChipValue success

Label	Status value	Status variant
My Chip Value Label	ChipValue	success

More options mapping table
The options listed in the dropdown menu.

Name	Type	Description
Custom name	`string`	How it will be rendered in the UI
Real name	`string`	The property from the JSON

Example:

Custom name Real name
label.test.name Label

Custom name	Real name
label.test.name	Label

Group separator string | !required
Used to group elements, pulls the value of one of the items in your JSON.