columns
Description
Optional. An array of objects with columns settingsUsage
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 columnwidth
- (required) the width of a column in pixels; a default value is 160flexgrow
- (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 (ifflexgrow
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 headereditor
- (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, datepickerconfig
- (optional) an object or a component name with editor configuration settings
setter
- (optional) sets the received value to a specified columngetter
- (optional) gets the column valuehidden
- (optional) allows hiding a column by setting its value to true; it's set to false (not hidden) by defaultoptions
- (optional) an array of objects with data (options) for the column fields:id
(string | number) - an option item IDname
(string) - an option value
header
- (optional) a header label or an object with header settings:id
(string) - a column IDtext
(text) - (optional) a header labelcss
(string) - (optional) the name of a css class to be applied to a headerrowspan
(number) - (optional) the number of rows a header should spancolspan
(number) - (optional) the number of columns a header should spancollapsible
(boolean) - (optional) if set to true, a column can be expanded; by default, it's set to falseopen
(boolean) - (optional) if set to true, initially a column is expanded; by default, it's set to falsevertical
(boolean) - (optional) if set to true, a header label is displayed vertically; by default, it's set to falseautoheight
(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 theheader
settingstreetoggle
- if set to true, enables displaying data in a hierarchical format with collapsible rows; the default value is falsecell
- (optional) the name of a custom svelte component to be applied inside a cell; e.g., cell: CheckboxCellcss
- (optional) the name of a css class to be applied to a celltooltip
- (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 valuetemplate
- (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>