Skip to content

DataGrid component

The DataGrid component is a powerful component that allows you to display data in a tabular format. It is highly customizable and provides a lot of features out of the box.

Types

GridField

Every field in the DataGrid is defined by a GridField object. The following properties are available:

export interface GridField {
  name: string;
  type: string;
  label?: string;
  sortable?: boolean;
  filterable?: boolean;
  searchMode?: filterModes;
  editable?: boolean;
  deletable?: boolean;
  hidden?: boolean;
  align?: string;
  width?: string;
  nowrap?: boolean;
  pre?: string;
  extra?: GridFieldExtra;

  render?: (value: any, row: any) => any;
  click?: (row: any) => void;
}
  • name: The name of the field. This is used to identify the field in the data.
  • type: The type of the field, mainly used for Grid filters and renderers. Available types are:
    • string: field is a standard text string, the filter is a text input
    • number: field is a number, the filter shows two text inputs for min and max values
    • date: field is a date, the filter shows two date inputs for min and max values
    • bool | boolean | checkbox: field is a boolean, the filter shows a checkbox
  • label: The label of the field. If not provided, the name is used.
  • sortable: Whether the field is sortable. Default is false.
  • filterable: Whether the field is filterable. Default is false.
  • searchMode: The search mode for the filter. Available modes are:
    • contains: The filter value must be contained in the field value.
    • not_contains: The filter value must not be contained in the field value.
    • starts_with: The field value must start with the filter value.
    • ends_with: The field value must end with the filter value.
    • ==: The field value must be equal to the filter value.
    • !=: The field value must not be equal to the filter value.
    • >=: The field value must be greater or equal to the filter value.
    • <=: The field value must be less or equal to the filter value.
    • >: The field value must be greater than the filter value.
    • <: The field value must be less than the filter value.
  • editable: Whether the field is editable. Default is false. If the field is editable, a text input is shown in the cell when the user double clicks on it.
  • deletable: Whether the field is deletable. Default is false. If the field is deletable, a delete button is shown in the cell.
  • hidden: Whether the field is hidden. Default is false.
  • align: The alignment of the field. Available values are left, center, and right. Default is left.
  • width: The width of the field in pixels.
  • nowrap: Whether the field should not wrap. Default is false.
  • pre: Whether the field should be displayed in a <pre> tag. Default is false.
  • extra: An object with additional properties for the field you can use in your custom renderers.

A cell can be customized by providing the following functions:

  • render: A function that is called to render the field value. The function receives the field value and the row object and should return the rendered value.
  • click: A function that is called when the user clicks on the field. The function receives the row object.

Properties

A DataGrid component has the following properties:

fields: GridField[];
data: GridDataRow[];
actions?: GridAction[];
buttons?: GridButton[];
mode?: Color;

// events
onupdatefield?: UpdateFieldCallback | null;
onfilterchange?: (filters: { [key: string]: any }) => void;
  • fields: An array of GridField objects that define the fields of the DataGrid.
  • data: An array of GridDataRow objects that define the rows to display in the DataGrid.
  • actions: An array of GridAction objects that define the actions that can be performed on the rows.
  • buttons: An array of GridButton objects that define the buttons that can be displayed in the DataGrid.
  • mode: The color mode of the DataGrid, mode follows LiWE Theme colors. It can be: mode1, mode2 or mode3.

DataGrid emits the following events:

  • updatefield: Emitted when a field is updated. The event data is an object with the following properties:

    • field: The field that was updated.
    • value: The new value of the field.
    • row: The row object that was updated.

  • filterchange: Emitted when the filters are changed. The event data is an object with the new filters.