Tree List is used to display a list of items in a tree structure.

columns

withActions

() => {
  const [selection, setSelection] = useState({
    first: { one: false, two: true, three: false },
    second: { first: { one: true, two: true, three: true }, second: { one: true, two: true, three: true } },
    third: { one: false, two: false, three: false },
    fourth: { one: false, two: false, three: false }
  });

  const getSubSectionState = (section: Record<string, boolean>) => {
    const isIndeterminate = Object.values(section).some((value) => value);
    const isChecked = Object.values(section).every((value) => value);
    return {
      checked: isChecked || isIndeterminate,
      indeterminate: !isChecked && isIndeterminate
    };
  };

  const secondFirstState = getSubSectionState(selection.second.first);
  const secondSecondState = getSubSectionState(selection.second.second);

  const secondState = {
    checked: secondFirstState.checked || secondSecondState.checked,
    indeterminate:
      secondFirstState.indeterminate || secondSecondState.indeterminate || !secondFirstState.checked || !secondSecondState.checked
  };

  return (
    <Box flex="1">
      <TreeList>
        <TreeList.Item label="CALL_CENTER_DATA" description="Database properties if needed" icon={IconDatabase} open>
          <TreeList.Checkbox
            label="INFOMATION_SCHEMA"
            icon={IconLayer2}
            onChange={({ target: { checked } }) =>
              setSelection((prevState) => ({ ...prevState, first: { one: checked, two: checked, three: checked } }))
            }
            {...getSubSectionState(selection.first)}
          >
            <TreeList.Checkbox
              label="CALL_ID"
              icon={IconTextCapitalise}
              checked={selection.first.one}
              description="VARCHAR(256)"
              onChange={({ target: { checked } }) =>
                setSelection((prevState) => ({ ...prevState, first: { ...prevState.first, one: checked } }))
              }
            />
            <TreeList.Checkbox
              label="AGENT_ID"
              icon={IconTextCapitalise}
              checked={selection.first.two}
              onChange={({ target: { checked } }) =>
                setSelection((prevState) => ({ ...prevState, first: { ...prevState.first, two: checked } }))
              }
            />
            <TreeList.Checkbox
              label="CALL_START"
              icon={IconClock}
              checked={selection.first.three}
              onChange={({ target: { checked } }) =>
                setSelection((prevState) => ({ ...prevState, first: { ...prevState.first, three: checked } }))
              }
            />
          </TreeList.Checkbox>

          <TreeList.Checkbox
            label="PUBLIC"
            icon={IconLayer2}
            onChange={({ target: { checked } }) => {
              setSelection((prevState) => ({
                ...prevState,
                second: {
                  first: { ...prevState.second.first, one: checked, two: checked, three: checked },
                  second: { ...prevState.second.second, one: checked, two: checked, three: checked }
                }
              }));
            }}
            {...secondState}
            open
          >
            <TreeList.Checkbox
              label="CALLS"
              icon={IconDatabase}
              onChange={({ target: { checked } }) => {
                setSelection((prevState) => ({
                  ...prevState,
                  second: {
                    ...prevState.second,
                    first: { ...prevState.second.first, one: checked, two: checked, three: checked }
                  }
                }));
              }}
              {...secondFirstState}
              open
            >
              <TreeList.Checkbox
                label="CALL_ID"
                icon={IconTextCapitalise}
                checked={selection.second.first.one}
                onChange={({ target: { checked } }) =>
                  setSelection((prevState) => ({
                    ...prevState,
                    second: { ...prevState.second, first: { ...prevState.second.first, one: checked } }
                  }))
                }
              />
              <TreeList.Checkbox
                label="AGENT_ID"
                icon={IconTextCapitalise}
                checked={selection.second.first.two}
                onChange={(event) =>
                  setSelection((prevState) => ({
                    ...prevState,
                    second: { ...prevState.second, first: { ...prevState.second.first, two: event.target.checked } }
                  }))
                }
              />
              <TreeList.Checkbox
                label="CALL_START"
                icon={IconClock}
                checked={selection.second.first.three}
                onChange={(event) =>
                  setSelection((prevState) => ({
                    ...prevState,
                    second: { ...prevState.second, first: { ...prevState.second.first, three: event.target.checked } }
                  }))
                }
              />
            </TreeList.Checkbox>
            <TreeList.Checkbox
              label="TRANSCRIPTS"
              icon={IconDatabase}
              onChange={({ target: { checked } }) => {
                setSelection((prevState) => ({
                  ...prevState,
                  second: {
                    ...prevState.second,
                    second: { ...prevState.second.second, one: checked, two: checked, three: checked }
                  }
                }));
              }}
              {...secondSecondState}
            >
              <TreeList.Checkbox
                label="CALL_ID"
                checked={selection.second.second.one}
                onChange={(event) =>
                  setSelection((prevState) => ({
                    ...prevState,
                    second: { ...prevState.second, second: { ...prevState.second.second, one: event.target.checked } }
                  }))
                }
              />
              <TreeList.Checkbox
                label="AGENT_ID"
                checked={selection.second.second.two}
                onChange={(event) =>
                  setSelection((prevState) => ({
                    ...prevState,
                    second: { ...prevState.second, second: { ...prevState.second.second, two: event.target.checked } }
                  }))
                }
              />
              <TreeList.Checkbox
                label="CALL_START"
                checked={selection.second.second.three}
                onChange={(event) =>
                  setSelection((prevState) => ({
                    ...prevState,
                    second: { ...prevState.second, second: { ...prevState.second.second, three: event.target.checked } }
                  }))
                }
              />
            </TreeList.Checkbox>
          </TreeList.Checkbox>
        </TreeList.Item>
        <TreeList.Item label="CALL_CENTER_DATA" icon={IconDatabase}>
          <TreeList.Checkbox
            label="CALLS"
            icon={IconDatabase}
            onChange={({ target: { checked } }) =>
              setSelection((prevState) => ({ ...prevState, third: { one: checked, two: checked, three: checked } }))
            }
            {...getSubSectionState(selection.third)}
          >
            <TreeList.Checkbox
              label="CALL_ID"
              icon={IconTextCapitalise}
              checked={selection.third.one}
              onChange={(event) =>
                setSelection((prevState) => ({ ...prevState, third: { ...prevState.third, one: event.target.checked } }))
              }
            />
            <TreeList.Checkbox
              label="AGENT_ID"
              icon={IconTextCapitalise}
              checked={selection.third.two}
              onChange={(event) =>
                setSelection((prevState) => ({ ...prevState, third: { ...prevState.third, two: event.target.checked } }))
              }
            />
            <TreeList.Checkbox
              label="CALL_START"
              icon={IconClock}
              checked={selection.third.three}
              onChange={(event) =>
                setSelection((prevState) => ({ ...prevState, third: { ...prevState.third, three: event.target.checked } }))
              }
            />
          </TreeList.Checkbox>
        </TreeList.Item>
        <TreeList.Item label="CALL_CENTER_DATA" icon={IconDatabase}>
          <TreeList.Checkbox
            label="CALLS"
            icon={IconDatabase}
            {...getSubSectionState(selection.fourth)}
            onChange={({ target: { checked } }) =>
              setSelection((prevState) => ({ ...prevState, fourth: { one: checked, two: checked, three: checked } }))
            }
          >
            <TreeList.Checkbox
              label="CALL_ID"
              icon={IconTextCapitalise}
              checked={selection.fourth.one}
              onChange={(event) =>
                setSelection((prevState) => ({ ...prevState, fourth: { ...prevState.fourth, one: event.target.checked } }))
              }
            />
            <TreeList.Checkbox
              label="AGENT_ID"
              icon={IconTextCapitalise}
              checked={selection.fourth.two}
              onChange={(event) =>
                setSelection((prevState) => ({ ...prevState, fourth: { ...prevState.fourth, two: event.target.checked } }))
              }
            />
            <TreeList.Checkbox
              label="CALL_START"
              icon={IconClock}
              checked={selection.fourth.three}
              onChange={(event) =>
                setSelection((prevState) => ({ ...prevState, fourth: { ...prevState.fourth, three: event.target.checked } }))
              }
            />
          </TreeList.Checkbox>
        </TreeList.Item>

        <TreeList.Item label="CALL_CENTER_DATA" icon={IconDatabase}>
          <TreeList.Item label="CALLS" icon={IconDatabase}>
            <TreeList.Item label="CALL_ID" icon={IconTextCapitalise} />
            <TreeList.Item label="AGENT_ID" icon={IconTextCapitalise} />
            <TreeList.Item label="CALL_START" icon={IconClock} />
          </TreeList.Item>
        </TreeList.Item>
        <TreeList.Item label="CALL_CENTER_DATA" icon={IconDatabase} />
      </TreeList>
    </Box>
  );
}

