List

Used for showing a flat list of items with different selection modes. It's usually used in master-detail views, or for a list of items with a single attribute. Here is some examples from JetBrains IDEs:

• Settings -> Tools -> SSH Configurations (master-detail)
• Settings -> Appearance & Behavior -> Scopes (master-detail)
• Settings -> Editor -> General -> Console -> Exceptions (single attribute list of items)
• Settings -> Editor -> File and Code Templates (master-detail)
• Settings -> Editor -> Natural Languages (single attribute list of items)
• Show Local History window (advanced layout)

Result

Loading...

Live Editor

<List selectionMode="multiple" fillAvailableSpace> <Item>Paco de lucia</Item> <Divider /> <Item>Vicente Amigo</Item> <Section title="Other"> <Item>Gerardo Nunez</Item> <Item>El Amir</Item> </Section> </List>

<List selectionMode="multiple" fillAvailableSpace>
  <Item>Paco de lucia</Item>
  <Divider />
  <Item>Vicente Amigo</Item>
  <Section title="Other">
    <Item>Gerardo Nunez</Item>
    <Item>El Amir</Item>
  </Section>
</List>

SpeedSearchList

TODO

ItemLayout

While you can render any custom content in Items of a list, ItemLayout is a useful helper component implementing the most common cases. Render different parts of an item, such as icon, text, etc. inside a ItemLayout and it handles the layout, and the spacing between them. Some common parts that require a special style are implemented as components accessible on ItemLayout.

Result

Loading...

Live Editor

<SpeedSearchList selectionMode="multiple"> <Item textValue="jui"> <ItemLayout> <PlatformIcon icon="nodes/folder" /> <HighlightedTextValue /> <ItemLayout.Hint>~/workspace/jui</ItemLayout.Hint> </ItemLayout> </Item> </SpeedSearchList>

<SpeedSearchList selectionMode="multiple">
  <Item textValue="jui">
    <ItemLayout>
      <PlatformIcon icon="nodes/folder" />
      <HighlightedTextValue />
      <ItemLayout.Hint>~/workspace/jui</ItemLayout.Hint>
    </ItemLayout>
  </Item>
</SpeedSearchList>

ContextMenu

In order to have context menu for list items, just wrap the list in a ContextMenuContainer. When the context menu is triggered on an item, the selection is also updated right before the context menu opens, so you can render the context menu based on the selected item(s).

Result

Loading...

Live Editor

function ListContextMenuExample() { const [selectedKeys, setSelectedKeys] = useState(new Set()); return ( <ContextMenuContainer renderMenu={() => { const selectedKey = Array.from(selectedKeys)[0]; if (!selectedKey) { return ( <Menu> <Item>Nothing here</Item> </Menu> ); } return ( <Menu> <Item textValue={`Run '${selectedKey}'`}> <MenuItemLayout icon={<PlatformIcon icon="debugger/threadRunning.svg" />} content={`Run '${selectedKey}'`} shortcut="⇧⏎" /> </Item> <Item textValue={`Debug '${selectedKey}'`}> <MenuItemLayout icon={<PlatformIcon icon="actions/startDebugger.svg" />} content={`Debug '${selectedKey}'`} shortcut="⌃⇧D" /> </Item> <Item textValue={`Edit '${selectedKey}' Settings...`}> <MenuItemLayout icon={<PlatformIcon icon="actions/editSource.svg" />} content={`Edit '${selectedKey}' Settings...`} /> </Item> <Divider /> <Item textValue="Jump to source"> <MenuItemLayout icon={<PlatformIcon icon="actions/editSource.svg" />} content="Jump to source" shortcut="⌘↓" /> </Item> </Menu> ); }} > <List selectionMode="single" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} > <Item key="start">start</Item> <Item key="build">build</Item> <Item key="test">test</Item> <Item key="deploy">deploy</Item> </List> </ContextMenuContainer> ); }

function ListContextMenuExample() {
  const [selectedKeys, setSelectedKeys] = useState(new Set());

  return (
    <ContextMenuContainer
      renderMenu={() => {
        const selectedKey = Array.from(selectedKeys)[0];
        if (!selectedKey) {
          return (
            <Menu>
              <Item>Nothing here</Item>
            </Menu>
          );
        }
        return (
          <Menu>
            <Item textValue={`Run '${selectedKey}'`}>
              <MenuItemLayout
                icon={<PlatformIcon icon="debugger/threadRunning.svg" />}
                content={`Run '${selectedKey}'`}
                shortcut="⇧⏎"
              />
            </Item>
            <Item textValue={`Debug '${selectedKey}'`}>
              <MenuItemLayout
                icon={<PlatformIcon icon="actions/startDebugger.svg" />}
                content={`Debug '${selectedKey}'`}
                shortcut="⌃⇧D"
              />
            </Item>
            <Item textValue={`Edit '${selectedKey}' Settings...`}>
              <MenuItemLayout
                icon={<PlatformIcon icon="actions/editSource.svg" />}
                content={`Edit '${selectedKey}' Settings...`}
              />
            </Item>
            <Divider />
            <Item textValue="Jump to source">
              <MenuItemLayout
                icon={<PlatformIcon icon="actions/editSource.svg" />}
                content="Jump to source"
                shortcut="⌘↓"
              />
            </Item>
          </Menu>
        );
      }}
    >
      <List
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        <Item key="start">start</Item>
        <Item key="build">build</Item>
        <Item key="test">test</Item>
        <Item key="deploy">deploy</Item>
      </List>
    </ContextMenuContainer>
  );
}

Advanced use

Custom list component with useList and useSpeedSearchList