microsoft / FigmaSharp

Create apps with Figma
MIT License
445 stars 25 forks source link

NSTableView #135

Open hbons opened 4 years ago

hbons commented 4 years ago
hbons commented 4 years ago

TableView

image image

The TableView component is used together with the !content keyword (the same pattern as if using a Window). The !content frame must be an autolayout with its orientation set to Vertical.

Converts to a NSTableView and will always be NSView-based and not cell-based. Since tables can be complex, it's generated as its own class. UsesAutomaticRowHeights should be set to true.

image

!options layers:

Columns

This is a frame that contains all the TableColumns. This frame must be set to AutoLayout and its orientation must be horizontal.

image

It's possible to hide the Columns frame to hide the columns headers in the table. In that case the NSTableView.HeaderView will be hidden (note: tables must always have table columns to work, even if they're hidden or it's just a single one).

TableColumn

The TableColumn component is a standard component within the toolkit and is mostly there for styling. It converts to NSTableColumn. All we need to do here is parse the characters of the Title text object and set the alignment to left/right/center.

image

Rows

Rows are components created by the designer. They must be an AutoLayout-based component with its orientation set to horizontal. In code generation, the row component will be converted to its own class, which the developer can add to the table. Each item in the row's autolayout is an NSView. TODO: Look up how this works exactly

image
hbons commented 4 years ago

some example Xamarin.Mac code: https://github.com/xamarin/mac-samples/blob/main/NSOutlineViewAndTableView/NSOutlineViewAndTableView/NSTableViewCode/NSTableViewExample.cs

hbons commented 4 years ago

let's discuss the implementation of this in the next office hours. :)

hbons commented 3 years ago

Example document: https://www.figma.com/file/QzaULm658cPJ7Lc6qHChhz/NSTableView

preetjdp commented 3 years ago

@hbons The figma file linked above is no longer available, could you share the file again?