preface

The team needs to make some Gantt charts based on Jira Issue to facilitate work scheduling, work statistics, etc.

Those who are interested can check out the ~ link

Combined with ANTD, find a wave of components, feel the antD tree is the closest, but the style is not quite consistent, you can only transform yourself, let’s have a look at the effect:

The tree component supports the following functions:

  1. Scroll up and down to show the hierarchical relationship of data
  2. Click drop to load on demand
  3. Supports drag and drop to change the location of specified data

Ask you a sweet is not sweet, I feel very sweet 😂😂

implementation

If you want to implement a table with a header like a table, but also rows and columns, the first thing you can think of is grid layout Col Row

Construct columns from table

interface Columns {
  value: string // dataIndexTitle: string/ / header labelspan? : number// How many Spaces? There are 24 Spaces in a rowoffset? : number// How many Spaces are offset
}
const cols = [
  {
    value: 'type'.title: 'Type'.span: 1.5}, {value: 'key'.title: 'key'.span: 4}, {value: 'summary'.title: 'Summary'.span: 7}, {value: 'startDate'.title: 'Start Date'.span: 4}, {value: 'endDate'.title: 'End Date'.span: 4}, {value: 'status'.title: 'Status'.span: 3,},];Copy the code

To generate the header

<Row className="tableHeader" align="middle" gutter={12}>
    {columns.map(({ value, title, ... rest }) = > (
        <Col key={value} {. rest} className={value}>
            {title}
         </Col>
     ))}
</Row>
Copy the code

To generate the tree

const getTreeData = (event) = > {
    const result = [];
  const fn = (list, parentId, target, count) = > {
    list.forEach((item) = > {
      // Calculate the current level
      const sCount = count < 0 ? 0 : count - 1;
      const children = [];
      const task = {
        title: (
          <Row
            align="middle"// The deeper the hierarchypaddingAbout bigstyle={{ paddingLeft:` ${sCount * 24}px`}}gutter={{ xs: 8.sm: 12 }}
          >{columns.map(({ value, title, ... rest }) => (<Col
                  key={title}
                  {. rest}
                  style={{
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    textOverflow: "ellipsis}} ">
                  {item[value]}
                </Col>
              ))}
            </Row>
          ),
          isLeaf: false.key: `${item.id}_${parentId}_${item.id}`,
          children
        };
        target.push(task);
        if (item.children) fn(item.children, item.id, children, sCount);
      });
    };
    fn(event, 0, result, 3);
    return result;
  };

<Tree
   treeData={data}// Load functions on demandloadData={onLoadData}// The listener startsonExpand={handleExpand}// Listen for selectiononSelect={handleSelect}
  autoExpandParent={false}
/>
Copy the code

link

antd-design