Adding and hiding columns

Adding columns

To add columns to the table, add an object with column settings to the columns array.

<script>
   import { Grid } from "@wx/svelte-grid";
   import { getData } from "./common/data";
   
   const { data } = getData();
   
   const columns = [
    { id: "id", width: 50 },
    { id: "firstName", header: "First Name", footer: "First Name", width: 150 },
    { id: "email", header: "Email", footer: "Email" },
    { id: "companyName", header: "Company", footer: "Company" },
    { id: "stars", header: "Stars", width: 150 },
    { id: "date", header: "Date", width: 150 },
   ];
   
</script>

<div style="padding: 20px;">
   <div>
      <Grid {data} {columns} />
   </div>
</div>

Hiding columns

To hide a column, set the hidden parameter of the columns property to true.

Example:

<script>
   import { Grid } from "@xbs/svelte-wx";
   import { getData } from "./common/data";
   
   const { data } = getData();
   
   const columns = [
    { id: "id", width: 50 },
    { 
      id: "city",
      header: "City",
      width: 160, 
      hidden: true 
    },];
   
</script>
<div style="padding: 20px;">
   <div>
      <Grid {data} {columns} />
   </div>
</div>