how do you stule the data grid?

JasonVonKrueger

I must be missing something because trying to format the data grid is driving me crazy. Here's where it's being rendered:

<Willow> <Text icon="wxi-search" css="wx-icon-left" placeholder="Search for residents" /> <Grid class="wx-grid full-width-grid" data={gridRows} autoConfig={config} /> <Pager total={total} pageSize={pageSize} onchange={setPage} /> </Willow>

The search input box displays but it's always 100% the width of the conainer. I just want it to be like 120px or something.I also want the datagrid to be 100% of its container but that's not happending. I'm obviously missing something.

Here's the css for that Svelte component:

`<style>
/* .demo {
--wx-table-header-background: #2ca0e3;
--wx-border: 1px solid #818080;
--wx-table-header-cell-border: #2ca0e3;
} */

/* :global(.wx-grid) {
    width: 100% !important;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 100%;
} */

:global(.wx-willow-theme) {
    /* min-width: 100%; */
    --wx-table-select-background: #eaedf5;
    --wx-table-select-focus-background: #ebedf3;
    --wx-table-select-color: var(--wx-color-font);
    --wx-table-border: 1px solid #e6e6e6;
    --wx-table-select-border: inset 3px 0 var(--wx-color-primary);
    --wx-table-header-border: var(--wx-table-border);
    --wx-table-header-cell-border: var(--wx-table-border);
    --wx-table-footer-cell-border: var(--wx-table-border);
    --wx-table-cell-border: var(--wx-table-border);
    --wx-header-font-weight: 600;
    --wx-table-header-background: #f2f3f7;
    --wx-table-fixed-column-right-border: 3px solid #e6e6e6;
    --wx-table-editor-dropdown-border: var(--wx-table-border);
    --wx-table-editor-dropdown-shadow: 0px 4px 20px 0px    rgba(44, 47, 60, 0.12);
}

/* :global(.wx-willow-theme .menu) {
    box-shadow: 0px 4px 20px 0px rgba(44, 47, 60, 0.12);
    outline: 1px solid #e6e6e6;
} */

/* .full-width-grid {
    width: 100%;
} */

/* :global(.wx-grid) {
    width: 100% !important;
    box-sizing: border-box;
}     */

.full-width-grid {
width: 100%;
box-sizing: border-box;
max-width: 100%;
min-width: 100%;
}

input.s-93ytKdwiDDXi {
max-width: 50% !important;
}

.s-93ytKdwiDDXi {
width: 100px;
max-width: 100px;
}

.wx-willow-theme {
width: 50%;
max-width: 50%;
}
</style>`

tasha

Hello JasonVonKrueger

To set width for the search input use inputStyle property.

Please check the example: https://stackblitz.com/edit/sveltejs-kit-template-default-jtpncrxk?file=src%2Froutes%2FMyGrid.svelte

As for the datagrid to be 100% of its container by default, Grid is designed to occupy 100% of its container. If you’re experiencing issues where the grid is not filling the container as expected, ensure that the parent container of the Grid has correct dimensions. Look for any CSS rules that might be affecting the Grid’s width.

JasonVonKrueger

Thank you Tasha! That solved the input box issue. For the data grid, it looks like the grid itself is 100% but the columns don't grow with it (see links below). I played around with the columnStyle property but still couldn't get it to work. Am I on the right track? If so, I'll play harder.

Thanks again.

Willow container

Datagrid

JasonVonKrueger

I solved this by setting flexgrow to 1 in the grid options. So...

const config = { editor: "text", sort: true, flexgrow: 1 };

and

<Grid data={gridRows} autoConfig={config} />