Skip to main content

columns

Description​

Optional. An array of objects with columns settings

Usage​

columns?: {
    id: string,
    width?: number,
    flexgrow?: number,
    sort?: boolean,
    hidden?: boolean,
    resize?: boolean,
    treetoggle?: boolean,
    draggable?: boolean | ((row: IRow, column: IColumn) => boolean),

    editor?: 
        | TEditorType                 // "text" | "combo" | "datepicker" | "richselect"
        | IColumnEditorConfig        // extended editor config with `config.cell`
        | TEditorHandlerConfig,      // (row, column) => editor | null

    setter?: (obj: IRow {}, value: any) => void,
    getter?: (obj: IRow {}) => any,

    options?: {
        id: string | number,
        label: string,
        [key: string]: any,
    }[],

    header?: TColumnHeaderConfig, // string | IHeaderCellConfig | (string | IHeaderCellConfig)[],
    footer?: TColumnHeaderConfig,

    cell?: Component<{
        api: IApi {},
        row: IRow {},
        column: IColumn {},
        onaction: (ev: { action?: any, data?: { [key: string]: any } }) => void,
        }>, // custom Svelte component for rendering cell content
    tooltip?: boolean | ((obj: any) => any),
    template?: (value: any, row: IRow {}, col: IColumn {}) => string;
}[];

Parameters​

Each column object can have the following parameters:

  • id - (required) the id of a column
  • width - (optional) the width of a column in pixels. Default: 160.
  • flexgrow- (optional) specifies how much space relative to the table width the column will take. It has no effect if width is explicitly set. Example: if flexgrow is 1 in one column only, it will expand to take all available space.
  • sort - (optional) enables sorting by clicking the column header. Sorting toggles between ascending and descending order
  • editor - (optional) defines inline editing for column cells. Possible values:
    • string editor type: "text" | "combo" | "datepicker" | "richselect"
    • object (IColumnEditorConfig) — extended editor configuration:
      • type (string) — the editor type, one of "text" | "combo" | "datepicker" | "richselect".
      • config - (optional) additional editor configuration:
        • cell - (optional) a custom Svelte component for the editor UI.
        • template - (optional) (obj: any) => string. Formats how options are displayed in editors like combo or richselect.
    • a function (row?: IRow, column?: IColumn) => string | IColumnEditorConfig | null — dynamically returns the editor type, a custom config, or null (non-editable cell)
  • setter - (optional) (row: IRow, value: any) => void. Updates a value in the row data for this column
  • getter - (optional) (row: IRow) => any. Retrieves the value from the row data for this column.
  • hidden - (optional) hides a column when set to true. Default is false
  • options - (optional) an array of option objects (used for editors or filters):
    • id (string | number) unique option id
    • label (string) — option display text
  • header (optional) — a header label (string), an object with header settings (IHeaderCellConfig), or an array of them ((string | IHeaderCellConfig)[]). Each header object (IHeaderCellConfig) can have:
    • id (string) — column id
    • text (string) — header label
    • css (string) — CSS class name for styling
    • cell (optional) — a custom Svelte component inside the header cell
    • rowspan (number) — number of rows the header spans
    • colspan (number) — number of columns the header spans
    • collapsible (boolean | "first") — enables column collapsing. "first" keeps the first column visible in collapsed mode. Default: false
    • collapsed (boolean) — initial collapsed state. Default: false
    • vertical (boolean) — displays the header label vertically. Default: false
    • autoheight (boolean) — automatically adjusts header height. Default: false
    • filter - (optional) filter configuration:
      • type (string | object) — "text" or "richselect"
      • config - (optional) filter-specific settings:
        • template - (optional) (obj) => string formatting function.
        • options - (optional) array of { id, label } filter options
        • handler - (optional) (value: any, filter: any) => boolean custom filter logic.
  • footer - (optional) footer configuration, same structure as header
  • treetoggle - (optional) enables tree-like hierarchical rows with expand/collapse controls. Default: false
  • cell - (optional) a custom Svelte component to render inside cells:
    • api - (required) the api gateway object to bind the component to the DataGrid
    • row - (required) the current row object (data item) for this cell
    • column - (required) the column object for this cell with parameters as in columns
    • onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void — a callback that can be called from the custom cell to notify about user actions:
    • ev.action — an action identifier (string, number, or any custom value)
    • ev.data — an optional payload object with arbitrary data
  • tooltip - (optional) adds a tooltip to cell content. Possible values:
    • true — enables default tooltip (cell value)
    • a function (row: any) => any — returns custom tooltip content
  • template - (optional) applies a template to a column; it's a function that takes an object with the next parameters:
    • value - cell value
    • row - row object (data item)
    • column - column object The function 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 "@svar-ui/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" },
    ];

</script>

<Grid {data} {columns} footer />

Related articles: