move editable attribute to table Component

src/frontend/src/components/tableComponent/index.tsx

@@ -17,6 +17,7 @@ interface TableComponentProps extends AgGridReactProps {
   rowData: NonNullable<AgGridReactProps["rowData"]>;
   alertTitle?: string;
   alertDescription?: string;
+  editable?: boolean | string[];
 }
 
 const TableComponent = forwardRef<
@@ -48,20 +49,30 @@ const TableComponent = forwardRef<
     }
 
     const colDef = props.columnDefs.map((col, index) => {
+      let newCol = {
+        ...col,
+        headerName: toTitleCase(col.headerName),
+      };
       if (props.onSelectionChanged && index === 0) {
-        return {
+        newCol = {
-          ...col,
+          ...newCol,
-          headerName: toTitleCase(col.headerName),
           checkboxSelection: true,
           headerCheckboxSelection: true,
           headerCheckboxSelectionFilteredOnly: true,
         };
-      } else {
+      }
-        return {
+      console.log(props.editable, col.headerName);
-          ...col,
+      if (
-          headerName: toTitleCase(col.headerName),
+        (typeof props.editable === "boolean" && props.editable) ||
+        (Array.isArray(props.editable) &&
+          props.editable.includes(newCol.headerName ?? ""))
+      ) {
+        newCol = {
+          ...newCol,
+          editable: true,
         };
       }
+      return newCol;
     });
 
     return (

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx

@@ -7,7 +7,7 @@ const useMessagesTable = (setColumns, setRows, setMessages) => {
       try {
         const data = await getMessagesTable("union", undefined, ["index"]);
         const { columns, rows } = data;
-        setColumns(columns.map((col) => ({ ...col, editable: true })));
+        setColumns(columns);
         setRows(rows);
         setMessages(rows);
       } catch (error) {

src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx

@@ -40,6 +40,7 @@ export default function MessagesPage() {
         <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
           <CardContent className="h-full">
             <TableComponent
+              editable={["Sender", "Sender Name", "Message"]}
               overlayNoRowsTemplate="No data available"
               onSelectionChanged={(event: SelectionChangedEvent) => {
                 setSelectedRows(