New Columns and columns visibility

frontend/src/templates/TablePageTemplate.tsx

@@ -40,6 +40,7 @@ import BulkStatusUpdateModal from '../components/common/BulkStatusUpdateModal';
 import { CompactPagination } from '../components/ui/pagination';
 import { usePageSizeStore } from '../store/pageSizeStore';
 import ToggleTableRow, { ToggleButton } from '../components/common/ToggleTableRow';
+import ColumnSelector from '../components/common/ColumnSelector';
 
 interface ColumnConfig {
   key: string;
@@ -56,6 +57,7 @@ interface ColumnConfig {
   toggleable?: boolean; // If true, this column will have a toggle button for expanding content
   toggleContentKey?: string; // Key of the field containing content to display when toggled
   toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline")
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 interface FilterConfig {
@@ -223,6 +225,78 @@ export default function TablePageTemplate({
   const toast = useToast();
   const { pageSize, setPageSize } = usePageSizeStore();
 
+  // Column visibility state management with localStorage persistence
+  const getStorageKey = () => {
+    // Use pathname to create unique storage key per page
+    return `table-columns-${location.pathname}`;
+  };
+
+  // Initialize visible columns from localStorage or defaults
+  const initializeVisibleColumns = () => {
+    const storageKey = getStorageKey();
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const savedSet = new Set(JSON.parse(saved));
+        // Validate that all saved columns still exist
+        const validColumns = columns.filter(col => savedSet.has(col.key));
+        if (validColumns.length > 0) {
+          // Add any new columns with defaultVisible !== false
+          const newColumns = columns
+            .filter(col => !savedSet.has(col.key) && col.defaultVisible !== false)
+            .map(col => col.key);
+          return new Set([...Array.from(validColumns.map(col => col.key)), ...newColumns]);
+        }
+      }
+    } catch (e) {
+      // Ignore parse errors
+    }
+    // Default: show all columns that have defaultVisible !== false
+    return new Set(
+      columns
+        .filter(col => col.defaultVisible !== false)
+        .map(col => col.key)
+    );
+  };
+
+  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(initializeVisibleColumns);
+
+  // Update visible columns when columns prop changes (e.g., when switching pages)
+  useEffect(() => {
+    const newVisibleColumns = initializeVisibleColumns();
+    setVisibleColumns(newVisibleColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]); // Re-initialize when pathname changes
+
+  // Save to localStorage whenever visibleColumns changes
+  useEffect(() => {
+    const storageKey = getStorageKey();
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(Array.from(visibleColumns)));
+    } catch (e) {
+      // Ignore storage errors
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibleColumns, location.pathname]);
+
+  // Filter columns based on visibility
+  const visibleColumnsList = useMemo(() => {
+    return columns.filter(col => visibleColumns.has(col.key));
+  }, [columns, visibleColumns]);
+
+  // Toggle column visibility
+  const handleToggleColumn = (columnKey: string) => {
+    setVisibleColumns(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(columnKey)) {
+        newSet.delete(columnKey);
+      } else {
+        newSet.add(columnKey);
+      }
+      return newSet;
+    });
+  };
+
   // Sync selectedIds with selection prop
   // Use JSON.stringify to compare array contents, not just reference, to avoid unnecessary updates
   const selectedIdsKey = selection?.selectedIds ? JSON.stringify(selection.selectedIds) : '';
@@ -648,7 +722,17 @@ export default function TablePageTemplate({
         )}
         
         {/* Action Buttons - Right aligned */}
-        <div className="flex gap-2">
+        <div className="flex gap-2 items-center">
+          {/* Column Selector */}
+          <ColumnSelector
+            columns={columns.map(col => ({
+              key: col.key,
+              label: col.label,
+              defaultVisible: col.defaultVisible !== false,
+            }))}
+            visibleColumns={visibleColumns}
+            onToggleColumn={handleToggleColumn}
+          />
           {onExportCSV && (
             <Button
               variant="secondary"
@@ -706,8 +790,8 @@ export default function TablePageTemplate({
                     )}
                   </TableCell>
                 )}
-                {columns.map((column, colIndex) => {
-                  const isLastColumn = colIndex === columns.length - 1;
+                {visibleColumnsList.map((column, colIndex) => {
+                  const isLastColumn = colIndex === visibleColumnsList.length - 1;
                   return (
                     <TableCell
                       key={column.key}
@@ -736,7 +820,7 @@ export default function TablePageTemplate({
                 Array.from({ length: 10 }).map((_, index) => (
                   <TableRow key={`skeleton-${index}`} className="igny8-skeleton-row">
                     {selection && <TableCell><div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></TableCell>}
-                    {columns.map((_, colIndex) => (
+                    {visibleColumnsList.map((_, colIndex) => (
                       <TableCell key={colIndex}><div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></TableCell>
                     ))}
                   </TableRow>
@@ -760,7 +844,7 @@ export default function TablePageTemplate({
                   );
                   
                   // Calculate colSpan for toggle row
-                  const colSpan = (selection ? 1 : 0) + columns.length;
+                  const colSpan = (selection ? 1 : 0) + visibleColumnsList.length;
                   
                   const handleToggle = (expanded: boolean, id: string | number) => {
                     setExpandedRows(prev => {
@@ -795,8 +879,8 @@ export default function TablePageTemplate({
                             />
                           </TableCell>
                         )}
-                        {columns.map((column, colIndex) => {
-                          const isLastColumn = colIndex === columns.length - 1;
+                        {visibleColumnsList.map((column, colIndex) => {
+                          const isLastColumn = colIndex === visibleColumnsList.length - 1;
                           const rowId = row.id || index;
                           
                           // Get or create ref for this row's actions button