frontend fully integreated with the backend

distribution_fe/components/shared/data-table/table-toolbar.tsx

@@ -46,6 +46,7 @@ export function TableToolbar<T>({
   onClearSelection,
 }: TableToolbarProps<T>) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const toggleableColumns = columns.filter(col => col.hideable !== false);
 
   return (
     <div className="flex items-center gap-2 p-3 border-b">
@@ -91,7 +92,7 @@ export function TableToolbar<T>({
           Columns
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-48">
-          {columns.map(col => (
+          {toggleableColumns.map(col => (
             <DropdownMenuCheckboxItem
               key={col.key}
               checked={!hiddenColumns.has(col.key)}