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 inputnumber
: field is a number, the filter shows two text inputs for min and max valuesdate
: field is a date, the filter shows two date inputs for min and max valuesbool
|boolean
|checkbox
: field is a boolean, the filter shows a checkbox
label
: The label of the field. If not provided, thename
is used.sortable
: Whether the field is sortable. Default isfalse
.filterable
: Whether the field is filterable. Default isfalse
.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 isfalse
. 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 isfalse
. If the field is deletable, a delete button is shown in the cell.hidden
: Whether the field is hidden. Default isfalse
.align
: The alignment of the field. Available values areleft
,center
, andright
. Default isleft
.width
: The width of the field in pixels.nowrap
: Whether the field should not wrap. Default isfalse
.pre
: Whether the field should be displayed in a<pre>
tag. Default isfalse
.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 ofGridField
objects that define the fields of the DataGrid.data
: An array ofGridDataRow
objects that define the rows to display in the DataGrid.actions
: An array ofGridAction
objects that define the actions that can be performed on the rows.buttons
: An array ofGridButton
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
ormode3
.
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.