Resizing breaking grid?

[nsimpson-elv]

I have this grid:

<div id="messagesTable" class="block box-border h-[90%]">
    <Material>
        <!-- <HeaderMenu {api}> -->
        <Grid
            {data}
            {columns}
            init={initApi}
            autoRowHeight
            rowStyle={getRowStyle}
            multiselect={true}
        />
        <!-- </HeaderMenu> -->
    </Material>
</div>

The columns are defined as:

columns = [
                {
                    id: "DisplayTimeLocal",
                    header: m.infomessageHeaderDisplayTimeLocal(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
                {
                    id: "Type",
                    header: m.infomessageHeaderType(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
                {
                    id: "Level",
                    header: m.infomessageHeaderLevel(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
                {
                    id: "Message",
                    header: m.infomessageHeaderMessage(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
                {
                    id: "UserDisplay",
                    header: m.infomessageHeaderUser(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
                {
                    id: "InstrumentCode",
                    header: m.infomessageHeaderInstrumentCode(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
                {
                    id: "InstrumentDisplayId",
                    header: m.infomessageHeaderInstrument(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
                {
                    id: "ItemCode",
                    header: m.infomessageHeaderItemCode(),
                    sort: true,
                    resize: true,
                    flexgrow: 1,
                },
            ];

If you resize the grid and columns so that the columns are very small and then attempt to make the container smaller (e.g., by resizing the whole window), it breaks the grid. As far as I can tell, this happens when flexgrow makes the columns too small and then you end up with negative values for the total grid width somehow:

Step 1: very small column widths:

Step 2: make the window even smaller:

You'll get a scrollbar, a negative width for the table, and no visible rows at all.

[Zwillinge]

Hi,

I'm not sure that I can fully reproduce the issue. With the same config I can make a column or several columns narrow, then resize the window so that width becomes -1px, but the rows are still visible with all their contents. Could you please provide precise steps to achieve the effect and perhaps the CSS rules of the messagesTable block?

[nsimpson-elv]

I think I've narrowed it down to an issue specifically with 2.0.0-beta-3. It doesn't happen with beta-2, and it seems fixed in 2.0.1 which I just realized is available, so you can probably close this.

You can try this example - I've stripped it down to the minimum.

<!-- src/App.svelte -->
<script lang="ts"> 
import { Grid, HeaderMenu, Material } from "wx-svelte-grid"; 

let rawData:any []= [
{
    "User": {
        "DisplayCode": 16, 
        "ComboBoxDisplay": "John Doe"
    },
    "InstrumentCode": 0,
    "InstrumentDisplayId": "N/A",
    "ItemCode": 0,
    "Message": "Some test message here - give it some extra length to work with.", 
},
{
    "User": {
        "DisplayCode": 16, 
        "ComboBoxDisplay": "John Doe"
    },
    "InstrumentCode": 0,
    "InstrumentDisplayId": "N/A",
    "ItemCode": 0,
    "Message": "test", 
}
];

    let data = rawData.map(
        (message: any, index: any) => ({
            id: index, // Assign a unique ID; using index is simple, but consider a more robust solution if needed
            DisplayTimeLocal: "14:30:29",
            UserDisplay: message.User.ComboBoxDisplay, // Extracting ComboBoxDisplay from User object
            InstrumentCode: message.InstrumentCode,
            InstrumentDisplayId: message.InstrumentDisplayId,
            ItemCode: message.ItemCode,
            Type: "System",
            Level: "Info",
            Message: message.Message,
        }),
    ); 

        let columns = [ 
{id: 'DisplayTimeLocal', header: 'Display Time Local',},
{id: 'Type', header: 'Type',},
{id: 'Level', header: 'Level',},
{id: 'Message', header: 'Message',},
{id: 'UserDisplay', header: 'User',},
{id: 'InstrumentCode', header: 'Instrument Code',},
{id: 'InstrumentDisplayId', header: 'Instrument',},
{id: 'ItemCode', header: 'Item Code', }
        ];
</script>
 
    <Grid
    {data}
    {columns} 
/>  

For reference, index.html:

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Messages</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

...and the "main.ts" for the Svelte app:

// src/main.ts
import { mount } from 'svelte';
import App from './App.svelte';


const app = mount(App, {
  target: document.getElementById('app')!,
})

export default app

  "dependencies": {
    "wx-svelte-core": "2.0.0-beta-2",
    "wx-svelte-grid": "2.0.0-beta-3"
  }

It seems you don't even need to resize the columns (in this version, you can't). Just resizing the window smaller than the grid causes the behavior with no resizing columns and no styling.

[Zwillinge]

I think I've narrowed it down to an issue specifically with 2.0.0-beta-3. It doesn't happen with beta-2, and it seems fixed in 2.0.1 which I just realized is available, so you can probably close this

Yep, these betas weren't stable enough, and good to know that 2.0.1 fixes the issue. Thank you for getting back with this