Skip to main content

responsive

Description​

Optional. Allows adjusting Grid to different page sizes

Usage​

responsive:{
    400: {
        columns?:[],
        sizes?:{
            rowHeight,
            columnWidth,
            headerHeight,
            footerHeight,
        }
    },
   800:{ /* same as above */}
}

Parameters​

The property contains an object where keys correspond to page width in pixels (e.g., 400 means 400px or lower) and values contain the next properties to be changed:

  • columns - (optional) the columns array to be customized for the specified width
  • sizes - (optional) an object with sizes values:
    • rowHeight - the height of a row in pixels
    • columnWidth - the width of a column in pixels
    • headerHeight - the header height in pixels
    • footerHeight - the footer height in pixels

Example​

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

  const { data } = getData();

  const columns = [
    { id: "id", header: "ID" },
    { id: "firstName", header: "First Name" },
    { id: "lastName", header: "Last Name" },
    { id: "email", header: "Email" },
  ];

  const responsive = {
    1000: {
      columns: [
        { id: "id", header: "ID", flexgrow: 1 },
        { id: "firstName", header: "First Name", flexgrow: 1 },
        { id: "lastName", header: "Last Name", flexgrow: 1 },
        { id: "email", header: "Email", hidden: true, flexgrow: 1 },
      ],
      sizes: {
        rowHeight: 40,
        columnWidth: 160,
        headerHeight: 40,
        footerHeight: 40,
      },
    }
  };
</script>

<div style="width: 1000px;">
  <Grid {data} {columns} {responsive} />
</div>

Setting styles for specific widths​

In addition to reconfiguring columns and sizes, the Grid also adds a CSS class to the topmost element when a responsive level is active. The class name follows this format:

.wx-grid.wx-responsive-[level]

For example, when width is 1000px or lower (but higher then the next level), the container will have this class:

<div class="wx-grid wx-responsive-1000">...</div>

You can then write your own CSS targeting that class. Example:

.wx-grid.wx-responsive-1000 {
  --wx-font-size: 14px;
}

.wx-grid.wx-responsive-400 {
  --wx-font-size: 12px;
}