The Custom Data Table Widget is a tabular component for displaying and interacting with structured data in rows and columns.
This widget enables users to view, search, sort, and select tabular data from either static lists or dynamic API-driven datasets. It supports pagination, column configuration, custom styles, selection limits, and validations. Developers can integrate it with endpoints or fetch fields, making it versatile for data-heavy workflows.
Typical use cases include:
Complete JSON Object
{
"key":"servicesList",
"type":"customdatatable",
"props":{
"label":"Favourite Services",
"columns":[
{
"key":"serviceName",
"title":"Service Name",
"sortable":true
"width": 100
},
{
"key":"priceType",
"title":"Price Type",
"sortable":false
}
],
"items":[
],
"asyncData":true,
"searchable":true,
"selectable":true,
"minSelection":1,
"maxSelection":2,
"emptyMessage":"No Records",
"disabled":false,
"searchPlaceHolder":"Enter search keyword",
"customTableClass":"customTableClass",
"title":"Title of the table",
"minimalPagination":false,
"pageSize":20,
"zeroBasedPageIndex":true,
"currentPageKey":"page",
"pageSizeKey":"size",
"searchKeywordKey":"searchTerm",
"collectionSizeKey":"totalElements",
"sortKey":"sort",
"sortDirectionKey":"sortDirection",
"dataset":{
"httpMethod":"GET",
"url":"/service/api/v1/public/services",
"headers":{
},
"dataField":"data.content",
"useBaseUrl":true,
"params":{
"sort":"dateCreated",
"sortDirection":"asc"
},
"endpointCode":""
}
},
"validation":{
"messages":{
"minSelection":"At least one item should be selected",
"required":"Field is required",
"maxSelection":"You only allowed to select 2 items from the table"
}
}
}
Examples
Below is full service configuration with 4 examples of how the component can be used. It includes
[
{
"type":"sections",
"props":{
},
"fieldGroup":[
{
"key":"dataTableService",
"type":"formly-group",
"props":{
"label":"Data Table Service",
"disabled":false,
"placeholder":""
},
"fieldGroup":[
{
"key":"dataTableWithStaticData",
"type":"block",
"props":{
"label":"Table with static Data",
"disabled":false,
"placeholder":""
},
"fieldGroup":[
{
"key":"programming_langs",
"type":"customdatatable",
"props":{
"items":[
{
"creator":"John Backus, IBM",
"language":"Angular",
"year_created":1957
},
{
"creator":"John McCarthy",
"language":"Lisp",
"year_created":1958
},
{
"creator":"Grace Hopper & team",
"language":"COBOL",
"year_created":1959
},
{
"creator":"John G. Kemeny, Thomas E. Kurtz",
"language":"BASIC",
"year_created":1964
},
{
"creator":"Dennis Ritchie, Bell Labs",
"language":"C",
"year_created":1972
},
{
"creator":"Niklaus Wirth",
"language":"Pascal",
"year_created":1970
},
{
"creator":"Bjarne Stroustrup",
"language":"C++",
"year_created":1983
},
{
"creator":"Larry Wall",
"language":"Perl",
"year_created":1987
},
{
"creator":"Guido van Rossum",
"language":"Python",
"year_created":1991
},
{
"creator":"James Gosling, Sun Microsystems",
"language":"Java",
"year_created":1995
},
{
"creator":"Brendan Eich, Netscape",
"language":"JavaScript",
"year_created":1995
},
{
"creator":"Rasmus Lerdorf",
"language":"PHP",
"year_created":1995
},
{
"creator":"Microsoft (Anders Hejlsberg)",
"language":"C#",
"year_created":2000
},
{
"creator":"Robert Griesemer, Rob Pike, Ken Thompson (Google)",
"language":"Go",
"year_created":2009
},
{
"creator":"Graydon Hoare, Mozilla",
"language":"Rust",
"year_created":2010
}
],
"label":"Favourite Programming Languages",
"columns":[
{
"key":"language",
"title":"Programming Language",
"sortable":true
},
{
"key":"year_created",
"title":"Year Created",
"sortable":false
},
{
"key":"creator",
"title":"Created By",
"sortable":false
}
],
"disabled":false,
"pageSize":10,
"searchable":true,
"selectable":true,
"placeholder":"",
"emptyMessage":"No Records",
"minimalPagination":false,
"searchPlaceHolder":"Enter searck keyword"
},
"fieldArray":null,
"validation":{
"messages":{
}
},
"validators":null,
"expressions":{
},
"defaultValue":null,
"asyncValidators":null,
"expressionProperties":{
}
}
],
"expressions":{
}
},
{
"key":"dataTableWithGenericFetchField",
"type":"block",
"props":{
"label":"Data table with Generic Fetch Field",
"disabled":false,
"placeholder":""
},
"fieldGroup":[
{
"key":"rha_upi",
"type":"customgenericdatafetch",
"props":{
"url":"/integration/v1/fetch/sync",
"hint":"",
"label":"RHA PROJECT FETCH BY UPI",
"tooltip":"",
"disabled":false,
"isStatic":false,
"readonly":false,
"required":false,
"populates":[
],
"runAction":false,
"payloadKey":"upi",
"useBaseUrl":true,
"placeholder":"RHA_LAND_INFORMATION_FETCH_placeholder",
"debounceTime":500,
"endpointCode":"RHA_LAND_INFORMATION_FETCH",
"runningAction":false,
"genericInputLength":15,
"useMultiplePayloadKeys":false
},
"fieldArray":null,
"validation":{
"messages":{
}
},
"validators":null,
"expressions":{
"props.runningAction":"field?.props?.runAction"
},
"defaultValue":null,
"asyncValidators":null,
"expressionProperties":{
}
},
{
"key":"landOwners1",
"type":"customdatatable",
"props":{
"items":[
],
"label":"Owners",
"oldKey":"Dataset Table",
"columns":[
{
"key":"fullName",
"title":"Full Name",
"sortable":true
},
{
"key":"idNo",
"title":"ID No",
"sortable":false
}
],
"dataset":{
"url":"/service/api/v1/public/services",
"params":{
"sort":"dateCreated",
"sortDirection":"asc"
},
"headers":{
},
"dataField":"data.content",
"httpMethod":"GET",
"useBaseUrl":true,
"endpointCode":""
},
"disabled":false,
"pageSize":10,
"asyncData":false,
"searchable":false,
"selectable":false,
"placeholder":"",
"emptyMessage":"No Records"
},
"fieldArray":null,
"validation":{
"messages":{
"required":"Field is required",
"maxSelection":"You only allowed to select 2 items from the table",
"minSelection":"At least one item should be selected"
}
},
"validators":null,
"expressions":{
"props.items":"formState?.FETCHED_DATA?.rha_upi?.owners ? formState?.FETCHED_DATA?.rha_upi?.owners : []"
},
"defaultValue":null,
"asyncValidators":null,
"expressionProperties":{
}
}
],
"expressions":{
}
},
{
"key":"block3",
"type":"block",
"props":{
"label":"Table with Simple Endpoint Code",
"disabled":false,
"placeholder":""
},
"fieldGroup":[
{
"key":"landowners2",
"type":"customdatatable",
"props":{
"items":[
{
"idNo":"1197370003543013",
"gender":"F",
"fullName":"BAMUREBE VESTINE",
"idTypeName":"NATIONAL ID",
"countryName":"RWANDA",
"maritalStatus":"U"
}
],
"label":"Land Owners From Endpoint Code",
"columns":[
{
"key":"fullName",
"title":"Full Name",
"sortable":true
},
{
"key":"idNo",
"title":"ID No",
"sortable":false
}
],
"dataset":{
"params":{
"upi":"1/02/02/03/1692"
},
"headers":{
},
"dataField":"owners",
"httpMethod":"POST",
"useBaseUrl":true,
"endpointCode":"RHA_LAND_INFORMATION_FETCH"
},
"disabled":false,
"required":true,
"asyncData":false,
"selectable":true,
"placeholder":"",
"emptyMessage":"No Records",
"minSelection":1,
"minimalPagination":false
},
"fieldArray":null,
"validation":{
"messages":{
"required":"This field is required",
"minSelection":"At least one item should be selected"
}
},
"validators":null,
"expressions":{
},
"defaultValue":null,
"asyncValidators":null,
"expressionProperties":{
}
}
],
"expressions":{
}
},
{
"key":"block4",
"type":"block",
"props":{
"label":"Table with Dataset configuration",
"disabled":false,
"placeholder":""
},
"fieldGroup":[
{
"key":"serviceslist",
"type":"customdatatable",
"props":{
"items":[
],
"label":"Published Services",
"columns":[
{
"key":"serviceName",
"title":"Service Name",
"sortable":true
},
{
"key":"priceType",
"title":"Price Type",
"sortable":false
}
],
"dataset":{
"url":"/service/api/v1/public/services",
"params":{
"status":"PUBLISHED"
},
"headers":{
},
"dataField":"data.content",
"httpMethod":"GET",
"useBaseUrl":true
},
"sortKey":"sort",
"disabled":false,
"pageSize":10,
"asyncData":true,
"searchable":true,
"selectable":true,
"pageSizeKey":"size",
"placeholder":"",
"emptyMessage":"No Records",
"maxSelection":2,
"minSelection":1,
"currentPageKey":"page",
"searchKeywordKey":"query",
"collectionSizeKey":"totalElements",
"minimalPagination":false,
"searchPlaceHolder":"Enter searck keyword",
"zeroBasedPageIndex":false
},
"fieldArray":null,
"validation":{
"messages":{
"required":"Field is required",
"maxSelection":"You only allowed to select 2 items from the table",
"minSelection":"At least one item should be selected"
}
},
"validators":null,
"expressions":{
},
"defaultValue":null,
"asyncValidators":null,
"expressionProperties":{
}
}
],
"expressions":{
}
}
],
"expressions":{
}
}
],
"validators":null,
"asyncValidators":null
}
]
Allowed Custom Properties
Allowed Validations
minSelection
maxSelection