Data Table column width

I’m using the Data Table UI component in UI Builder. There seems to be no way to influence the width of a column. The logic behind the scenes chooses very suboptimal widths. Look at this example:

Although the number column is not taking much space, the text of the rightmost column is wrapped across two rows.

Is there a way to work around this behavior?
I wish there would be a way to directly influence the width of indivual columns (as well as the style) …

Regards

Hello @Klaas_Klever

Unfortunately, I have not found an adequate way to solve this problem. I’ve created an internal ticket BKNDLSS-26946 to investigate the possibility of adding this functionality.

Regards,
Viktor

Hi @viktor.liablin ,
For the ticket: What is required urgently as well is to have a default sorting for columns (at least one).
Or is this already possible somehow?

Regards,

Default sorting can be done by injecting the sortBy parameter into the query in the beforeFind event handler.

Ok. You talk about server side event handlers for the DB access. I was looking for a config option for the data table UI component. Just a simple setting for a column.
But I will try your suggested approach as a workaound.
Thanks

Yes, I was referring to the server-side event handlers. It will be the simplest workaround for now to control how the data is returned by the server for the table component.

Regards,
Mark

Works like a charme.
I could implement it very quickly with codeless sever side event logic.
Thanks

Hi @mark-piller ,
It seems there are no events for data views, right?
I’ve created a beforeFind handler for a table which is underlying a view, but it seems this handler is not run when querying the view …

Regards,

Hi, @Klaas_Klever

The event handler is triggered when you access the source table on which the view is based. In order for the event handler to work, you need to access the table from the App Tables section. You need to specify the path to the source table from which the view was created in the logic. You can find all the information you need about your view (column paths) in the View Retrieval Code Generator the Client Driven Query tab.

Regards,
Marina

Hi @Marina.Kan ,
Just to confirm …

  • The event handler is not triggered when the view itself is accessed
  • I have to access the base table directly. To retrieve the desired information coded into the view, I have to code a proper where clause and properties-section when accessing the base table directly.
  • I can see a translation of view designer information into code when looking into the “View Retrieval Code Generator”

Correct?

Regards,

@Klaas_Klever,
you have described the steps quite correctly. You need to refer to the source table on which your view is based.

Regards,
Marina

Hi @Marina.Kan
Understood.
Given this, I have an issue when using the Data Table UI Component. Currently, I’m configuring the view there as the “Table”. I now need to configure the base table instead. Then, I can use the “where clause logic” to code the requried where clause, but there seems to be no way to code the required “properties” logic to associate fields from tables related to the base table.

In my case, what I would need to do, is to have a data table UI component which is doing the following query:
image

If this is not possible, I need to replace the data table UI component with my own “hand made” grid …

Regards,

@Klaas_Klever,

I see you are trying to link different data to a table, unfortunately you can’t do that at the moment. We are currently developing a new powerful feature custom components that will allow you to do this. We plan to release it either by the end of this year or early next year. Please keep an eye out for updates.

Regards,
Marina

Hello @Klaas_Klever,

We’ve released the new version of Backendless.
You can now customize the display of columns for the UI Data Table in the UI Builder.

Regards, Nazar

Perfect - thanks