Add Compact Property for DataGrid Component to Reduce Spacing and Optimize Mobile View

[amrutadotorg]

Hi, I would like to request the addition of a compact property for the DataGrid component to reduce the space between items and optimize the layout, especially for mobile view.

Use Case As shown in the attached screens, there is a lot of wasted space between the items in the DataGrid component. This leads to a less efficient use of space, especially on mobile devices.

Proposed Solution Implement a compact property that, when enabled, reduces the space between items in the DataGrid component. Additionally, consider implementing a two-column layout for mobile view to further optimize space usage.

Benefits Improved use of space within the DataGrid component. Enhanced visual appeal and readability, especially on smaller screens. A more efficient and user-friendly layout for mobile users.

[lovasoa]

I second this! And I even think that we could slightly reduce the horizontal spacing by default, even without a compact property. @amrutadotorg , can you open a pull request?

[amrutadotorg]

Hi, what do you think of having:

.datagrid {
    --tblr-datagrid-horizontal-padding: 1rem;  /* Reduced horizontal padding */
    --tblr-datagrid-vertical-padding: 1.5rem;  /* Keep vertical padding the same */
    --tblr-datagrid-item-width: 15rem;
    display: grid;
    grid-column-gap: var(--tblr-datagrid-horizontal-padding);
    grid-row-gap: var(--tblr-datagrid-vertical-padding);
    grid-template-columns: repeat(auto-fit, minmax(var(--tblr-datagrid-item-width), 1fr));
}

In this way, we have finer control over the horizontal and vertical spacing independently. We adjust the values of --tblr-datagrid-horizontal-padding and --tblr-datagrid-vertical-padding as needed to achieve the desired layout.

current code for the reference:

.datagrid {
    --tblr-datagrid-padding: 1rem;
    --tblr-datagrid-item-width: 15rem;
    display: grid;
    grid-gap: var(--tblr-datagrid-padding);
    grid-template-columns: repeat(auto-fit, minmax(var(--tblr-datagrid-item-width), 1fr));

[amrutadotorg]

Should I open a new issue to have a compact property? I still see a lot of potential to reduce some space.

[lovasoa]

We can reopen this.

However, let's keep in mind that all your items are very short, but the default should look good even for people who have longer datagrid items. We have to find a compromise that looks good enough for everyone by default.

[amrutadotorg]

True. The documentation does mention keeping it concise.

From the documentation: The "datagrid" component displays small pieces of information in a clear and readable way. The "compact" property allows developers to choose whether they want a compact version with word-wrap for long items or not.