Card Table
Card Table component used to represent tabular data in a card form.
Allowed Parent Components:
Allowed Child Components:
Trigger On No Data Action Button Click
Check this to hide headers.
Allowed Values: Yes/No
Check this if you want to disable infinite scrolling. Query will be fired only once and not query will be fired on scrolling
Allowed Values: Yes/No
Check this to enable scroll of card table component based on the window's scroll positions.
Allowed Values: Yes/No
Allowed Values: Any number value
Provide numerical value to set row height. By default row heigth is sett to 80px.
Allowed Values: Any number value
➤ Highlight On Hover
Check this to highlight the row when the mouse hovers on the row.
Allowed Values: Yes/No
Check this to add zebra-striping to the rows within the table
Allowed Values: Yes/No
➤ Space Between Rows
Provide numerical value to set space between rows.
Allowed Values: Any number value
➤ Row Class Name Expression
Allowed Values: An expression which should return string after evaluation
➤ Hide No Data Placeholder
Check this to hide the data displayed when no data found.
Allowed Values: Yes/No
Select an icon to display when no data found.
Allowed Values: Icon List
➤ No Data Text1
Provide a text to display as title when no data found.
Allowed Values: Free text field
➤ No Data Text2
Provide a text to display as sub title when no data found.
Allowed Values: Free text field
Select an icon for button when no data found.
Allowed Values: Icon List
Provide a text for button when no data found.
Allowed Values: Free text field
Select or enter the action need to be performed on button click.
Allowed Values: Controller Function
Select a color or enter the custom class to change the color of the button.
Allowed Values: Select a color or enter the custom class to change the color of the button.
➤ Use Existing Data Source
Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.
Allowed Values: Yes/No
Select a datasource from the list.
Allowed Values: Select a datasource from the list.
➤ Data Source Alias
Allowed Values: Free text field
➤ Default Where Clause
Allowed Values: Free text field
Allowed Values: Any number value
➤ Order By Clause
e.g. #firstAttr#, #secondAttr# DESC
Allowed Values: Free text field
Check this property to query the selected datasource on component render.
Allowed Values: Yes/No
➤ Execute Count SQL
Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}
Allowed Values: Yes/No
➤ Execute Distinct SQL
Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.
Allowed Values: Yes/No
➤ Insert Allowed
Allowed Values: Yes/No
➤ Update Allowed
Allowed Values: Yes/No
➤ Delete Allowed
Check to enable deleting the existing row.
Allowed Values: Yes/No
➤ Mask Page On Post
Check to enable page masking on save.
Allowed Values: Yes/No
➤ Do Not Monitor Query Request
Check to disable monitoring query request.
Allowed Values: Yes/No
➤ Silent Server Validate
Check to enable silent server validate.
Allowed Values: Yes/No
Check to enable silent fetching.
Allowed Values: Yes/No
➤ Make New Records Dirty
Check this property to make new record dirty. If this property is checked the status of the new record will be 'Insert' else it will be 'New'
Allowed Values: Yes/No
Allowed Values: Controller Function