Grid

Component grid for presenting tabular data with support for filtering and sorting, fully configurable and customizable. Supports list of items or charging request to the server via Ajax, actions by item or collection of items, internationalization and localization of column names and themes using materialize.

Grid’s properties

Before you navigate between the properties, its good to know that the following are required:

Data params

columns Object mandatory

Datatable setup object where the keys maps dataRows fields, and the values are passed as TableHeader component props.

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

countParam String

Data Object Parameter name received in response from the server that contains the total number of items.

default: 'count'

data Object

Object containing the list of data to initialize the table and the total amount of items. If eagerLoad is true, the data is requested to the server and data is ignored.

data: {
  count: 10,
  dataRows: [
    { name: 'Jonh Doe', age: '21', ...},
    { name; 'Elliot Andersen', age: '22', ...}
  ]
}
count Number

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

default: 0
dataRows Array

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

default: []

dataRowIdField String

Property name in datatable that contains all data ids.

dataRowsParam String

Data Object Parameter name received in response from the server that contains the lines of the table.

default: 'data'
default: 'id'

eagerLoad Boolean

If true, the component requests the data to the server at boot time. Otherwise, it initializes the values ​​from data.

default: false

selectedRowIdsParam String

Parameter name for sending the ids of the selected lines.

default: 'rowIds'

url String mandatory

URL address that serves the data for the table.

Filter params

filter Object

Configuration object of the filter table. See the documentation GridFilter for the complete definition of the filter props.

default: {}
filter: {
  resource: 'q',
  inputs: {
    name:  { label: 'Name'  },
    price: { label: 'Price' },
    ...
  },
}

rowSelectableFilter Function

Function to filter lines activated to select.

default: null
function rowSelectableFilter(rowData) {
  // Selects only even rows
  return rowData.id % 2 == 0;
}

Functions params

onClickRow Function

Function callback executed when clicking on a table row.

default: null
function onClickRow(event, rowData) {
  // logic for when row is clicked.
}

onFilterSubmit Function

Function callback run when submit the filter.

default: function(event, postData) { }

onLoadError Function

Function callback run on an error in loading the data.

default: null
function onLoadError(xhr, status, error) {
  // logic for when a load error is throwed.
}

onLoadSuccess Function

Function callback executed when loading data successfully.

default: null
function onLoadSuccess() {
  // logic for when loads the data with sucess.
}

onSelectAllRows Function

Function callback run when all rows are selected.

default: function(event) { }

onSelectDataRow Function

Function callback run when one row is selected.

default: function(event, selectedRowIds) { }

onRemoveSelection Function

Function callback run when a row is deselected.

default: function(event) { }

I18n params

emptyMessage String

Resource key utilized when there is no data result.

default: 'table.emptyResult'

resource String

Resource object name i18n and l10n. When included, gets the indicated resource’s value.

default: null
Example
resource: 'product'

// Resource's file
Realize.i18n.registerLocale({
  resources: {
    defaults: {
      fields: {
        price: 'Value', // This one is ignored.
        created_at: 'Created at',
        active: 'Active'
      }
    },
    product: {
      fields: {
        name: 'Name',
        price: 'Price', // And this will take his place.
        manufacturer_name: 'Manufacturer Name',
        barcode: 'Barcode',
        group_name: 'Group',
        subgroup_name: 'Subgroup'
      }
    }
  }
}, 'pt-BR');

Sort params

sortConfigs Object

Configuration object of ordering the columns of the tables. When this configuration object is assigned, the global settings are overwritten.

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

Hash parameter name sorting accessed in 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}'
directionParam String

Query string parameter name that received the sort direction.

default: 's_dir'

sortData Object

Object pattern table sorting definition.

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

Pagination params

pagination Boolean

If false, disables paging of data.

default: true

paginationConfigs Object

Configuration object of the scroll bar. When this configuration object is assigned, the global settings are overwritten.

default: {}
paginationConfigs: {
  param: 'p',
  perPage: 10,
  window: 4
}
param String

pagination parameter name accessed by the server.

default: 'p'

paginationOnTop Boolean

If false, it disables the scroll bar at the top.

default: true
perPageOptions Array

Consist in array of objects that is used as options in a select input. Are options of how many items will be displayed on the grid.

default: [
    { name: '10', value: 10 },
    { name: '20', value: 20 },
    { name: '50', value: 50 }
]

Table params

actionButtons Object

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

clearThemeTable Boolean

If true, it disables theme used in the table.

default: false

customTableHeader String

String with HTML fragment to insert custom header.

default: null

forceShowSelectAllButton Boolean

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

default: false

isLoading Boolean

If false, reports that the component is still being loaded.

default: false

selectable String

Expect the following values: multiple, none or one.
In case of none, disables the table line’s selection.

default: 'multiple'

tableClassName String

Class css table element.

default: undefined

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 ? 'par' : 'impar';
}