Skip to main content

Configuring the table sizes

Setting column sizes​

The widget allows you to:

  • set fixed width of particular columns
  • set default width of all columns
  • adjust columns width so that a table fills the available page width

Setting the width of a particular column​

To change the width of a particular column, use the width parameter of the columns property.

Example:

<script>
    import { Grid } from "wx-svelte-grid";
    import { getData } from "./common/data";
    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        { id: "city", header: "City", width: 160 },
    ];
</script>

<Grid {data} {columns} />

Setting default columns width​

To change the width of all columns in a table, set the columnWidth parameter value of the sizes property.

<script> 
    import { getData } from "./common/data";
    import { Grid } from "wx-svelte-grid";

    const { data, columns } = getData();
        
    let sizes = {
        columnWidth: 190, //pixels
    };

</script>

<Grid {data} {sizes} {columns} />

Adjusting columns width to available space​

To make the table fill the full page space and specify how much space (width) relative to the table width a particular column will take (it will take no effect on columns with the set width), use the flexgrow parameter of the columns property.

Example:

<script>
    import { Grid } from "wx-svelte-grid";
    import { getData } from "./common/data";
    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        { id: "city", header: "City", width: 160 },
        { id: "firstName", header: "First Name", flexgrow: 1 },
        { id: "lastName", header: "Last Name", flexgrow: 1 },
        { id: "companyName", header: "Company", flexgrow: 2 },
    ];

</script>

<Grid {data} {columns} />

Setting header/footer sizes​

You can set header/footer default height and autoheight.

Changing default height​

To change default height of all headers/footers, set the headerHeightor footerHeight parameters of the sizes property to the required values in pixels:

<script>
    import { getData } from "./common/data";
    import { Grid } from "wx-svelte-grid";

    const { data, columns } = getData();

    let sizes = {
        headerHeight: 30,
        footerHeight: 30,
    };
</script>

<Grid {data} {sizes} {columns} footer={true} />

Setting row height​

To change default row height, use the rowHeight parameter of the sizes property.

<script>
    import { getData } from "./common/data";
    import { Grid } from "wx-svelte-grid";

    const { data, columns } = getData();

    let sizes = {
        rowHeight: 40,
    };
</script>

<Grid {data} {columns} {sizes} />

Enabling autoRowHeight​

To enable the autosizing of the row height, apply the autoRowHeight property.

<script>
    import { getData } from "./common/data";
    import { Grid } from "wx-svelte-grid";

    const { data, columns } = getData();
</script>

<Grid {data} {columns} autoRowHeight />