TreeList

() => {
  const [description, setDescription] = useState<string>('This table stores information about customer calls.');
  const [synonyms, setSynonyms] = useState<string>('-');

  const columns = [
    'Description',
    <Typography>
      Synonyms{' '}
      <Typography fontWeight="medium" color="content.subtle.light" as="span">
        (comma-separated)
      </Typography>
    </Typography>
  ];

  return (
    <Box flex="1">
      <TreeList columns={columns} withActions>
        <TreeList.Item
          label="CALL_CENTER_DATA"
          icon={IconDatabase}
          action={<Button aria-label="Info" variant="ghost-subtle" icon={IconInformation} />}
          columns={
            <>
              <Cell>
                <Input
                  aria-label="Description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  variant="ghost"
                  autoGrow={8}
                />
              </Cell>
              <Cell>
                <Input
                  aria-label="Synonyms"
                  value={synonyms}
                  onChange={(e) => setSynonyms(e.target.value)}
                  variant="ghost"
                  autoGrow={8}
                />
              </Cell>
              <Cell>
                <Button aria-label="Info" variant="ghost-subtle" icon={IconCloseSmall} />
              </Cell>
            </>
          }
        >
          <TreeList.Item
            label="CALL_CENTER_DATA"
            icon={IconDatabase}
            columns={
              <>
                <Cell>
                  <Input
                    aria-label="Description"
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    variant="ghost"
                    autoGrow={8}
                  />
                </Cell>
                <Cell>
                  <Input
                    aria-label="Synonyms"
                    value={synonyms}
                    onChange={(e) => setSynonyms(e.target.value)}
                    variant="ghost"
                    autoGrow={8}
                  />
                </Cell>
                <Cell>
                  <Button aria-label="Info" variant="ghost-subtle" icon={IconCloseSmall} />
                </Cell>
              </>
            }
          />
        </TreeList.Item>
      </TreeList>
    </Box>
  );
}

TreeView component can be used to display a grid like layout by defining the \`columns\` property.


Tree List component

Grid

Name	Description	Default
columns		-
withActions		-