Skip to main content

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>

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>

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>
  );
}

Advanced use​

Custom list component with useList and useSpeedSearchList​