Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table control for Zircon #185

Closed
coldwarrl opened this issue Jan 23, 2019 · 10 comments
Closed

Table control for Zircon #185

coldwarrl opened this issue Jan 23, 2019 · 10 comments
Assignees
Labels
feature New functionality for the program

Comments

@coldwarrl
Copy link
Member

coldwarrl commented Jan 23, 2019

Request for a table control

A simple table control, which displays content in cells. Only basic features and no fancy stuff in the beginning (like cells spanning mutliple columns and so forth)

Rationale

  • useful for dev tools within Zircon and
  • of course also for games (e.g. inventory, loadout view)

Suggested way of implementing

  • a cell could embed any Zircon controls and facilitating the usage of text (similar like the log control)
@coldwarrl coldwarrl added feature New functionality for the program Story Points: 8 labels Jan 23, 2019
@adam-arold
Copy link
Member

Nice idea. Added this to the Zircon project!

@Baret
Copy link
Collaborator

Baret commented Feb 20, 2021

I will give it a try and orient on the table playground stuff and tornadoFX. I will post a PR when I have something worth to look at.

@adam-arold
Copy link
Member

Sounds awesome! 👍

@Baret
Copy link
Collaborator

Baret commented Mar 4, 2021

BTW could you assign me here? I may not do it.

@coldwarrl
Copy link
Member Author

done :)

@Baret
Copy link
Collaborator

Baret commented Mar 19, 2021

I think this is ready for a first review. My concept is basically: A table consists of data and column definitions.
The data is a list of Elements. Each element is represented in one row of the table.
All the magic happens in the columns. Each column gets the element of a row and fetches the data to display (valueAccessor). It then wraps that data into a Component (componentCreator). I am not quite sure if we need the extra valueAccessor because all that is done with it is to directly pass it to componentCreator, but for the beginnig I kept it separate.
The resulting Component represents a cell of the table. We pass every element to every column and have a VBox of rows containing an HBox of cells.
A Column also has a name which is used as the header.

This approach makes building tables most flexible I think. The issue description mentioned "cells spanning mutliple columns and so forth" which is already captured that way. It only makes the code a little bit ugly when calculating the height of each row, but well.

Ah, that reminds me that the list of elements can have any length. Rows are only added as long as they fit into the content panel.

This leaves open some possible future additions:
As the headers and cells are Components you could easily add Listeners to them. For the cells this is already possible, just register it in the componentCreator, but the interesting part is the header.
You could make columns sortable and they might get a little "toggle sort" button.
Or you could add filtering by popping up a FilterModal (or something like that) when clicking on the header.

This reminds me that data should be an ObservableList. I don't know why I did not immediately build it that way...

@Baret
Copy link
Collaborator

Baret commented Apr 10, 2021

My current implementation looks like this. Just for the history books ;)
table_example_property

adam-arold added a commit that referenced this issue Apr 13, 2021
@adam-arold
Copy link
Member

Now this looks awesome. I've also approved your PR!

@Baret
Copy link
Collaborator

Baret commented Apr 13, 2021

Cool, thx!
Another addition for the future (next to the ones already mentioned I could imagine is having a kind of TableSelectionManager that handles the selectedRows. So you have a way to allow single/multi/no selection in a table.

@adam-arold
Copy link
Member

That's pretty easy. You just need an ObservableList with a validator function that would hold the selected row(s) and bind it to the selection event(s).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New functionality for the program
Projects
None yet
Development

No branches or pull requests

3 participants