Code

Implementation
ListView Props
ListView.Option Props

Common Examples

import { ListView, Text } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <ListView>
      <ListView.Option label="first">
        <Text>First Value</Text>
      </ListView.Option>
      <ListView.Option label="second">
        <Text>Second Value</Text>
      </ListView.Option>
      <ListView.Option label="third">
        <Text>Third Value</Text>
      </ListView.Option>
    </ListView>
  );
}

Creating selectable list views

The ListView component can be used to easily create selectable lists using the label prop and custom content as children of each ListView.Option.

Demo

Indeterminate list views

The indeterminate prop can be used when the selection of items is controlled to render the checkbox as indeterminate, instead of checked or not checked. This is useful when building a nested structure.Note: the logic to determine which items are indeterminate is not included, since there are various use cases. Simply pass the items that should be indeterminate to the prop.

Demo

Using items objects with list views

The items prop of a ListView can also be passed an array of objects which are passed to the children of the list view. Each item object should have a label, but any other arbitrary attributes are allowed.

const Items = [
  { label: "Item 1", imgUrl: "#" },
  { label: "Item 2", imgUrl: "#", disabled: true },
  { label: "Item 3" },
];

export const ListViewExample = () => (
  <ListView items={Items}>
    {(items) =>
      items.map((item) => (
        <ListView.Option key={item.label} item={item} disabled={item.disabled}>
          <Avatar image={item.imgUrl} name={item.label} />
          <Text>{item.label}</Text>
        </ListView.Option>
      ))
    }
  </ListView>
);

Demo

<ListView
  items={itemsArray}
  defaultSelected={[]}
  selected={[]}
  indeterminate={[]}
  onSelectionChange={(value) => console.log(value)}
>
  {(items) =>
    items.map((item) => (
      <ListView.Option key={item.label} item={item}>
        {item.label}
      </ListView.Option>
    ))
  }
</ListView>

`ListView` Props

In addition to the props listed below, the ListView component can accept any valid HTML div props.

onSelectionChange

(value: unknown[]) => void

required

Callback when the selection changes.

children

(items) => ReactNode (items prop only) ReactNode (without items prop)

If the items prop is used, ListView’s children will be a function that passes the items.

defaultSelected

ItemType[] (items prop only) string[] (without items prop)

indeterminate

ItemType[]

Items passed to this prop will render with an indeterminate checkbox (controlled)

items

ItemType[]

ListView can be used with or without an items prop to manage your list of items

selected

ItemType[]

Items passed to this prop will render with an checked checkbox (controlled)

<ListView.Option
  item={item}
  label="Option 1"
  disabled={false}
  onChange={(e) => console.log("Changed")}
>
  Option content
</ListView.Option>

`ListView.Option` Props

In addition to the props listed below, the ListView.Option component can accept any valid HTML div props.

disabled

boolean

item

{ label: string, defaultSelected?: boolean, [keys]: values }

Required if no label prop is supplied.

label

string

Required if no item prop is supplied.

onChange

(e: ChangeEvent) => void

Anvil2 Web

Resources

Common Examples

Creating selectable list views

Indeterminate list views

Using items objects with list views

`ListView` Props

`ListView.Option` Props

Anvil2 Web

Resources

​Common Examples

​Creating selectable list views

​Indeterminate list views

​Using items objects with list views

​ListView Props

​ListView.Option Props

Common Examples

Creating selectable list views

Indeterminate list views

Using items objects with list views

`ListView` Props

`ListView.Option` Props