Finished to enable add info icon with the Heading

Author: Jing Huang

src/components/Table/Table.tsx

@@ -45,7 +45,7 @@ const Table: React.FC<TableProps> = ({
   tableSize = { span: 12, offset: 0 },
   renderSubComponent,
   getRowCanExpand,
-  disableGlobalFilter = false, // // Disable the Global Search
+  disableGlobalFilter = false, // Disable the Global Search
 }) => {
   const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -200,6 +200,13 @@ const Table: React.FC<TableProps> = ({
                               }}
                             >
                               {flexRender(header.column.columnDef.header, header.getContext())}
+                              {header.column.columnDef.comment ? (
+                                <img
+                                  src="assets/icons/info.png"
+                                  alt="Review Grade"
+                                  title={header.column.columnDef.comment}
+                                />
+                              ) : null}
                               {{
                                 asc: " 🔼",
                                 desc: " 🔽",
@@ -255,4 +262,4 @@ const Table: React.FC<TableProps> = ({
   );
 };
 
-export default Table;
+export default Table;

src/pages/StudentTasks/StudentTasks.tsx

@@ -115,7 +115,11 @@ const StudentTasks: React.FC = () => {
         ),
     },
     ...(showBadges ? [{ accessorKey: "badges", header: "Badges" }] : []),
-    { accessorKey: "stageDeadline", header: "Stage Deadline" },
+    {
+      accessorKey: "stageDeadline",
+      header: "Stage Deadline",
+      comment: "'You can change 'Preferred Time Zone' in 'Profile' in the banner.",
+    },
     {
       accessorKey: "publishingRights",
       header: "Publishing Rights",
@@ -126,6 +130,7 @@ const StudentTasks: React.FC = () => {
           onChange={() => togglePublishingRights(Number(info.row.original.id))}
         />
       ),
+      comment: "Grant publishing rights",
     },
   ].map(({ header, ...rest }) => ({
     ...rest,