Table

Props

columns Object mandatory

Object table column settings, where the key specifies the id of the input and the value are the proposed component TableHeader.

columns: {
  title: {
    name:  'title',
    label: 'Title',
    format: 'text',
    sortable: true,
    sortDirection: 'asc',
    sortFieldName: 'name',
    onSort: function (sortData) {
      return true;
    }
  }
}

dataRows Array

Table data list. See dataRowsParam to map the name of the parameter received from the server.

default: []

dataRowIdField String

Attribute name to the id field of the table row.

default: 'id'

count Number

Total number of items on the server, used for paging reference.

default: 0

resource String

Resource object name i18n and l10n.

default: null

// On Resource file
Realize.i18n.registerLocale({
  resources: {
    defaults: {
      fields: {
        created_at: 'Created At',
        active: 'Active'
      }
    },
    product: {
      fields: {
        name: 'Name',
        price: 'Price',
        manufacturer_name: 'Manufacturer Name',
        barcode: 'Barcode',
        group_name: 'Group',
        subgroup_name: 'Subgroup'
      }
    }
  }
}, 'en');

// On component properties
resource: 'product',
columns: {
  name:  {...},
  price: {...},
  ...
}

sortConfigs Object

Configuration object of ordering the columns of the tables.

default: {}

sortConfigs: {
  param: 's',
  valueFormat: '%{field} %{direction}'
}

param String: Sort’s hash parameter name requested in the backend.

default: 's'

valueFormat String: Ordering string format sent as a sort parameter to the server. You can use the variables %{field} and %{direction} to replace the id field and the current direction of the field, respectively.

default: '%{field} %{direction}'

sortData Object

Object pattern table sorting definition.

sortData: {
  field: 'name',
  direction: 'asc'
}

default: {}

actionButtons Object

Object definition of the line of action and table buttons. See GridActionsMixin.

Important

Create doc of GridActionsMixin and includes a reference here.

selectable Boolean

If false , disables the selection of rows in the table.

default: false

selectedRowIdsParam String

Parameter name for sending the ids of the selected lines.

default: 'rowIds'

selectedRowIds Array

Parameter name for sending the ids of the selected lines.

default: []

allSelected Boolean

State to indicate whether all table rows are selected.

default: false

allSelectedData Array

Important

Check the documentation of this prop.

emptyMessage String

Displayed when the table has no lines. Accepts a key as i18n value.

default: 'table.emptyResult'

tableRowCssClass Function

Function for the line css class configuration.

default: null

function (rowData) {
  // Includes a distinct css class for even and odd
  return rowData.id % 2 == 0 ? 'even' : 'odd';
}

rowSelectableFilter Function

Function to filter lines activated to select.

default: null

function rowSelectableFilter(rowData) {
  // selects only even rows
  return rowData.id % 2 == 0;
}

forceShowSelectAllButton Boolean

If true and rowSelectableFilter is set, action presentation strength to select all items.

default: false

onClickRow Function

Function callback executed when clicking on a table row.

default: null

function onClickRow(event, rowData) {
  // Logic executed when a row is clicked.
}

rowHref String

URL used when datatable row is clicked.

default: null

onSort Function

Function callback executed when sorting table rows.

default: function (sortData) {}

onSelect Function

Function callback run to selectionar table rows.

default: function (event, selectedRowIds) {}

onRemoveSelection Function

Function callback run to remove selection lines.

default: function (event) {}

onSelectAll Function

Function callback run to select all rows.

default: function (event) {}