Skip to main content

columns

Description​

Optional. An array of objects with columns settings

Usage​

columns: [
{
    id: string,
    width: number,
    flexgrow?: number,
    sort?: boolean,
    left?: number,
    editor?: string | any,
    setter?: (obj: {}, value: Value) => void,
    getter?: (obj: {}) => Value,
    hidden?: boolean,
    options?: [],
    header?: string | [],
    footer?: string | [],
    resize?: boolean,
    treetoggle?: boolean,
    cell?: any,
    css?: string,
    tooltip?: boolean | (obj: any) => any,
    template?: any
}]

Parameters​

Each column objet can have the following parameters:

  • id - (required) the id of a column
  • width - (required) the width of a column in pixels; a default value is 160
  • flexgrow - (optional) specifies how much space (width) relative to the table width the column will take (it will take no effect on columns with the set width); the property is specified as a number (if flexgrow is set to 1 in one column only, the column will take the full available table width)
  • sort - (optional) if set to true, the sorting (in asc and desc order) is enabled by the click on a column header
  • editor - (optional) it can be a string with the editor type (see types below) or an object with the next parameters:
    • type (string) - the type of a field which can be one of the following: text, combo, richselect, datepicker
    • config - (optional) an object or a component name with editor configuration settings
  • setter - (optional) sets the received value to a specified column
  • getter - (optional) gets the column value
  • hidden - (optional) allows hiding a column by setting its value to true; it's set to false (not hidden) by default
  • options - (optional) an array of objects with data (options) for the column fields:
    • id (string | number) - an option item ID
    • name (string) - an option value
  • header - (optional) a header label or an object with header settings:
    • id(string) - a column ID
    • text (text) - (optional) a header label
    • css (string) - (optional) the name of a css class to be applied to a header
    • rowspan (number) - (optional) the number of rows a header should span
    • colspan (number) - (optional) the number of columns a header should span
    • collapsible (boolean) - (optional) if set to true, a column can be expanded; by default, it's set to false
    • open (boolean) - (optional) if set to true, initially a column is expanded; by default, it's set to false
    • vertical (boolean) - (optional) if set to true, a header label is displayed vertically; by default, it's set to false
    • autoheight (boolean) - (optional) if set to true (default), automatically adjusts a header height to allow its content to be displayed correctly
  • footer - a header label or an object with footer settings which are the same as the header settings
  • treetoggle - if set to true, enables displaying data in a hierarchical format with collapsible rows; the default value is false
  • cell - (optional) the name of a custom svelte component to be applied inside a cell; e.g., cell: CheckboxCell
  • css - (optional) the name of a css class to be applied to a cell
  • tooltip - (optional) if true (default), adds a tooltip to a column; a function (obj: any) => any can be passed to the parameter value; the function should take an object to be processed as an argument and return the processed value
  • template - (optional) applies a template to a column; it's a function that takes an object and returns a string.

Example​

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

    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        {
            id: "city",
            width: 100,
            header: "City",
            footer: "City",
        },
        {
            id: "firstName",
            header: "First Name",
            footer: "First Name",
            width: 150,
        },
        {
            id: "lastName",
            header: "Last Name",
            footer: "Last 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>