Add horizontal scrolling to DataTable

components/DataTable/samples/DataTableVirtualizationSample.xaml

@@ -13,6 +13,8 @@
     <!--  We need to set height here to enable virtualization due to the SampleRenderer setup  -->
     <ListView Height="300"
               VerticalAlignment="Top"
+              ScrollViewer.HorizontalScrollMode="Enabled"
+              ScrollViewer.HorizontalScrollBarVisibility="Auto"
               ItemsSource="{x:Bind InventoryItems}">
         <ListView.Header>
             <Border Padding="8,4,0,4"
@@ -21,15 +23,18 @@
                 <interactivity:Interaction.Behaviors>
                     <behaviors:StickyHeaderBehavior />
                 </interactivity:Interaction.Behaviors>
-                <controls:DataTable ColumnSpacing="16">
+                <controls:DataTable ColumnSpacing="16"
+                    ScrollViewer.HorizontalScrollMode="Enabled"
+                    ScrollViewer.HorizontalScrollBarVisibility="Auto">
                     <controls:DataColumn Content="Id" />
                     <controls:DataColumn CanResize="True"
+                                         MinWidth="120"
                                          Content="Name" />
-                    <controls:DataColumn CanResize="True">
+                    <controls:DataColumn CanResize="True" MinWidth="120">
                         <TextBlock FontWeight="SemiBold"
                                    Text="Description" />
                     </controls:DataColumn>
-                    <controls:DataColumn Content="Quantity" />
+                    <controls:DataColumn Content="Quantity"  CanResize="True" MinWidth="120"/>
                 </controls:DataTable>
             </Border>
         </ListView.Header>

components/DataTable/src/DataTable/DataRow.cs

@@ -171,8 +171,9 @@ protected override Size MeasureOverride(Size availableSize)
             // TODO: What do we want to do if there's unequal children in the DataTable vs. DataRow?
         }
 
-        // Otherwise, return our parent's size as the desired size.
-        return new(_parentPanel?.DesiredSize.Width ?? availableSize.Width, maxHeight);
+        // Use the calculated desired width from the parent table if available, fallback to return our parent's size as the desired size
+        double desiredWidth = _parentTable?.CalculateDesiredWidth() ?? _parentPanel?.DesiredSize.Width ?? availableSize.Width;
+        return new Size(desiredWidth, maxHeight);
     }
 
     /// <inheritdoc/>

components/DataTable/src/DataTable/DataTable.cs

@@ -18,12 +18,34 @@ public partial class DataTable : Panel
     // TODO: Check with Sergio if there's a better structure here, as I don't need a Dictionary like ConditionalWeakTable
     internal HashSet<DataRow> Rows { get; private set; } = new();
 
+    internal double CalculateDesiredWidth()
+    {
+        double totalWidth = 0;
+        var elements = Children.Where(static e => e.Visibility == Visibility.Visible && e is DataColumn);
+
+        foreach (DataColumn column in elements.Cast<DataColumn>())
+        {
+            if (column.CurrentWidth.IsAbsolute)
+            {
+                totalWidth += column.CurrentWidth.Value;
+            }
+            else
+            {
+                totalWidth += Math.Max(column.DesiredSize.Width, column.MaxChildDesiredWidth);
+            }
+        }
+
+        totalWidth += Math.Max(0, elements.Count() - 1) * ColumnSpacing;
+        return totalWidth;
+    }
+
     internal void ColumnResized()
     {
         InvalidateArrange();
 
         foreach (var row in Rows)
         {
+            row.InvalidateMeasure();
             row.InvalidateArrange();
         }
     }