Is there an example of TaskListHeader、TaskListTable？

[sjzpengyuyan]

[MaTeMaTuK]

Hi @sjzpengyuyan , Please check the https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/task-list/task-list-header.tsx and https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/task-list/task-list-table.tsx

[jasonusdid]

Hi @MaTeMaTuK

Could you please provide a JS example of TaskListHeader/TaskListTable? I mean how to use them in JS project. As I'm using react JS but not familar TS...

Thanks

[jasonusdid]

Hi,

I have created an example of TaskListTable example with JS, but the expenderClick function not work, could you please help to take a look? Thanks a lot.

table.js: // begin import React from "react";

export const TaskListTableDefault = ({ rowHeight, rowWidth, tasks, fontFamily, fontSize, onExpanderClick, }) => { return ( <div style={{ fontFamily: fontFamily, fontSize: fontSize, }} > {tasks.map(t => { let expanderSymbol = ""; if (t.hideChildren === false) { expanderSymbol = "▼"; } else if (t.hideChildren === true) { expanderSymbol = "▶"; }

    return (
      <div
        style={{ height: rowHeight }}
        key={`${t.id}row`}
      >
        <div
          style={{
            minWidth: rowWidth,
            maxWidth: rowWidth,
          }}
          title={t.name}
        >
          <div>
            <div
              onClick={() => onExpanderClick(t)}
            >
              {expanderSymbol}
            </div>
            <div>{t.name}</div>
          </div>
        </div>
        <div
          style={{
            minWidth: rowWidth,
            maxWidth: rowWidth,
          }}
        >
          aaa
        </div>
        <div
          style={{
            minWidth: rowWidth,
            maxWidth: rowWidth,
          }}
        >
          bbb
        </div>
      </div>
    );
  })}
</div>

); };

In App.js: TaskListTable={() => <TaskListTableDefault tasks={tasks} onExpanderClick={handleTableExpanderClick}/>}