How to get tree indent on a column besides select column? #83

aubsparrow · 2022-10-17T21:51:59Z

aubsparrow
Oct 17, 2022

I have a tree table and I have the treeYLevel set to 1 but the indent is happening on the select column instead of the name column. How do I fix this?

Answered by rwieruch

Oct 18, 2022

Does it look like this?

() => {
  const data = { nodes };

  const select = useRowSelect(data, {}, {});

  const tree = useTree(
    data,
    {},
    {
      treeYLevel: 1,
    }
  );

  return (
    <Table
      data={data}
      select={select}
      tree={tree}
    >
      {(tableList) => (
        <>
          <Header>
            <HeaderRow>
              <HeaderCellSelect />
              <HeaderCell>Task</HeaderCell>
              <HeaderCell>Deadline</HeaderCell>
              <HeaderCell>Type</HeaderCell>
              <HeaderCell>Complete</HeaderCell>
              <HeaderCell>Tasks</HeaderCell>
            </HeaderRow>
          </Header>

          <Body>
            {tableLi…

View full answer

rwieruch · 2022-10-18T06:44:54Z

rwieruch
Oct 18, 2022
Maintainer

Does it look like this?

() => {
  const data = { nodes };

  const select = useRowSelect(data, {}, {});

  const tree = useTree(
    data,
    {},
    {
      treeYLevel: 1,
    }
  );

  return (
    <Table
      data={data}
      select={select}
      tree={tree}
    >
      {(tableList) => (
        <>
          <Header>
            <HeaderRow>
              <HeaderCellSelect />
              <HeaderCell>Task</HeaderCell>
              <HeaderCell>Deadline</HeaderCell>
              <HeaderCell>Type</HeaderCell>
              <HeaderCell>Complete</HeaderCell>
              <HeaderCell>Tasks</HeaderCell>
            </HeaderRow>
          </Header>

          <Body>
            {tableList.map((item) => (
              <Row key={item.id} item={item}>
                <CellSelect item={item} />
                <CellTree item={item}>{item.name}</CellTree>
                <Cell>
                  {item.deadline.toLocaleDateString("en-US", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                  })}
                </Cell>
                <Cell>{item.type}</Cell>
                <Cell>{item.isComplete.toString()}</Cell>
                <Cell>{item.nodes ? item.nodes.length : ""}</Cell>
              </Row>
            ))}
          </Body>
        </>
      )}
    </Table>
  );
};

1 reply

aubsparrow Nov 1, 2022
Author

This was a typo on my part, got it working, thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to get tree indent on a column besides select column? #83

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

How to get tree indent on a column besides select column? #83

aubsparrow Oct 17, 2022

Replies: 1 comment · 1 reply

rwieruch Oct 18, 2022 Maintainer

aubsparrow Nov 1, 2022 Author

aubsparrow
Oct 17, 2022

Replies: 1 comment 1 reply

rwieruch
Oct 18, 2022
Maintainer

aubsparrow Nov 1, 2022
Author