Name
@@ -39,7 +53,7 @@ export const TaskListHeaderDefault: React.FC<{
From
@@ -54,11 +68,31 @@ export const TaskListHeaderDefault: React.FC<{
To
+ {/* Render extra column headers */}
+ {extraColumns.map((column) => (
+
+
+
+ {column.title}
+
+
+ ))}
);
diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx
index 1be97f303..761b0155f 100644
--- a/src/components/task-list/task-list-table.tsx
+++ b/src/components/task-list/task-list-table.tsx
@@ -1,6 +1,6 @@
import React, { useMemo } from "react";
import styles from "./task-list-table.module.css";
-import { Task } from "../../types/public-types";
+import { Task, ExtraColumn, DateFormat } from "../../types/public-types";
const localeDateStringCache: { [key: string]: string } = {};
const toLocaleDateStringFactory =
@@ -14,6 +14,11 @@ const toLocaleDateStringFactory =
}
return lds;
};
+
+const toISODateString = (date: Date): string => {
+ return date.toISOString().split("T")[0]; // Returns yyyy-MM-dd format
+};
+
const dateTimeOptions: Intl.DateTimeFormatOptions = {
weekday: "short",
year: "numeric",
@@ -31,6 +36,11 @@ export const TaskListTableDefault: React.FC<{
selectedTaskId: string;
setSelectedTask: (taskId: string) => void;
onExpanderClick: (task: Task) => void;
+ extraColumns?: ExtraColumn[];
+ nameColumnWidth?: string;
+ fromColumnWidth?: string;
+ toColumnWidth?: string;
+ dateFormat?: DateFormat;
}> = ({
rowHeight,
rowWidth,
@@ -39,12 +49,24 @@ export const TaskListTableDefault: React.FC<{
fontSize,
locale,
onExpanderClick,
+ extraColumns = [],
+ nameColumnWidth,
+ fromColumnWidth,
+ toColumnWidth,
+ dateFormat = "locale",
}) => {
const toLocaleDateString = useMemo(
() => toLocaleDateStringFactory(locale),
[locale]
);
+ const formatDate = useMemo(() => {
+ if (dateFormat === "iso8601") {
+ return toISODateString;
+ }
+ return (date: Date) => toLocaleDateString(date, dateTimeOptions);
+ }, [dateFormat, toLocaleDateString]);
+
return (
@@ -92,21 +114,38 @@ export const TaskListTableDefault: React.FC<{
- {toLocaleDateString(t.start, dateTimeOptions)}
+ {formatDate(t.start)}
- {toLocaleDateString(t.end, dateTimeOptions)}
+ {formatDate(t.end)}
+ {/* Render extra column values */}
+ {extraColumns.map((column) => (
+
+ {column.render
+ ? column.render(t)
+ : t.extraColumns?.[column.key] || ""
+ }
+
+ ))}
);
})}
diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx
index 1ad0bf946..a5e19fcce 100644
--- a/src/components/task-list/task-list.tsx
+++ b/src/components/task-list/task-list.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useRef } from "react";
import { BarTask } from "../../types/bar-task";
-import { Task } from "../../types/public-types";
+import { Task, ExtraColumn, DateFormat } from "../../types/public-types";
export type TaskListProps = {
headerHeight: number;
@@ -17,11 +17,20 @@ export type TaskListProps = {
selectedTask: BarTask | undefined;
setSelectedTask: (task: string) => void;
onExpanderClick: (task: Task) => void;
+ extraColumns?: ExtraColumn[];
+ nameColumnWidth?: string;
+ fromColumnWidth?: string;
+ toColumnWidth?: string;
+ dateFormat?: DateFormat;
TaskListHeader: React.FC<{
headerHeight: number;
rowWidth: string;
fontFamily: string;
fontSize: string;
+ extraColumns?: ExtraColumn[];
+ nameColumnWidth?: string;
+ fromColumnWidth?: string;
+ toColumnWidth?: string;
}>;
TaskListTable: React.FC<{
rowHeight: number;
@@ -33,6 +42,11 @@ export type TaskListProps = {
selectedTaskId: string;
setSelectedTask: (taskId: string) => void;
onExpanderClick: (task: Task) => void;
+ extraColumns?: ExtraColumn[];
+ nameColumnWidth?: string;
+ fromColumnWidth?: string;
+ toColumnWidth?: string;
+ dateFormat?: DateFormat;
}>;
};
@@ -51,6 +65,11 @@ export const TaskList: React.FC