Auto Size Utilities

import { 
  calculateAutoSize, 
  autoSizeAllColumns,
} from '@workspace/active-grid';

calculateAutoSize(
  table: Table<TData>,
  column: Column<TData>,
  options?: AutoSizeOptions
): number

interface AutoSizeOptions {
  minWidth?: number;      // Minimum width (default: 80)
  maxWidth?: number;      // Maximum width (default: 800)
  padding?: number;       // Extra padding (default: 32)
  includeHeader?: boolean; // Include header in calculation (default: true)
}

import { calculateAutoSize } from '@workspace/active-grid';

function AutoSizeButton({ column }) {
  const table = useActiveGrid();
  
  const handleAutoSize = () => {
    const optimalWidth = calculateAutoSize(table, column, {
      minWidth: 80,
      maxWidth: 400,
      padding: 32,
      includeHeader: true,
    });
    
    column.setSize(optimalWidth);
  };
  
  return <Button onClick={handleAutoSize}>Auto-size</Button>;
}

const width = calculateAutoSize(table, column, {
  minWidth: 100,
  maxWidth: 600,
  padding: 40,
  includeHeader: true,
});

column.setSize(width);

autoSizeAllColumns(
  table: Table<TData>,
  options?: AutoSizeOptions
): void

import { autoSizeAllColumns } from '@workspace/active-grid';

function AutoSizeAllButton() {
  const table = useActiveGrid();
  
  const handleAutoSizeAll = () => {
    autoSizeAllColumns(table, {
      minWidth: 80,
      maxWidth: 400,
      padding: 32,
      includeHeader: true,
    });
  };
  
  return <Button onClick={handleAutoSizeAll}>Auto-size All</Button>;
}

function UsersTable() {
  const table = useActiveGrid();
  
  useEffect(() => {
    // Auto-size all columns after data loads
    autoSizeAllColumns(table);
  }, [table]);
  
  return <ActiveGrid {...} />;
}

<ActiveGrid
  columns={columns}
  data={data}
  headerMenu={{
    showAutoSize: true, // Enable auto-size in header menu
  }}
  {...}
/>

function CustomAutoSizeButton() {
  const table = useActiveGrid();
  
  const handleAutoSize = () => {
    autoSizeAllColumns(table, {
      minWidth: 100,
      maxWidth: 500,
      padding: 40,
    });
    
    toast.success('Columns auto-sized');
  };
  
  return (
    <Button variant="outline" size="sm" onClick={handleAutoSize}>
      <Maximize className="mr-2 h-4 w-4" />
      Auto-size Columns
    </Button>
  );
}

function ColumnAutoSize({ column }) {
  const table = useActiveGrid();
  
  const handleAutoSize = () => {
    const width = calculateAutoSize(table, column);
    column.setSize(width);
  };
  
  return (
    <Button size="sm" variant="ghost" onClick={handleAutoSize}>
      Fit Content
    </Button>
  );
}

{
  accessorKey: 'description',
  header: ({ column }) => (
    <div
      onDoubleClick={() => {
        const width = calculateAutoSize(table, column);
        column.setSize(width);
      }}
    >
      Description
    </div>
  ),
}

function AutoSizeSelected() {
  const table = useActiveGrid();
  
  const handleAutoSize = () => {
    const columnsToSize = ['name', 'email', 'status'];
    
    columnsToSize.forEach(id => {
      const column = table.getColumn(id);
      if (column) {
        const width = calculateAutoSize(table, column);
        column.setSize(width);
      }
    });
  };
  
  return <Button onClick={handleAutoSize}>Auto-size Selected</Button>;
}

const columns: GridColumnDef<User>[] = [
  {
    accessorKey: 'actions',
    header: 'Actions',
    size: 100,
    meta: {
      suppressSizeToFit: true, // Exclude from auto-sizing
    },
  },
];

function ConstrainedAutoSize() {
  const table = useActiveGrid();
  
  const handleAutoSize = () => {
    table.getAllColumns().forEach(column => {
      // Skip certain columns
      if (column.id === 'actions' || column.id === 'select') {
        return;
      }
      
      const width = calculateAutoSize(table, column, {
        minWidth: column.columnDef.minSize || 80,
        maxWidth: column.columnDef.maxSize || 400,
      });
      
      column.setSize(width);
    });
  };
  
  return <Button onClick={handleAutoSize}>Smart Auto-size</Button>;
}

function ResponsiveTable() {
  const [data, setData] = useState<User[]>([]);
  const table = useActiveGrid();
  
  useEffect(() => {
    // Auto-size when data changes
    if (data.length > 0) {
      autoSizeAllColumns(table);
    }
  }, [data, table]);
  
  return <ActiveGrid data={data} {...} />;
}