Jutro DataTable component is a major UI element when creating jutro pages, DataTable includes build-in pagination, searching, editing and no-data function, understanding how to use and configure jutro DataTable with metadata.json5 is very important.
1. Data source
DataTable metadata json5 definition has a data property, which accepts an array of item. Datatable's column is based on the item's attribute name. If you need to implement your own customized filter function, you can create a function to filter the data first and then feed the filtered data to the Datatable' data property.
2. search/filter
For Jutro datatable, search and filter means the same.
ShowSearch property controls whether to show a search input textbox on top of the datatable. If showSearch is set to true, then you can also specify a string on "filterPlaceholder" property to set a placehold text on the search input field.
By default, when a search text is changed by user, the search criteria will check all records' all columns to get the matched records. However, you can customize the search behavior by specify DataTable's onFilter property to a custom function, and this function will be called whenever user changes the input of search input textbox field. A sample code is shown below:
{
"id": "myDataTable",
"type": "container",
"component": "DataTable",
"componentProps": {
"noDataText": {
"id": "datatable.nodatatext",
"defaultMessage": "No data found ...."
},
"expandOnRowClick": false,
"defaultPageSize": 10,
"pageSizeOptions": [
10
],
"filterPlaceholder": "",
"rowIdPath": "publicID",
"showSearch": true,
"filterPlaceholder":"Search name, state, or population",
"headerMultiline": true,
"onFilter": "filterRow"
},
const filterTable = (filterValue) => {
const filterNumber = parseInt(filterValue, 0);
return (row) => {
return row.claimNumber === filterValue;
};
};
const resolvers = {
resolveCallbackMap: {
filterRow: filterTable
}
};
3. pagination
Pagination is supported by DataTable as build-in feature. The related settings include:
defaultPageSize : 10
pageSizeOptions : [10, 25]
showPagination: true
4. handle row click
When user clicks on a row, a custom callback function can be set to onClickRow property to handle the click, the input parameter is the row clicked.
{
"id": "ClaimSummary",
"type": "container",
"component": "DataTable",
"componentProps": {
"onRowClick": "onClickRow",
"selectOnRowClick": true
},
resolveCallbackMap: {
filterRow: filterTable,
onClickRow: onClickRow
}
const onClickRow = (row) => {
console.log(row);
};
5. defaultSorted
Set datatable's default column for sorting
6. columnsConfigurable
true or false. Decide whether to show the three-bar button on right side of search bar for configuring columns.
7. Table column
Columns in DataTable are defined as an array under datatable's content property. Each column object's component property specify the column type, for example, DisplayColumn. The column object has below properties
header: specifying the header text
path: specify which datatable date object's field is for this column.
sortable: whether to show and support sort on this column
renderCell: specify a callback method to render the cell, the callback function has parameter of row item and row index
