Datagrid - Pill size not matching text

[Pieter3033]

Hi Everyone,

Not a gamebreaker, but I haven't seen it being mentioned. If you assign a color to a value in the Datagrid component and the text is not a one liner, the pill size remains static but the text wraps.

To Reproduce

1. Create a datagrid component.
2. Enter Text (not a one liner) as the description, I used a small paragraph in the below example.
3. Change the color of the value.
4. Display the results.

SELECT 'datagrid' AS component

SELECT 'Notes' AS title
            ,(SELECT notes FROM My_Table WHERE seqno = $) AS description;

Actual behavior

The text is being displayed in the datagrid component, but it gets wrapped. The size of the pill remains the same so the text and the pill overlap.

Screenshots

Expected behavior

The pill increases size with the text to fill the entire background of the text.

Version information

• OS: Windows 11
• Database: SSMS
• SQLPage Version: V0.25.0

[lovasoa]

Hi @Pieter3033 !

You can get the pill height to grow with the following custom css:

.datagrid .status {
  --tblr-status-height: auto;
}

However the result still wouldn't be fully satisfying:

You could try to fix it with

.datagrid .status {
  --tblr-status-height: auto;
  border-radius: 1rem;
}

But I'm not sure about making this the default... In case the contents are user-generated, this would let an user deface the entire datagrid, and having a single very long column isn't very useful. What do you think ?

[lovasoa]

@Pieter3033 , I ended up integrating it, thinking it does more good than evil. This will slightly change the display of datagrid pills in the next version.

[Pieter3033]

@lovasoa, I appreciate the effort.

Would it be possible to allow the user to choose how many columns to display in a datagrid?

The reason being as you mentioned above it would result in having a single very long column.

By combining the custom css you provided and adding a css I created to add columns I get a pretty nice result.

.datagrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;

}

.datagrid .status {
  --tblr-status-height: auto;
  border-radius: 1rem;
}

Example:

The only challenge here is that this is use case specific, not everyone would like to have multiple columns, and not everyone would like to have a long line of big columns.

[lovasoa]

In this particular case, maybe the client instructions would be better displayed separately from the datagrid using the alert component. Since the alert color is customizable, not all alerts have to look like warnings, they can show up as informative notices...

I'll look into making the number of columns customizable.

[Pieter3033]

That is a great idea, by chance i got a request to make the client instructions and SRF notes to be more visible for the users and I moved it above the datagrid into a alert component. Thanks for the idea.

[lovasoa]

released in v0.26 !

[Pieter3033]

Thanks for the feedback.

Really love the look of the new Card component 🔥

[lovasoa]

The screenshot from the release notes probably doesn't express well the new range of possibilities that the width parameter opens. You can now create custom application layouts using embed and width

[Pieter3033]

I have played around with embedding a bit for other projects and it interest me that it is in the card component now.

Can you perhaps explain to me how to use the ?_sqlpage_embed query parameter, cant seem to find reference for this.

[lovasoa]

When you want to create a custom layout with two pages, a large panel on the left and a narrow side bar the right, you can do:

select 'card' as component;
select 8 as width, 'my_large_panel.sql?_sqlpage_embed' as embed;
select 4 as width, 'my_side_bar.sql?_sqlpage_embed' as embed;

In my_large_panel.sql and my_side_bar.sql, you write just the component you want to display in the panel (no shell).

[Pieter3033]

I have played around with embedding a bit for other projects and it interest me that it is in the card component now.

Can you perhaps explain to me how to use the ?_sqlpage_embed query parameter, cant seem to find reference for this.

Apologies, I just had to scroll down xD.

I only realize now how use full the card component is now with the Heigh, width and embed parameters. On my way to update multiple UI's xD