This is the output from DataGrip (Jetbrains query ...

# tornadofx

[msafarulla]

This is the output from DataGrip (Jetbrains query tool). To make a TornadoFx table view look that way, what should be done? use CSS or something else.

[msafarulla]

Do you have any samples you could share?

[mp]

offtop - can you pls share your datagrip theme name? tnx!

[Marshall]

@msafarulla the best way I have found to experiment with CSS is to use Scene Builder, it has a CSS Analyzer that lets you click on parts of the UI and see all the styles as well as design and manipulate the UI

[Marshall]

[msafarulla]

@mp Theme is Drakula.

[msafarulla]

@Marshall Thats where I ended up going. Instead of Kotlin I moved to Java as well.

[Marshall]

ah ok, good luck 🙂 I don't think anything could make me go back to Java at this point

[msafarulla]

@Marshall do you mean to say Kotlin&FXML are as plug play as Java&FXML?

[Marshall]

yeah I have an app that uses Kotlin and FXML

[Marshall]

its kind of a hybrid approach

[Marshall]

the FXML is basic layout, then things like table columns are done in the tornadofx builders

[Marshall]

You can do this:

override val root: SplitPane by fxml("/fxml/Areas.fxml")
    private val tvAreas: TableView<Area> by fxid()

[Marshall]

then in your init do this:

with(tvAreas) {
            vgrow = Priority.ALWAYS
            isEditable = true
            column("Id", Area::idProperty).prefWidth(75).makeEditCell()
            column("Name", Area::nameProperty).prefWidth(250).makeEditCell()
}

[msafarulla]

@Marshall Would you be kind enough to send me to one of your github repos? I am all new to Java/Kotlin/CSS and related. I would really appreciate.

[Marshall]

I only have one on github and it doesn't use FXML

[Marshall]

https://github.com/maroc81/WeatherPikt/

[Marshall]

my largest app is one I built for work which of course I can't release

[Marshall]

that one uses FXML, and is currently over 10,000 lines of code

[Marshall]

it used to be JavaFX and it was at over 12,000 lines of code, since I've converted it I've almost doubled the functionality and improved the user experience

[msafarulla]

tempting to ask you to release the code 🙂

[Marshall]

wish I could

[msafarulla]

Thanks guys, I was able to make it up here without any prior Java/JavaFX/Kotlin knowledge. Thank you guys and especially @Marshall

[msafarulla]

What is the best way to make the SQL queries look better like this with line number on the left?

[msafarulla]

will dig that. How to add that small image to the left of the column heading?

[msafarulla]

Thanks @Ruckus

[msafarulla]

Do you know why the column headings and column values are not expanded as needed by default.

[msafarulla]

Not sure what that means. JavaFX it is. After using the graphic this issue started happening.

[msafarulla]

JavaFX and CSS boot strapping I been tussling with.

[msafarulla]

I could add SmartResize but it made it further worse. Is it a good idea to mix up both TFX and CSS bootstrapping?

[msafarulla]

from a maintenance perspective, it might. Considering I have zero experience with this I might absolutely be wrong.

[msafarulla]

It is a dynamically populated tableView, So at the time when column headings are set, issued this column.prefWidth(175.0) and that seemed to have resolved the problem. Would be happier if this could have been done with the CSS bootstrap itself. Of course it is not the perfect solution and columns are wider than I want it to be.

[msafarulla]

@Ruckus css -fx-graphic: url(img.jpg); adds the image to all the columns, but dont want this on the id column, is there a way to do that only for the selected columns?

[msafarulla]

Would need some more directions. Also the table is a dynamic table and for that reason I don’t have a class, off of which the tableView is built.

[Marshall]

You can either apply the graphics property to each column except ID

[Marshall]

or apply a style class to the columns

[msafarulla]

was looking for the DSL tag for doing that, but not lucky yet. Ooh I could try adding the css style class.

[Marshall]

if your columns are dynamically generated you can do something like this:

tableview.columns.forEach { if( it.text != "Id" ) it.graphic = img }

[Marshall]

it.graphic could instead be a style or adding a css class

[Marshall]

etc

[msafarulla]

@Marshall this looks really great to thy eyes. view.table.columns.forEach { it.graphic = Circle(5.0) , but how do thy get an image instead of a circle?

[Marshall]

I think you have to create an image view

[Marshall]

And assign that as the graphic

[msafarulla]

worked like a charm! view.table.columns.forEach { if(it.text!="") it.graphic = ImageView("img.jpg")

[msafarulla]

How to make the Id column values also have the same solid background as the header?

[msafarulla]

Is it a unusual requirement?