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>