[Experiment] 🧪 DataTable Initial Prototype #418

michael-hawker · 2023-04-12T08:00:23Z

Implements #415

Wrote up all details of current prototype and to dos here: #415 (comment)

Tested on Win10 with UWP and WinUI 3.

(Uno WASM won't work due to ItemsPresenter not supporting Header/Footer, see Uno links in discussion above)

Want to fix the following before committing:

resizable columns
sample with many rows
how the layout interacts for the 'Auto' sized columns
how do columns that get resized behave
how to account for different padding/alignment of different parent controls
P2: Make a sample with sticky header
P2: Sample with blank headers, just columns in rows?

michael-hawker · 2023-04-14T18:27:57Z

Hmm.. interesting we're hitting Uno0001 errors:

"D:\a\Labs-Windows\Labs-Windows\CommunityToolkit.AllComponents.sln" (default target) (1:2) ->
"D:\a\Labs-Windows\Labs-Windows\components\DataTable\samples\DataTable.Samples.csproj" (default target) (6:39) ->
"D:\a\Labs-Windows\Labs-Windows\components\DataTable\samples\DataTable.Samples.csproj" (Build target) (6:51) ->
"D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\CommunityToolkit.WinUI.Controls.DataTable.csproj" (default target) (7:75) ->
  D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\Uno.UI.SourceGenerators\Uno.UI.SourceGenerators.XamlGenerator.XamlCodeGenerator\HeaderedItemsControl_3b991c3e61b47b1397f01a80384c3484.cs(158,6): error Uno0001: Windows.UI.Xaml.Controls.ItemsPresenter.FooterProperty is not implemented in Uno [D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\CommunityToolkit.WinUI.Controls.DataTable.csproj]
  D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\Uno.UI.SourceGenerators\Uno.UI.SourceGenerators.XamlGenerator.XamlCodeGenerator\HeaderedItemsControl_3b991c3e61b47b1397f01a80384c3484.cs(166,6): error Uno0001: Windows.UI.Xaml.Controls.ItemsPresenter.FooterTemplateProperty is not implemented in Uno [D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\CommunityToolkit.WinUI.Controls.DataTable.csproj]
  D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\Uno.UI.SourceGenerators\Uno.UI.SourceGenerators.XamlGenerator.XamlCodeGenerator\HeaderedItemsControl_3b991c3e61b47b1397f01a80384c3484.cs(174,6): error Uno0001: Windows.UI.Xaml.Controls.ItemsPresenter.HeaderProperty is not implemented in Uno [D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\CommunityToolkit.WinUI.Controls.DataTable.csproj]
  D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\Uno.UI.SourceGenerators\Uno.UI.SourceGenerators.XamlGenerator.XamlCodeGenerator\HeaderedItemsControl_3b991c3e61b47b1397f01a80384c3484.cs(182,6): error Uno0001: Windows.UI.Xaml.Controls.ItemsPresenter.HeaderTemplateProperty is not implemented in Uno [D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\CommunityToolkit.WinUI.Controls.DataTable.csproj]
  D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\DataTable\DataRow.cs(24,17): error Uno0001: Windows.UI.Xaml.Controls.ItemsPresenter.Header is not implemented in Uno [D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\CommunityToolkit.WinUI.Controls.DataTable.csproj]
  D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\DataTable\DataRow.cs(26,24): error Uno0001: Windows.UI.Xaml.Controls.ItemsPresenter.Header is not implemented in Uno [D:\a\Labs-Windows\Labs-Windows\components\DataTable\src\CommunityToolkit.WinUI.Controls.DataTable.csproj]

Oh, I didn't make this multi-target only UWP/WinAppSDK... maybe I should do that just for now?

michael-hawker · 2023-06-16T18:11:36Z

Ran XAML Styler, missed some things when adding the tree test before apparently.

Also have a test case and logic working for auto-sized columns (doesn't work with resizing interaction yet). But seems to work in simple case.

Need to add a sample with more rows and varying length data width to see how it really works in practice. That's my next step I think.

michael-hawker · 2023-06-21T22:46:20Z

Thinking to deal with the various padding options, I may be able to look at the position of the first item in the row in relation to the position of the DataTable column (with the positioning/coordinate APIs in the composition layer we have extensions for).

I think this would mean we could factor it in without having to worry about built-in container padding or developer padding, and possible would work well for TreeView and the indentation padding in the first row, we could get the other columns to ignore it after in the layout pass, maybe... Needs more investigation for that last bit.

michael-hawker · 2023-06-21T23:16:10Z

components/DataTable/src/DataTable/DataTable.cs

+    // 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 void ColumnResized()
+    {
+        InvalidateArrange();
+
+        foreach (var row in Rows)
+        {
+            row.InvalidateArrange();
+        }
+    }


@Sergio0694 wanted to check in with you here, as my instinct was a ConditionalWeakTable for safety of reference holding. Though I have the DataRow class remove itself on Unloaded (though we know how that is in the XAML lifecycle). Right now, I was just trying to get the layout logic to work, and I think that's in a good place now.

Theoretically these should all be owned by the same parent, so not sure if that would cause problems with reference counts. Realizing though that I should probably have the DataRow grab a WeakReference to the parent too...

What are your thoughts on this connection? Thanks!

I think I'm missing some context on who's keeping alive what. As in, if this is just some internal data structure for a control, I'm not necessarily seeing an issue with it tracking other things and objects it needs. Even if there's some reference cycle, the GC is completely able to handle that. Is there some global (static) state being involved here that's worrying you? Or, could you explain in simple terms what the relationship is between the various components here so I can better understand the scenario and what you're thinking might cause problems? 🙂

michael-hawker · 2023-06-23T23:09:34Z

Alright, auto-sizing columns effectively works. Layout becomes a bit unstable when adjusting columns, so not sure how kosher that is. Not sure how we can account for that better though to fix. Performance seems fine though. I did try to debounce, but then it wasn't updating layout at all in-between, so it was either all or nothing it seems.

Looking into the auto-detect padding... that seems difficult as we can sometimes detect it using the composition layer coordinates positioning in the Arrange step, but that's pretty late. We'd have to invalidate arrange and re-layout possible for a third time (2nd from auto-sizing columns, though that gets triggered much earlier).

And I think the padding from TreeView is outside the DataRow itself, effectively a variable margin that appears on certain rows, and it didn't always appear detectable upon expansion of a node... So, definitely some tricky stuff there, still haven't really discovered what that space/width/margin is a part of in the construct of the TreeViewItem... That could help figuring out where it is to at least try and detect it more concretely, but then that's a special case for TreeView.

michael-hawker · 2023-06-23T23:10:48Z

@Arlodotexe it's trying to run the WASM head on the package, but I turned the multi-target to just uwp/wasdk in the src project... or I have to update the sample one too, eh?

michael-hawker · 2023-07-01T00:41:48Z

For now, manually added margin to DataTable in each sample to align columns between containers. We could introduce an Offset property maybe that when unset does some 'auto-detection'? Or maybe tries to lookup resource values (though that's tricky). Needs more thought, for now we can get the PoC in folks hands and gather feedback?

'Tree Table' is working now, which is really awesome!

Just should add the sticky header behavior to the virtualization sample for completeness.

michael-hawker · 2023-07-01T00:42:40Z

@Arlodotexe I'm still missing something to make this work for only uwp/wasdk with the build... is that documented somewhere yet? I added multitarget props to the source and samples... thought that'd be it?

michael-hawker · 2023-07-01T01:06:02Z

Stack trace from resizing a column too far to the right:

System.ArgumentOutOfRangeException: Non-negative number required.
Parameter name: width
   at Windows.Foundation.Rect..ctor(Double x, Double y, Double width, Double height)
   at CommunityToolkit.WinUI.Controls.DataTable.ArrangeOverride(Size finalSize) in H:\code\Labs-WCT\components\DataTable\src\DataTable\DataTable.cs:line 125

Arlodotexe · 2023-07-07T22:33:56Z

@Arlodotexe I'm still missing something to make this work for only uwp/wasdk with the build... is that documented somewhere yet? I added multitarget props to the source and samples... thought that'd be it?

Your MultiTarget files look good. At first glance, this appears related to CommunityToolkit/Tooling-Windows-Submodule#5, but we already have components that do this. It shouldn't be causing any issues here 🤔

@michael-hawker Just a hunch, try removing the MultiTarget.props from your sample project and let it inherit from the source project like we do with the others.

michael-hawker · 2023-07-07T23:36:18Z

@michael-hawker Just a hunch, try removing the MultiTarget.props from your sample project and let it inherit from the source project like we do with the others.

Thought I had tried that... will see though on next go-around.

michael-hawker · 2023-07-17T18:54:17Z

Waiting on CommunityToolkit/Windows#136

michael-hawker · 2023-07-17T20:33:48Z

Thanks @Arlodotexe, just waiting for packages from Behaviors, then can apply local patch to add Sticky Header to the virtualization sample and we'll call this good for 'V1'... 🙂

michael-hawker · 2023-07-17T22:52:25Z

Sticky Header works, though not perfect as default style is Transparent, added a border for now (which was a cool scenario to test anyway), and it works fine.

There'll be more clean-up to do with this and how it works in the future anyway.

@niels9001 suggested a helper maybe for the items panel to fade the top away on scrolling with some sort of gradient brush maybe... something to investigate later.

So this is ready to go then otherwise, just needs a sign-off.

Arlodotexe · 2023-07-19T18:38:08Z

I'm seeing this error in the console on WASM. UWP and WinAppSDK seem okay.

Unhandled Exception:
put_char @ dotnet.js:2360
dotnet.js:2360 System.Collections.Generic.KeyNotFoundException: The given key 'ListViewTableSample' was not present in the dictionary.
put_char @ dotnet.js:2360
dotnet.js:2360    at System.Collections.Generic.Dictionary`2[[System.String, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[CommunityToolkit.Tooling.SampleGen.Metadata.ToolkitSampleMetadata, CommunityToolkit.Tooling.SampleGen, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].get_Item(String key) in D:\a\Uno.DotnetRuntime.WebAssembly\Uno.DotnetRuntime.WebAssembly\runtime\src\libraries\System.Private.CoreLib\src\System\Collections\Generic\Dictionary.cs:line 199
put_char @ dotnet.js:2360
dotnet.js:2360    at CommunityToolkit.App.Shared.Renderers.ToolkitDocumentationRenderer.LoadData() in D:\source\uwp\lib\Labs-Windows\tooling\CommunityToolkit.App.Shared\Renderers\ToolkitDocumentationRenderer.xaml.cs:line 110
put_char @ dotnet.js:2360
dotnet.js:2360    at CommunityToolkit.App.Shared.Renderers.ToolkitDocumentationRenderer.OnMetadataPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs args) in D:\source\uwp\lib\Labs-Windows\tooling\CommunityToolkit.App.Shared\Renderers\ToolkitDocumentationRenderer.xaml.cs:line 85
put_char @ dotnet.js:2360
dotnet.js:2360    at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_1(Object state) in D:\a\Uno.DotnetRuntime.WebAssembly\Uno.DotnetRuntime.WebAssembly\runtime\src\libraries\System.Private.CoreLib\src\System\Threading\Tasks\Task.cs:line 1917
put_char @ dotnet.js:2360
dotnet.js:2360    at System.Threading.QueueUserWorkItemCallbackDefaultContext.Execute() in D:\a\Uno.DotnetRuntime.WebAssembly\Uno.DotnetRuntime.WebAssembly\runtime\src\libraries\System.Private.CoreLib\src\System\Threading\ThreadPoolWorkQueue.cs:line 976
put_char @ dotnet.js:2360
dotnet.js:2360    at System.Threading.ThreadPoolWorkQueue.Dispatch() in D:\a\Uno.DotnetRuntime.WebAssembly\Uno.DotnetRuntime.WebAssembly\runtime\src\libraries\System.Private.CoreLib\src\System\Threading\ThreadPoolWorkQueue.cs:line 724
put_char @ dotnet.js:2360
dotnet.js:2360    at System.Threading.ThreadPool.Callback() in D:\a\Uno.DotnetRuntime.WebAssembly\Uno.DotnetRuntime.WebAssembly\runtime\src\mono\System.Private.CoreLib\src\System\Threading\ThreadPool.Browser.Mono.cs:line 119
put_char @ dotnet.js:2360
dotnet.js:2360 ThreadPool Callback threw an unhandled exception of type System.Collections.Generic.KeyNotFoundException

michael-hawker · 2023-07-19T18:44:51Z

@Arlodotexe these don't work on WASM... so expected - see multi-target. They just show up as we have that other issue open: CommunityToolkit/Tooling-Windows-Submodule#5

michael-hawker · 2023-07-19T18:48:43Z

Our transient test failure again... will re-run once others done. Probably something need to investigate later.

michael-hawker · 2023-07-19T22:39:19Z

Test are constantly dying after 3 attempts on this one, not sure why. Opened up a runner issue to start a conversation as that's the only thing I can think that's changed (as we haven't modified our tests themselves in the last while): actions/runner-images#7937

Only extra change on this PR is the upgraded package version of the extensions, though we've been seeing this test failure before that was released...

…t supposed to work...) Will have to see how it runs in the CI and after I've rebooted VS...

Invalidate Arrange of children when column autosizes - auto size works! Test virtualization with more items, works too!

…aRow connection

… of similar name

…tainer... need to investigate, adding a TODO comment for now

…taTable Looks explicitly for the MultiSelectGrid which drives the indentation/gutter size for TreeViewItem

Add manual margins to samples for alignment between different containers Add more depth to tree table example

Fix test relying on it, see CommunityToolkit/Tooling-Windows-Submodule#101

For now add a solid background, would be nice to have a fadebehavior on the items panel to fade behind the sticky header that's transparent still...

…rios Fixes a bug/issue with a Row's Height not being properly calculated, which was not only pivotal for this scenario but would have caused issues in practical usage of all other scenarios as well.

michael-hawker · 2023-08-01T23:00:33Z

Alright, rebased on the clean tooling build/infrastructure we have which is building on main fine, so hopefully we should be all clean here too (I've updated the package dependencies in the DataTable component to match).

I also took the time while re-testing locally to add the requested "Blank" header sample to the docs/examples. It helped exposed a bug with improper DataRow Height calculation which would of effected other scenarios as well for content larger than the column size, this should be resolved now and enable those scenarios properly.

Once this builds clean, it should be merged and a new package pushed for folks to try more easily! 🎉

components/DataTable/src/CommunityToolkit.WinUI.Controls.DataTable.csproj

…able.csproj

components/DataTable/src/CommunityToolkit.WinUI.Controls.DataTable.csproj

…able.csproj

michael-hawker added the experiment 🧪 Used to track issues that are experiments (or their linked discussions) label Apr 12, 2023

This was referenced Apr 15, 2023

Fixes #388 SizerBase Orientation Property #419

Closed

Bring over Sizer controls to main repo CommunityToolkit/Windows#26

Merged

michael-hawker force-pushed the llama/datatable branch from 0080036 to 8de8ef2 Compare June 14, 2023 00:35

michael-hawker commented Jun 21, 2023

View reviewed changes

michael-hawker force-pushed the llama/datatable branch from 3d5c4d8 to 00ba812 Compare June 30, 2023 21:23

niels9001 mentioned this pull request Jul 6, 2023

HeaderedControls CommunityToolkit/Windows#109

Merged

michael-hawker self-assigned this Jul 6, 2023

Arlodotexe mentioned this pull request Jul 11, 2023

[Gallery] Move searchbox and menu button to titlebar CommunityToolkit/Tooling-Windows-Submodule#85

Closed

This was referenced Jul 11, 2023

ListViewBase Header Behaviors Port CommunityToolkit/Windows#136

Merged

[Samples] Allow Horizontal/Vertical Scrolling and Sizing requirements for Samples CommunityToolkit/Tooling-Windows-Submodule#74

Open

michael-hawker marked this pull request as ready for review July 17, 2023 22:51

michael-hawker force-pushed the llama/datatable branch from 4b8ae71 to e8b8a54 Compare July 21, 2023 21:56

michael-hawker and others added 20 commits August 1, 2023 14:45

Add virtualization example, set DataColumn to Auto size by default

5bb3ba0

Try and make test more generic (not sure if working or not, but wasn'…

a7ee617

…t supposed to work...) Will have to see how it runs in the CI and after I've rebooted VS...

Better connect the DataRow and DataTable elements with a HashSet

7a0d9bd

Invalidate Arrange of children when column autosizes - auto size works! Test virtualization with more items, works too!

Simplify DataColumn resizer with new optimizations from DataTable/Dat…

b3c0a7d

…aRow connection

Add ability to resize columns and them to react in realtime

61549a4

Scope to just UWP/WASDK for now

649801a

Rename DataColumn private method for clarity against DataTable method…

d47bf3d

… of similar name

TODO: Bug when resizing columns and going out of range of size of con…

28fdb5a

…tainer... need to investigate, adding a TODO comment for now

Add initial code to support a 'TreeTable' scenario with TreeView + Da…

c209eaa

…taTable Looks explicitly for the MultiSelectGrid which drives the indentation/gutter size for TreeViewItem

Add ColumnSpacing property to DataTable

7a93d68

Add manual margins to samples for alignment between different containers Add more depth to tree table example

Design related (sample) tweaks

b1aac74

XAML styling

186133a

Switch to Toolkit components

bac1629

Update Generic.xaml

8db98a8

Move HeaderedControls dependency to samples only

977ee2a

Fix test relying on it, see CommunityToolkit/Tooling-Windows-Submodule#101

Clean-up multitarget.props to see if CI can be fixed

6728a74

Update tooling, added missing icon

a1885cb

Add StickyHeaderBehavior to DataTable Virtualization sample

3a70794

For now add a solid background, would be nice to have a fadebehavior on the items panel to fade behind the sticky header that's transparent still...

Upgrade extensions to be in-sync across sub-module updated version

4c921f4

Add 'No/Blank Header' sample to DataTable for simple data table scena…

78b1a08

…rios Fixes a bug/issue with a Row's Height not being properly calculated, which was not only pivotal for this scenario but would have caused issues in practical usage of all other scenarios as well.

michael-hawker force-pushed the llama/datatable branch from d1f1ca0 to 78b1a08 Compare August 1, 2023 22:55

michael-hawker enabled auto-merge August 1, 2023 23:50

Arlodotexe requested changes Aug 2, 2023

View reviewed changes

components/DataTable/src/CommunityToolkit.WinUI.Controls.DataTable.csproj Outdated Show resolved Hide resolved

components/DataTable/src/CommunityToolkit.WinUI.Controls.DataTable.csproj Show resolved Hide resolved

Update components/DataTable/src/CommunityToolkit.WinUI.Controls.DataT…

ddab333

…able.csproj

Arlodotexe reviewed Aug 2, 2023

View reviewed changes

components/DataTable/src/CommunityToolkit.WinUI.Controls.DataTable.csproj Outdated Show resolved Hide resolved

Update components/DataTable/src/CommunityToolkit.WinUI.Controls.DataT…

da6fa9c

…able.csproj

Arlodotexe approved these changes Aug 2, 2023

View reviewed changes

michael-hawker merged commit e7a28e0 into main Aug 2, 2023

delete-merged-branch bot deleted the llama/datatable branch August 2, 2023 17:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Experiment] 🧪 DataTable Initial Prototype #418

[Experiment] 🧪 DataTable Initial Prototype #418

michael-hawker commented Apr 12, 2023 •

edited

Loading

michael-hawker commented Apr 14, 2023

michael-hawker commented Jun 16, 2023

michael-hawker commented Jun 21, 2023

michael-hawker Jun 21, 2023

Sergio0694 Jul 13, 2023

michael-hawker commented Jun 23, 2023

michael-hawker commented Jun 23, 2023

michael-hawker commented Jul 1, 2023

michael-hawker commented Jul 1, 2023

michael-hawker commented Jul 1, 2023

Arlodotexe commented Jul 7, 2023 •

edited

Loading

michael-hawker commented Jul 7, 2023

michael-hawker commented Jul 17, 2023

michael-hawker commented Jul 17, 2023

michael-hawker commented Jul 17, 2023 •

edited

Loading

Arlodotexe commented Jul 19, 2023 •

edited

Loading

michael-hawker commented Jul 19, 2023 •

edited

Loading

michael-hawker commented Jul 19, 2023

michael-hawker commented Jul 19, 2023

michael-hawker commented Aug 1, 2023

[Experiment] 🧪 DataTable Initial Prototype #418

[Experiment] 🧪 DataTable Initial Prototype #418

Conversation

michael-hawker commented Apr 12, 2023 • edited Loading

michael-hawker commented Apr 14, 2023

michael-hawker commented Jun 16, 2023

michael-hawker commented Jun 21, 2023

michael-hawker Jun 21, 2023

Choose a reason for hiding this comment

Sergio0694 Jul 13, 2023

Choose a reason for hiding this comment

michael-hawker commented Jun 23, 2023

michael-hawker commented Jun 23, 2023

michael-hawker commented Jul 1, 2023

michael-hawker commented Jul 1, 2023

michael-hawker commented Jul 1, 2023

Arlodotexe commented Jul 7, 2023 • edited Loading

michael-hawker commented Jul 7, 2023

michael-hawker commented Jul 17, 2023

michael-hawker commented Jul 17, 2023

michael-hawker commented Jul 17, 2023 • edited Loading

Arlodotexe commented Jul 19, 2023 • edited Loading

michael-hawker commented Jul 19, 2023 • edited Loading

michael-hawker commented Jul 19, 2023

michael-hawker commented Jul 19, 2023

michael-hawker commented Aug 1, 2023

michael-hawker commented Apr 12, 2023 •

edited

Loading

Arlodotexe commented Jul 7, 2023 •

edited

Loading

michael-hawker commented Jul 17, 2023 •

edited

Loading

Arlodotexe commented Jul 19, 2023 •

edited

Loading

michael-hawker commented Jul 19, 2023 •

edited

Loading