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 React 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 React 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 React 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 React 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​

import { Grid } from "@svar-ui/react-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" },
];

export default function App() {
    return <Grid data={data} columns={columns} footer />;
}

Related articles: