Skip to main content

columns

Description​

Optional. An array of objects with columns settings

Usage​

columns: [
{
    id: string,
    width: number,
    flexgrow?: 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,
    draggable?: boolean | (row:obj, column:obj) => booolean
}]

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" | "datepicker" | "richselect"
    • config - (optional) an object or a component name with editor configuration settings (for all editor types except "text"):
      • cell - (optional) any custom component
      • template - (optional) the function that takes an option and returns a string to display (template?:(obj) => string)
  • 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
    • label (string) - an option label
  • 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
    • cell - (optional) the name of a custom svelte component to be applied inside a header cell; e.g., cell: CheckboxCell
    • rowspan (number) - (optional) the number of rows a header should span
    • colspan (number) - (optional) the number of columns a header should span
    • collapsible (boolean | "first") - (optional) if set to true, a column can be fully collapsed; if set to "first", the first column will be visible in collapsed state; by default, it's set to false
    • collapsed (boolean) - (optional) defines the initial state of a collapsible column. false by default
    • vertical (boolean) - (optional) if set to true, a header label is displayed vertically; by default, it's set to false
    • filter - (optional) an object with the next filter settings:
      • type (string or object) - (required) it can be "text" or "richselect"
      • config (object) - (optional) an object with the next filter configuration parameters:
        • template - (optional) applies the filter template to a header and defines how the options in the filter are displayed. The function takes an option object as input and returns a string that will be used as the display value for that option.
        • options (array) - (optional) the list of filter options with next parameters for each option:
          • id (string | number) - (required) an id of the option
          • label (string) - (required) a label for a filter option
        • handler - (optional) function handler:(value: any, filter: any) => boolean: value is the value of the column that is filtered and filter is the selected filter value. The function should return a boolean indicating whether the value passes the filter or not.
  • 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
  • draggable - (optional) allows adding the drag handle (appears to the left of text in a row) in case the reorder property is enabled; to add the handle, set draggable to true; the parameter can be a function that takes the row and column objects and returns boolean; if draggable is set, a user can move rows only by dragging the handle.

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>

<Grid {data} {columns} />

Related articles: