New Columns and columns visibility

frontend/src/config/pages/clusters.config.tsx

@@ -27,6 +27,7 @@ export interface ColumnConfig {
   align?: 'left' | 'center' | 'right';
   width?: string;
   render?: (value: any, row: any) => React.ReactNode;
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 export interface FormFieldConfig {
@@ -116,21 +117,24 @@ export const createClustersPageConfig = (
       {
         key: 'keywords_count',
         label: 'Keywords',
-        sortable: false,
+        sortable: true,
+        sortField: 'keywords_count',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
       {
         key: 'ideas_count',
         label: 'Ideas',
-        sortable: false,
+        sortable: true,
+        sortField: 'ideas_count',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
       {
         key: 'volume',
         label: 'Volume',
-        sortable: false,
+        sortable: true,
+        sortField: 'volume',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
@@ -138,7 +142,8 @@ export const createClustersPageConfig = (
         ...difficultyColumn,
         key: 'difficulty',
         label: 'Difficulty',
-        sortable: false,
+        sortable: true,
+        sortField: 'difficulty',
         align: 'center' as const,
         render: (value: number) => {
           const difficultyNum = getDifficultyNumber(value);
@@ -179,7 +184,8 @@ export const createClustersPageConfig = (
       {
         key: 'content_count',
         label: 'Content',
-        sortable: false,
+        sortable: true,
+        sortField: 'content_count',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
@@ -202,6 +208,36 @@ export const createClustersPageConfig = (
         sortField: 'created_at',
         render: (value: string) => formatRelativeDate(value),
       },
+      // Optional columns - hidden by default
+      {
+        key: 'description',
+        label: 'Description',
+        sortable: false,
+        defaultVisible: false,
+        width: '250px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[250px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'mapped_pages',
+        label: 'Mapped Pages',
+        sortable: true,
+        sortField: 'mapped_pages',
+        defaultVisible: false,
+        width: '120px',
+        render: (value: number) => value.toLocaleString(),
+      },
+      {
+        key: 'updated_at',
+        label: 'Updated',
+        sortable: true,
+        sortField: 'updated_at',
+        defaultVisible: false,
+        render: (value: string) => formatRelativeDate(value),
+      },
     ],
     filters: [
       {