B4J Question [BANanoVuetify] [SOLVED] How do I reduce the rows sizes in the Datatable?

[serro efe]

Hi.
I'm experimenting with BANanoVuetify.
I need to shrink the table rows and I want to change some properties like icon sizes.

I can do this by changing the styles below from the App.css file.
Font and height adjustment

.v-data-table> .v-data-table__wrapper> table> thead> tr> td {font-size: .875rem; height: 48px}

button icon setting

.v-btn - fab.v-size - small {height: 40px; width: 40px}

I added them to the project as external table.css. There was no change.
How can I do it with BANanoVuetify and B4J. This is how I need to make app.css changes in every update.
There must be an easy way
Thanks

 

[alwaysbusy]

I don't know the BANanoVuetify lib well, but in pure BANano you should always be able to addClass() to e.g. the td tag and then use inline CSS (you can place it anywhere in your B4J code, the BANano transpiler will collect them all and put it in the generated .CSS file).

For example:

#if CSS
.mytdclass {
     font-size: .875rem;
     height: 48px;
}
#End If

If the BANanoVuetify lib does not give your direct access to the <td> to do the .addClass() you can try doing it after adding the table (not the cleanest solution)

Dim tds As BANanoElement
' get all the tds
tds.Initialize(".v-data-table> .v-data-table__wrapper> table> thead> tr> td")    
' add the mytdclass to all of them
tds.AddClass("mytdclass")

Or you can just try to overrule the existing CSS rules using !important

#if CSS
.v-data-table> .v-data-table__wrapper> table> thead> tr> td {
    font-size: .875rem !important;
    height: 48px !important;
}
#End If

Alwaysbusy

 

[serro efe]

I tried inline css before, but it didn't work.
When I tested it with! important, it still didn't work.
Adding class did not work. Not added. I create a table first and do the tests later.

 

[alwaysbusy]

Must be a limitation from the lib then and you will have to wait for the answer of @Mashiane as standard BANano does allow this.

 

[serro efe]

Thank you for the answers. I solved the problem.
I took the style paths in browser developer mode, I tested it in inline css form, it didn't work.

BANano.Header.AddCSSFile("tableStyle.css")

I created an external css file and added style components into it. I included it in the project, the problem is solved

 

[Mashiane]

Noted with thanks..

Built into the data-table component is a .SetDense method, to decrease the row heights, add that call and make it True e.g. tableName.SetDense(True)

As per Vuetify docs, it will give you a table like this below. For BANanoVuetify however as soon as you add action buttons like Edit, Delete, Print etc, the row heights increase because of the icon height sizes. You can decrease the icon sizes by applying one of the methods below.

For resizing the icon heights, we have added two methods

1. .SetIconDimensions and
2. .SetIconDimensions1 - this give you an additional paramater for column width, by default for actions columns its 80px...

For example, on the demo project, we added an edit & trash buttons to the structure of the data-table. We then applied an icon size and color with these calls.

dtUsers.AddEditThrash
    dtUsers.SetIconDimensions("edit", "32px", "success")
    dtUsers.SetIconDimensions("delete", "32p", "error")

This is depicted with this demo example:

This gives you the flexibility to adjust the color and size of the edit / trash buttons to be whatever size and color you want in this case.

Reference: https://vuetifyjs.com/en/components/data-tables/

All the best!