2021-02-16 10:29:08 +00:00
import { get } from "lodash" ;
2021-09-09 15:10:22 +00:00
import { TableWidgetProps } from "../constants" ;
2021-07-26 05:50:46 +00:00
import { ValidationTypes } from "constants/WidgetValidation" ;
2021-06-01 04:59:45 +00:00
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory" ;
2021-08-04 05:34:44 +00:00
import { AutocompleteDataType } from "utils/autocomplete/TernServer" ;
2021-09-01 09:50:23 +00:00
import { PropertyPaneConfig } from "constants/PropertyControlConstants" ;
2021-10-12 08:04:51 +00:00
import {
ButtonBorderRadiusTypes ,
ButtonVariantTypes ,
} from "components/constants" ;
2021-10-06 12:57:05 +00:00
import {
updateDerivedColumnsHook ,
ColumnTypes ,
defaultSelectedRowValidation ,
totalRecordsCountValidation ,
updateColumnStyles ,
updateIconAlignment ,
getBasePropertyPath ,
hideByColumnType ,
2021-11-23 06:05:01 +00:00
uniqueColumnNameValidation ,
2021-10-06 12:57:05 +00:00
} from "./propertyUtils" ;
2021-11-26 05:14:00 +00:00
import {
createMessage ,
TABLE_WIDGET_TOTAL_RECORD_TOOLTIP ,
2022-02-11 18:08:46 +00:00
} from "@appsmith/constants/messages" ;
2021-12-09 06:15:59 +00:00
import { IconNames } from "@blueprintjs/icons" ;
const ICON_NAMES = Object . keys ( IconNames ) . map (
( name : string ) = > IconNames [ name as keyof typeof IconNames ] ,
) ;
2021-09-01 09:50:23 +00:00
2021-02-16 10:29:08 +00:00
export default [
{
sectionName : "General" ,
children : [
{
helpText :
"Takes in an array of objects to display rows in the table. Bind data from an API using {{}}" ,
propertyName : "tableData" ,
label : "Table Data" ,
controlType : "INPUT_TEXT" ,
2021-09-20 10:43:44 +00:00
placeholderText : '[{ "name": "John" }]' ,
2021-02-16 10:29:08 +00:00
inputType : "ARRAY" ,
isBindProperty : true ,
isTriggerProperty : false ,
2021-08-11 14:02:14 +00:00
validation : {
type : ValidationTypes . OBJECT_ARRAY ,
params : {
default : [ ] ,
} ,
} ,
2021-06-01 04:59:45 +00:00
evaluationSubstitutionType : EvaluationSubstitutionType.SMART_SUBSTITUTE ,
2021-02-16 10:29:08 +00:00
} ,
{
helpText : "Columns" ,
propertyName : "primaryColumns" ,
controlType : "PRIMARY_COLUMNS" ,
label : "Columns" ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [ "derivedColumns" , "columnOrder" ] ,
2021-11-26 11:33:50 +00:00
isBindProperty : false ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
2021-11-23 06:05:01 +00:00
validation : {
type : ValidationTypes . FUNCTION ,
params : {
fn : uniqueColumnNameValidation ,
expected : {
type : "Unique Column Names" ,
example : "abc" ,
autocompleteDataType : AutocompleteDataType.STRING ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
panelConfig : {
editableTitle : true ,
titlePropertyName : "label" ,
panelIdPropertyName : "id" ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" , "columnOrder" ] ,
2021-02-16 10:29:08 +00:00
children : [
{
sectionName : "Column Control" ,
children : [
{
propertyName : "columnType" ,
label : "Column Type" ,
controlType : "DROP_DOWN" ,
customJSControl : "COMPUTE_VALUE" ,
options : [
{
label : "Plain Text" ,
value : "text" ,
} ,
2021-03-24 11:24:10 +00:00
{
label : "URL" ,
value : "url" ,
} ,
2021-02-16 10:29:08 +00:00
{
label : "Number" ,
value : "number" ,
} ,
{
label : "Image" ,
value : "image" ,
} ,
{
label : "Video" ,
value : "video" ,
} ,
{
label : "Date" ,
value : "date" ,
} ,
{
label : "Button" ,
value : "button" ,
} ,
2021-10-06 12:57:05 +00:00
{
label : "Menu Button" ,
value : "menuButton" ,
} ,
2021-09-01 09:50:23 +00:00
{
label : "Icon Button" ,
value : "iconButton" ,
} ,
2021-02-16 10:29:08 +00:00
] ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : false ,
isTriggerProperty : false ,
} ,
2021-05-04 19:48:40 +00:00
{
propertyName : "displayText" ,
label : "Display Text" ,
2021-05-06 14:29:09 +00:00
controlType : "COMPUTE_VALUE" ,
2021-05-04 19:48:40 +00:00
customJSControl : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
const baseProperty = getBasePropertyPath ( propertyPath ) ;
const columnType = get (
props ,
` ${ baseProperty } .columnType ` ,
"" ,
) ;
return columnType !== "url" ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-05-04 19:48:40 +00:00
isBindProperty : false ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
{
2021-10-26 12:12:56 +00:00
helpText :
"The value computed & shown in each cell. Use {{currentRow}} to reference each row in the table. This property is not accessible outside the column settings." ,
2021-02-16 10:29:08 +00:00
propertyName : "computedValue" ,
label : "Computed Value" ,
controlType : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
2021-09-01 09:50:23 +00:00
return hideByColumnType ( props , propertyPath , [
ColumnTypes . DATE ,
ColumnTypes . IMAGE ,
ColumnTypes . NUMBER ,
ColumnTypes . TEXT ,
ColumnTypes . VIDEO ,
ColumnTypes . URL ,
] ) ;
2021-02-16 10:29:08 +00:00
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : false ,
} ,
2021-08-17 12:54:43 +00:00
{
propertyName : "isCellVisible" ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnType" ,
] ,
label : "Visible" ,
helpText : "Controls the visibility of the cell in the column" ,
updateHook : updateDerivedColumnsHook ,
defaultValue : true ,
controlType : "SWITCH" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : false ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . BOOLEAN ,
} ,
} ,
2021-08-17 12:54:43 +00:00
} ,
2021-10-06 12:57:05 +00:00
{
propertyName : "isDisabled" ,
label : "Disabled" ,
updateHook : updateDerivedColumnsHook ,
defaultValue : false ,
controlType : "SWITCH" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : false ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . BOOLEAN ,
} ,
} ,
2021-10-06 12:57:05 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . ICON_BUTTON ,
ColumnTypes . MENU_BUTTON ,
ColumnTypes . BUTTON ,
] ) ;
} ,
} ,
{
propertyName : "isCompact" ,
helpText : "Decides if menu items will consume lesser space" ,
updateHook : updateDerivedColumnsHook ,
label : "Compact" ,
controlType : "SWITCH" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . BOOLEAN ,
} ,
} ,
2021-10-06 12:57:05 +00:00
isTriggerProperty : false ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
} ,
2021-02-16 10:29:08 +00:00
{
propertyName : "inputFormat" ,
label : "Original Date Format" ,
controlType : "DROP_DOWN" ,
options : [
{
label : "UNIX timestamp (s)" ,
value : "Epoch" ,
} ,
{
label : "UNIX timestamp (ms)" ,
value : "Milliseconds" ,
} ,
{
label : "YYYY-MM-DD" ,
value : "YYYY-MM-DD" ,
} ,
2021-03-24 08:53:39 +00:00
{
label : "YYYY-MM-DD HH:mm" ,
value : "YYYY-MM-DD HH:mm" ,
} ,
{
label : "ISO 8601" ,
2022-01-06 09:11:40 +00:00
value : "YYYY-MM-DDTHH:mm:ss.SSSZ" ,
2021-03-24 08:53:39 +00:00
} ,
2021-02-16 10:29:08 +00:00
{
label : "YYYY-MM-DDTHH:mm:ss" ,
value : "YYYY-MM-DDTHH:mm:ss" ,
} ,
{
label : "YYYY-MM-DD hh:mm:ss" ,
value : "YYYY-MM-DD hh:mm:ss" ,
} ,
2021-03-24 08:53:39 +00:00
{
label : "Do MMM YYYY" ,
value : "Do MMM YYYY" ,
} ,
{
label : "DD/MM/YYYY" ,
value : "DD/MM/YYYY" ,
} ,
{
label : "DD/MM/YYYY HH:mm" ,
value : "DD/MM/YYYY HH:mm" ,
} ,
{
label : "LLL" ,
value : "LLL" ,
} ,
{
label : "LL" ,
value : "LL" ,
} ,
{
label : "D MMMM, YYYY" ,
value : "D MMMM, YYYY" ,
} ,
{
label : "H:mm A D MMMM, YYYY" ,
value : "H:mm A D MMMM, YYYY" ,
} ,
{
label : "MM-DD-YYYY" ,
value : "MM-DD-YYYY" ,
} ,
{
label : "DD-MM-YYYY" ,
value : "DD-MM-YYYY" ,
} ,
{
label : "MM/DD/YYYY" ,
value : "MM/DD/YYYY" ,
} ,
{
label : "DD/MM/YYYY" ,
value : "DD/MM/YYYY" ,
} ,
{
label : "DD/MM/YY" ,
value : "DD/MM/YY" ,
} ,
{
label : "MM/DD/YY" ,
value : "MM/DD/YY" ,
} ,
2021-02-16 10:29:08 +00:00
] ,
2021-05-06 14:06:41 +00:00
defaultValue : "YYYY-MM-DD HH:mm" ,
2021-02-16 10:29:08 +00:00
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
const baseProperty = getBasePropertyPath ( propertyPath ) ;
const columnType = get (
props ,
` ${ baseProperty } .columnType ` ,
"" ,
) ;
return columnType !== "date" ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [
"Epoch" ,
"Milliseconds" ,
"YYYY-MM-DD" ,
"YYYY-MM-DD HH:mm" ,
"YYYY-MM-DDTHH:mm:ss.sssZ" ,
"YYYY-MM-DDTHH:mm:ss" ,
"YYYY-MM-DD hh:mm:ss" ,
"Do MMM YYYY" ,
"DD/MM/YYYY" ,
"DD/MM/YYYY HH:mm" ,
"LLL" ,
"LL" ,
"D MMMM, YYYY" ,
"H:mm A D MMMM, YYYY" ,
"MM-DD-YYYY" ,
"DD-MM-YYYY" ,
"MM/DD/YYYY" ,
"DD/MM/YYYY" ,
"DD/MM/YY" ,
"MM/DD/YY" ,
] ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
{
propertyName : "outputFormat" ,
label : "Display Date Format" ,
controlType : "DROP_DOWN" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
options : [
{
label : "UNIX timestamp (s)" ,
value : "Epoch" ,
} ,
{
label : "UNIX timestamp (ms)" ,
value : "Milliseconds" ,
} ,
{
label : "YYYY-MM-DD" ,
value : "YYYY-MM-DD" ,
} ,
2021-03-24 08:53:39 +00:00
{
label : "YYYY-MM-DD HH:mm" ,
value : "YYYY-MM-DD HH:mm" ,
} ,
{
label : "ISO 8601" ,
2022-01-06 09:11:40 +00:00
value : "YYYY-MM-DDTHH:mm:ss.SSSZ" ,
2021-03-24 08:53:39 +00:00
} ,
2021-02-16 10:29:08 +00:00
{
label : "YYYY-MM-DDTHH:mm:ss" ,
value : "YYYY-MM-DDTHH:mm:ss" ,
} ,
{
label : "YYYY-MM-DD hh:mm:ss" ,
value : "YYYY-MM-DD hh:mm:ss" ,
} ,
{
2021-03-24 08:53:39 +00:00
label : "Do MMM YYYY" ,
value : "Do MMM YYYY" ,
} ,
{
label : "DD/MM/YYYY" ,
value : "DD/MM/YYYY" ,
} ,
{
label : "DD/MM/YYYY HH:mm" ,
value : "DD/MM/YYYY HH:mm" ,
} ,
{
label : "LLL" ,
value : "LLL" ,
} ,
{
label : "LL" ,
value : "LL" ,
} ,
{
label : "D MMMM, YYYY" ,
value : "D MMMM, YYYY" ,
} ,
{
label : "H:mm A D MMMM, YYYY" ,
value : "H:mm A D MMMM, YYYY" ,
} ,
{
label : "MM-DD-YYYY" ,
value : "MM-DD-YYYY" ,
2021-02-16 10:29:08 +00:00
} ,
{
label : "DD-MM-YYYY" ,
value : "DD-MM-YYYY" ,
} ,
{
2021-03-24 08:53:39 +00:00
label : "MM/DD/YYYY" ,
value : "MM/DD/YYYY" ,
} ,
{
label : "DD/MM/YYYY" ,
value : "DD/MM/YYYY" ,
} ,
{
label : "DD/MM/YY" ,
value : "DD/MM/YY" ,
} ,
{
label : "MM/DD/YY" ,
value : "MM/DD/YY" ,
2021-02-16 10:29:08 +00:00
} ,
] ,
2021-05-06 14:06:41 +00:00
defaultValue : "YYYY-MM-DD HH:mm" ,
2021-02-16 10:29:08 +00:00
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
const baseProperty = getBasePropertyPath ( propertyPath ) ;
const columnType = get (
props ,
` ${ baseProperty } .columnType ` ,
"" ,
) ;
return columnType !== "date" ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnType" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [
"Epoch" ,
"Milliseconds" ,
"YYYY-MM-DD" ,
"YYYY-MM-DD HH:mm" ,
"YYYY-MM-DDTHH:mm:ss.sssZ" ,
"YYYY-MM-DDTHH:mm:ss" ,
"YYYY-MM-DD hh:mm:ss" ,
"Do MMM YYYY" ,
"DD/MM/YYYY" ,
"DD/MM/YYYY HH:mm" ,
"LLL" ,
"LL" ,
"D MMMM, YYYY" ,
"H:mm A D MMMM, YYYY" ,
"MM-DD-YYYY" ,
"DD-MM-YYYY" ,
"MM/DD/YYYY" ,
"DD/MM/YYYY" ,
"DD/MM/YY" ,
"MM/DD/YY" ,
] ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
2021-07-09 12:21:51 +00:00
{
propertyName : "onClick" ,
label : "onClick" ,
controlType : "ACTION_SELECTOR" ,
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
const baseProperty = getBasePropertyPath ( propertyPath ) ;
const columnType = get (
props ,
` ${ baseProperty } .columnType ` ,
"" ,
) ;
return columnType !== "image" ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-07-09 12:21:51 +00:00
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : true ,
} ,
2021-02-16 10:29:08 +00:00
] ,
} ,
{
sectionName : "Styles" ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
2021-09-01 09:50:23 +00:00
return hideByColumnType (
props ,
propertyPath ,
[
ColumnTypes . TEXT ,
ColumnTypes . DATE ,
ColumnTypes . NUMBER ,
ColumnTypes . URL ,
] ,
true ,
2021-02-16 10:29:08 +00:00
) ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" ] ,
2021-02-16 10:29:08 +00:00
children : [
{
propertyName : "horizontalAlignment" ,
label : "Text Align" ,
controlType : "ICON_TABS" ,
options : [
{
icon : "LEFT_ALIGN" ,
value : "LEFT" ,
} ,
{
icon : "CENTER_ALIGN" ,
value : "CENTER" ,
} ,
{
icon : "RIGHT_ALIGN" ,
value : "RIGHT" ,
} ,
] ,
defaultValue : "LEFT" ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [ "LEFT" , "CENTER" , "RIGHT" ] ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
{
propertyName : "textSize" ,
label : "Text Size" ,
controlType : "DROP_DOWN" ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
options : [
{
label : "Heading 1" ,
value : "HEADING1" ,
subText : "24px" ,
icon : "HEADING_ONE" ,
} ,
{
label : "Heading 2" ,
value : "HEADING2" ,
subText : "18px" ,
icon : "HEADING_TWO" ,
} ,
{
label : "Heading 3" ,
value : "HEADING3" ,
subText : "16px" ,
icon : "HEADING_THREE" ,
} ,
{
label : "Paragraph" ,
value : "PARAGRAPH" ,
subText : "14px" ,
icon : "PARAGRAPH" ,
} ,
{
label : "Paragraph 2" ,
value : "PARAGRAPH2" ,
subText : "12px" ,
icon : "PARAGRAPH_TWO" ,
} ,
] ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : false ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [
"HEADING1" ,
"HEADING2" ,
"HEADING3" ,
"PARAGRAPH" ,
"PARAGRAPH2" ,
] ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
} ,
{
propertyName : "fontStyle" ,
label : "Font Style" ,
controlType : "BUTTON_TABS" ,
options : [
{
icon : "BOLD_FONT" ,
value : "BOLD" ,
} ,
{
icon : "ITALICS_FONT" ,
value : "ITALIC" ,
} ,
2021-09-06 07:06:15 +00:00
{
icon : "UNDERLINE" ,
value : "UNDERLINE" ,
} ,
2021-02-16 10:29:08 +00:00
] ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : false ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
} ,
} ,
2021-02-16 10:29:08 +00:00
} ,
{
propertyName : "verticalAlignment" ,
label : "Vertical Alignment" ,
controlType : "ICON_TABS" ,
options : [
{
icon : "VERTICAL_TOP" ,
value : "TOP" ,
} ,
{
icon : "VERTICAL_CENTER" ,
value : "CENTER" ,
} ,
{
icon : "VERTICAL_BOTTOM" ,
value : "BOTTOM" ,
} ,
] ,
defaultValue : "LEFT" ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [ "TOP" , "CENTER" , "BOTTOM" ] ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
{
propertyName : "textColor" ,
label : "Text Color" ,
controlType : "COLOR_PICKER" ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
regex : /^(?![<|{{]).+/ ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
{
propertyName : "cellBackground" ,
label : "Cell Background" ,
controlType : "COLOR_PICKER" ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
regex : /^(?![<|{{]).+/ ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
] ,
} ,
{
sectionName : "Button Properties" ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
2021-10-06 12:57:05 +00:00
return hideByColumnType (
props ,
propertyPath ,
[
ColumnTypes . BUTTON ,
ColumnTypes . MENU_BUTTON ,
ColumnTypes . ICON_BUTTON ,
] ,
true ,
) ;
2021-02-16 10:29:08 +00:00
} ,
children : [
2021-09-01 09:50:23 +00:00
{
propertyName : "iconName" ,
label : "Icon" ,
helpText : "Sets the icon to be used for the icon button" ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . ICON_BUTTON ,
2021-10-06 12:57:05 +00:00
ColumnTypes . MENU_BUTTON ,
2021-09-01 09:50:23 +00:00
] ) ;
} ,
2021-10-06 12:57:05 +00:00
updateHook : updateIconAlignment ,
2021-09-01 09:50:23 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
controlType : "ICON_SELECT" ,
customJSControl : "COMPUTE_VALUE" ,
2021-11-16 10:42:20 +00:00
defaultIconName : "add" ,
2021-09-01 09:50:23 +00:00
isJSConvertible : true ,
2021-12-09 06:15:59 +00:00
isBindProperty : true ,
2021-09-01 09:50:23 +00:00
isTriggerProperty : false ,
validation : {
2021-12-09 06:15:59 +00:00
type : ValidationTypes . TABLE_PROPERTY ,
2021-09-01 09:50:23 +00:00
params : {
2021-12-09 06:15:59 +00:00
type : ValidationTypes . TEXT ,
params : {
allowedValues : ICON_NAMES ,
default : IconNames . ADD ,
} ,
2021-09-01 09:50:23 +00:00
} ,
} ,
} ,
2021-08-17 12:54:43 +00:00
{
2021-10-06 12:57:05 +00:00
propertyName : "iconAlign" ,
label : "Icon Alignment" ,
helpText : "Sets the icon alignment of the menu button" ,
2022-02-10 19:00:20 +00:00
controlType : "ICON_TABS" ,
options : [
{
icon : "VERTICAL_LEFT" ,
value : "left" ,
} ,
{
icon : "VERTICAL_RIGHT" ,
value : "right" ,
} ,
] ,
2021-10-06 12:57:05 +00:00
isBindProperty : false ,
2021-08-17 12:54:43 +00:00
isTriggerProperty : false ,
2021-10-06 12:57:05 +00:00
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
validation : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [ "center" , "left" , "right" ] ,
} ,
} ,
2021-08-17 12:54:43 +00:00
} ,
2021-02-16 10:29:08 +00:00
{
propertyName : "buttonLabel" ,
label : "Label" ,
controlType : "COMPUTE_VALUE" ,
defaultValue : "Action" ,
updateHook : updateDerivedColumnsHook ,
2021-09-01 09:50:23 +00:00
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . BUTTON ,
] ) ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : false ,
} ,
2021-10-06 12:57:05 +00:00
{
propertyName : "menuButtonLabel" ,
label : "Label" ,
controlType : "COMPUTE_VALUE" ,
defaultValue : "Open Menu" ,
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
isBindProperty : true ,
isTriggerProperty : false ,
} ,
2021-02-16 10:29:08 +00:00
{
2021-09-23 15:14:24 +00:00
propertyName : "buttonColor" ,
2021-02-16 10:29:08 +00:00
label : "Button Color" ,
controlType : "COLOR_PICKER" ,
helpText : "Changes the color of the button" ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
updateHook : updateDerivedColumnsHook ,
2021-09-01 09:50:23 +00:00
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . BUTTON ,
2021-09-23 15:14:24 +00:00
ColumnTypes . ICON_BUTTON ,
2021-09-01 09:50:23 +00:00
] ) ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
regex : /^(?![<|{{]).+/ ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
isTriggerProperty : false ,
} ,
2021-09-01 09:50:23 +00:00
{
propertyName : "buttonVariant" ,
label : "Button Variant" ,
controlType : "DROP_DOWN" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
helpText : "Sets the variant of the icon button" ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . ICON_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
options : [
{
2021-10-12 08:04:51 +00:00
label : "Primary" ,
value : ButtonVariantTypes.PRIMARY ,
2021-09-01 09:50:23 +00:00
} ,
{
2021-10-12 08:04:51 +00:00
label : "Secondary" ,
value : ButtonVariantTypes.SECONDARY ,
2021-09-01 09:50:23 +00:00
} ,
{
2021-10-12 08:04:51 +00:00
label : "Tertiary" ,
value : ButtonVariantTypes.TERTIARY ,
2021-09-01 09:50:23 +00:00
} ,
] ,
2021-11-23 14:10:13 +00:00
defaultValue : ButtonVariantTypes.PRIMARY ,
2021-11-26 11:33:50 +00:00
2021-10-12 08:04:51 +00:00
isBindProperty : true ,
2021-09-01 09:50:23 +00:00
isTriggerProperty : false ,
2021-10-12 08:04:51 +00:00
validation : {
2021-12-09 12:12:42 +00:00
type : ValidationTypes . TABLE_PROPERTY ,
2021-10-12 08:04:51 +00:00
params : {
2021-12-09 12:12:42 +00:00
type : ValidationTypes . TEXT ,
params : {
default : ButtonVariantTypes . PRIMARY ,
allowedValues : [
ButtonVariantTypes . PRIMARY ,
ButtonVariantTypes . SECONDARY ,
ButtonVariantTypes . TERTIARY ,
] ,
} ,
2021-10-12 08:04:51 +00:00
} ,
} ,
2021-09-01 09:50:23 +00:00
} ,
{
propertyName : "borderRadius" ,
label : "Border Radius" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
helpText :
"Rounds the corners of the icon button's outer border edge" ,
controlType : "BORDER_RADIUS_OPTIONS" ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . ICON_BUTTON ,
] ) ;
} ,
options : [
ButtonBorderRadiusTypes . SHARP ,
ButtonBorderRadiusTypes . ROUNDED ,
ButtonBorderRadiusTypes . CIRCLE ,
] ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2022-01-13 05:24:12 +00:00
isBindProperty : true ,
2021-09-01 09:50:23 +00:00
isTriggerProperty : false ,
validation : {
2022-01-13 05:24:12 +00:00
type : ValidationTypes . TABLE_PROPERTY ,
2021-09-01 09:50:23 +00:00
params : {
2022-01-13 05:24:12 +00:00
type : ValidationTypes . TEXT ,
params : {
allowedValues : [ "CIRCLE" , "SHARP" , "ROUNDED" ] ,
} ,
2021-09-01 09:50:23 +00:00
} ,
} ,
} ,
{
propertyName : "boxShadow" ,
label : "Box Shadow" ,
helpText :
"Enables you to cast a drop shadow from the frame of the widget" ,
controlType : "BOX_SHADOW_OPTIONS" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . ICON_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2022-01-13 05:24:12 +00:00
isBindProperty : true ,
2021-09-01 09:50:23 +00:00
isTriggerProperty : false ,
validation : {
2022-01-13 05:24:12 +00:00
type : ValidationTypes . TABLE_PROPERTY ,
2021-09-01 09:50:23 +00:00
params : {
2022-01-13 05:24:12 +00:00
type : ValidationTypes . TEXT ,
params : {
allowedValues : [
"NONE" ,
"VARIANT1" ,
"VARIANT2" ,
"VARIANT3" ,
"VARIANT4" ,
"VARIANT5" ,
] ,
} ,
2021-09-01 09:50:23 +00:00
} ,
} ,
} ,
{
propertyName : "boxShadowColor" ,
helpText : "Sets the shadow color of the widget" ,
label : "Shadow Color" ,
controlType : "COLOR_PICKER" ,
customJSControl : "COMPUTE_VALUE" ,
isJSConvertible : true ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . ICON_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2022-01-13 05:24:12 +00:00
isBindProperty : true ,
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
regex : /^(?![<|{{]).+/ ,
} ,
} ,
} ,
2021-09-01 09:50:23 +00:00
isTriggerProperty : false ,
} ,
2021-02-16 10:29:08 +00:00
{
propertyName : "buttonLabelColor" ,
label : "Label Color" ,
controlType : "COLOR_PICKER" ,
isJSConvertible : true ,
customJSControl : "COMPUTE_VALUE" ,
2021-09-01 09:50:23 +00:00
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . BUTTON ,
] ) ;
} ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-09-01 09:50:23 +00:00
updateHook : updateDerivedColumnsHook ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : false ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
regex : /^(?![<|{{]).+/ ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
} ,
2021-10-06 12:57:05 +00:00
{
propertyName : "menuColor" ,
helpText :
"Sets the custom color preset based on the menu button variant" ,
label : "Menu Color" ,
controlType : "COLOR_PICKER" ,
2022-01-13 05:24:12 +00:00
isBindProperty : true ,
2021-10-06 12:57:05 +00:00
isTriggerProperty : false ,
2021-11-29 15:37:05 +00:00
isJSConvertible : true ,
2021-10-06 12:57:05 +00:00
placeholderText : "#FFFFFF / Gray / rgb(255, 99, 71)" ,
2022-01-13 05:24:12 +00:00
validation : {
type : ValidationTypes . TABLE_PROPERTY ,
params : {
type : ValidationTypes . TEXT ,
params : {
regex : /^(?![<|{{]).+/ ,
} ,
} ,
} ,
2021-10-06 12:57:05 +00:00
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
// Remove menu Style once Custom is Chosen
updateHook : updateDerivedColumnsHook ,
} ,
{
propertyName : "menuVariant" ,
label : "Menu Variant" ,
controlType : "DROP_DOWN" ,
helpText : "Sets the variant of the menu button" ,
options : [
{
2021-10-12 08:04:51 +00:00
label : "Primary" ,
value : ButtonVariantTypes.PRIMARY ,
2021-10-06 12:57:05 +00:00
} ,
{
2021-10-12 08:04:51 +00:00
label : "Secondary" ,
value : ButtonVariantTypes.SECONDARY ,
2021-10-06 12:57:05 +00:00
} ,
{
2021-10-12 08:04:51 +00:00
label : "Tertiary" ,
value : ButtonVariantTypes.TERTIARY ,
2021-10-06 12:57:05 +00:00
} ,
] ,
isJSConvertible : true ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
2021-10-12 08:04:51 +00:00
isBindProperty : true ,
2021-10-06 12:57:05 +00:00
isTriggerProperty : false ,
validation : {
type : ValidationTypes . TEXT ,
params : {
2021-10-12 08:04:51 +00:00
default : ButtonVariantTypes . PRIMARY ,
allowedValues : [
ButtonVariantTypes . PRIMARY ,
ButtonVariantTypes . SECONDARY ,
ButtonVariantTypes . TERTIARY ,
] ,
2021-10-06 12:57:05 +00:00
} ,
} ,
} ,
{
propertyName : "borderRadius" ,
label : "Border Radius" ,
helpText :
"Rounds the corners of the icon button's outer border edge" ,
controlType : "BUTTON_BORDER_RADIUS_OPTIONS" ,
isBindProperty : false ,
isTriggerProperty : false ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
validation : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [ "CIRCLE" , "SHARP" , "ROUNDED" ] ,
} ,
} ,
} ,
{
propertyName : "boxShadow" ,
label : "Box Shadow" ,
helpText :
"Enables you to cast a drop shadow from the frame of the widget" ,
controlType : "BOX_SHADOW_OPTIONS" ,
isBindProperty : false ,
isTriggerProperty : false ,
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
validation : {
type : ValidationTypes . TEXT ,
params : {
allowedValues : [
"NONE" ,
"VARIANT1" ,
"VARIANT2" ,
"VARIANT3" ,
"VARIANT4" ,
"VARIANT5" ,
] ,
} ,
} ,
} ,
{
propertyName : "boxShadowColor" ,
helpText : "Sets the shadow color of the widget" ,
label : "Shadow Color" ,
controlType : "COLOR_PICKER" ,
isBindProperty : false ,
isTriggerProperty : false ,
updateHook : updateDerivedColumnsHook ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . MENU_BUTTON ,
] ) ;
} ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
validation : {
type : ValidationTypes . TEXT ,
params : {
regex : /^(?![<|{{]).+/ ,
} ,
} ,
} ,
2021-02-16 10:29:08 +00:00
{
helpText : "Triggers an action when the button is clicked" ,
propertyName : "onClick" ,
label : "onClick" ,
controlType : "ACTION_SELECTOR" ,
2021-02-19 04:49:54 +00:00
additionalAutoComplete : ( props : TableWidgetProps ) = > ( {
currentRow : Object.assign (
{ } ,
. . . Object . keys ( props . primaryColumns ) . map ( ( key ) = > ( {
[ key ] : "" ,
} ) ) ,
) ,
} ) ,
2021-02-16 10:29:08 +00:00
isJSConvertible : true ,
2021-08-02 13:06:22 +00:00
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : true ,
2021-10-06 12:57:05 +00:00
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType ( props , propertyPath , [
ColumnTypes . BUTTON ,
ColumnTypes . ICON_BUTTON ,
] ) ;
} ,
} ,
] ,
} ,
{
sectionName : "Menu Items" ,
hidden : ( props : TableWidgetProps , propertyPath : string ) = > {
return hideByColumnType (
props ,
propertyPath ,
[ ColumnTypes . MENU_BUTTON ] ,
true ,
) ;
} ,
updateHook : updateDerivedColumnsHook ,
children : [
{
helpText : "Menu items" ,
propertyName : "menuItems" ,
controlType : "MENU_ITEMS" ,
label : "" ,
isBindProperty : false ,
isTriggerProperty : false ,
dependencies : [ "derivedColumns" , "columnOrder" ] ,
panelConfig : {
editableTitle : true ,
titlePropertyName : "label" ,
panelIdPropertyName : "id" ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
children : [
{
sectionName : "General" ,
children : [
{
propertyName : "label" ,
helpText : "Sets the label of a menu item" ,
label : "Label" ,
controlType : "INPUT_TEXT" ,
placeholderText : "Enter label" ,
isBindProperty : true ,
isTriggerProperty : false ,
validation : { type : ValidationTypes . TEXT } ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
{
propertyName : "backgroundColor" ,
helpText :
"Sets the background color of a menu item" ,
label : "Background color" ,
controlType : "COLOR_PICKER" ,
isBindProperty : false ,
isTriggerProperty : false ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
{
propertyName : "textColor" ,
helpText : "Sets the text color of a menu item" ,
label : "Text color" ,
controlType : "COLOR_PICKER" ,
isBindProperty : false ,
isTriggerProperty : false ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
{
propertyName : "isDisabled" ,
helpText : "Disables input to the widget" ,
label : "Disabled" ,
controlType : "SWITCH" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : false ,
validation : { type : ValidationTypes . BOOLEAN } ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
{
propertyName : "isVisible" ,
helpText : "Controls the visibility of the widget" ,
label : "Visible" ,
controlType : "SWITCH" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : false ,
validation : { type : ValidationTypes . BOOLEAN } ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
] ,
} ,
{
sectionName : "Icon Options" ,
children : [
{
propertyName : "iconName" ,
label : "Icon" ,
helpText :
"Sets the icon to be used for a menu item" ,
controlType : "ICON_SELECT" ,
isBindProperty : false ,
isTriggerProperty : false ,
validation : { type : ValidationTypes . TEXT } ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
{
propertyName : "iconColor" ,
helpText : "Sets the icon color of a menu item" ,
label : "Icon color" ,
controlType : "COLOR_PICKER" ,
isBindProperty : false ,
isTriggerProperty : false ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
{
propertyName : "iconAlign" ,
label : "Icon alignment" ,
helpText : "Sets the icon alignment of a menu item" ,
2022-02-10 19:00:20 +00:00
controlType : "ICON_TABS" ,
options : [
{
icon : "VERTICAL_LEFT" ,
value : "left" ,
} ,
{
icon : "VERTICAL_RIGHT" ,
value : "right" ,
} ,
] ,
2021-10-06 12:57:05 +00:00
isBindProperty : false ,
isTriggerProperty : false ,
validation : { type : ValidationTypes . TEXT } ,
updateHook : updateDerivedColumnsHook ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
] ,
} ,
{
2021-11-26 09:32:04 +00:00
sectionName : "Events" ,
2021-10-06 12:57:05 +00:00
children : [
{
helpText :
"Triggers an action when the menu item is clicked" ,
propertyName : "onClick" ,
label : "onItemClick" ,
controlType : "ACTION_SELECTOR" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : true ,
dependencies : [
"primaryColumns" ,
"derivedColumns" ,
"columnOrder" ,
] ,
} ,
] ,
} ,
] ,
} ,
2021-02-16 10:29:08 +00:00
} ,
] ,
} ,
] ,
} ,
} ,
2021-12-08 14:06:14 +00:00
{
helpText :
"Assigns a unique column which helps maintain selectedRows and triggeredRows based on value" ,
propertyName : "primaryColumnId" ,
dependencies : [ "primaryColumns" ] ,
label : "Primary key column" ,
controlType : "PRIMARY_COLUMNS_DROPDOWN" ,
isBindProperty : true ,
isTriggerProperty : false ,
validation : { type : ValidationTypes . TEXT } ,
} ,
2021-02-16 10:29:08 +00:00
{
propertyName : "defaultSearchText" ,
label : "Default Search Text" ,
controlType : "INPUT_TEXT" ,
2021-09-20 10:43:44 +00:00
placeholderText : "{{appsmith.user.name}}" ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : false ,
2021-07-26 05:50:46 +00:00
validation : { type : ValidationTypes . TEXT } ,
2021-02-16 10:29:08 +00:00
} ,
{
2021-07-26 05:50:46 +00:00
helpText : "Selects row(s) by default" ,
2021-02-16 10:29:08 +00:00
propertyName : "defaultSelectedRow" ,
label : "Default Selected Row" ,
controlType : "INPUT_TEXT" ,
2021-09-20 10:43:44 +00:00
placeholderText : "0" ,
2021-02-16 10:29:08 +00:00
isBindProperty : true ,
isTriggerProperty : false ,
2021-07-26 05:50:46 +00:00
validation : {
type : ValidationTypes . FUNCTION ,
params : {
fn : defaultSelectedRowValidation ,
expected : {
type : "Index of row(s)" ,
example : "0 | [0, 1]" ,
2021-08-04 05:34:44 +00:00
autocompleteDataType : AutocompleteDataType.STRING ,
2021-07-26 05:50:46 +00:00
} ,
} ,
} ,
2021-08-02 13:06:22 +00:00
dependencies : [ "multiRowSelection" ] ,
2021-02-16 10:29:08 +00:00
} ,
2021-09-06 07:05:51 +00:00
{
propertyName : "compactMode" ,
helpText : "Selects row height" ,
2021-09-20 10:43:44 +00:00
label : "Default Row Height" ,
2021-09-06 07:05:51 +00:00
controlType : "DROP_DOWN" ,
defaultValue : "DEFAULT" ,
isBindProperty : true ,
isTriggerProperty : false ,
options : [
{
label : "Short" ,
value : "SHORT" ,
} ,
{
label : "Default" ,
value : "DEFAULT" ,
} ,
{
label : "Tall" ,
value : "TALL" ,
} ,
] ,
} ,
2021-02-16 10:29:08 +00:00
{
helpText :
"Bind the Table.pageNo property in your API and call it onPageChange" ,
propertyName : "serverSidePaginationEnabled" ,
label : "Server Side Pagination" ,
controlType : "SWITCH" ,
isBindProperty : false ,
isTriggerProperty : false ,
} ,
2021-08-30 09:24:59 +00:00
{
2021-11-26 05:14:00 +00:00
helpText : createMessage ( TABLE_WIDGET_TOTAL_RECORD_TOOLTIP ) ,
2021-08-30 09:24:59 +00:00
propertyName : "totalRecordsCount" ,
label : "Total Record Count" ,
controlType : "INPUT_TEXT" ,
placeholderText : "Enter total record count" ,
isBindProperty : true ,
isTriggerProperty : false ,
validation : {
type : ValidationTypes . FUNCTION ,
params : {
fn : totalRecordsCountValidation ,
expected : {
type : "Number" ,
example : "10" ,
autocompleteDataType : AutocompleteDataType.STRING ,
} ,
} ,
} ,
hidden : ( props : TableWidgetProps ) = >
! ! ! props . serverSidePaginationEnabled ,
dependencies : [ "serverSidePaginationEnabled" ] ,
} ,
2021-02-16 10:29:08 +00:00
{
helpText : "Controls the visibility of the widget" ,
propertyName : "isVisible" ,
isJSConvertible : true ,
label : "Visible" ,
controlType : "SWITCH" ,
isBindProperty : true ,
isTriggerProperty : false ,
2021-11-09 05:08:39 +00:00
validation : {
type : ValidationTypes . BOOLEAN ,
} ,
} ,
2021-12-14 07:55:58 +00:00
{
propertyName : "animateLoading" ,
label : "Animate Loading" ,
controlType : "SWITCH" ,
helpText : "Controls the loading of the widget" ,
defaultValue : true ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : false ,
validation : { type : ValidationTypes . BOOLEAN } ,
} ,
2021-11-09 05:08:39 +00:00
{
helpText : "Controls sorting in View Mode" ,
propertyName : "isSortable" ,
isJSConvertible : true ,
label : "Sortable" ,
controlType : "SWITCH" ,
isBindProperty : true ,
isTriggerProperty : false ,
validation : {
type : ValidationTypes . BOOLEAN ,
params : {
default : true ,
} ,
} ,
2021-02-16 10:29:08 +00:00
} ,
{
propertyName : "multiRowSelection" ,
label : "Enable multi row selection" ,
controlType : "SWITCH" ,
isBindProperty : false ,
isTriggerProperty : false ,
} ,
2021-12-09 06:35:27 +00:00
{
propertyName : "enableClientSideSearch" ,
label : "Enable client side search" ,
controlType : "SWITCH" ,
isBindProperty : false ,
isTriggerProperty : false ,
} ,
2021-02-16 10:29:08 +00:00
] ,
} ,
2021-07-01 06:53:21 +00:00
{
2021-11-26 09:32:04 +00:00
sectionName : "Events" ,
2021-07-01 06:53:21 +00:00
children : [
{
helpText : "Triggers an action when a table row is selected" ,
propertyName : "onRowSelected" ,
label : "onRowSelected" ,
controlType : "ACTION_SELECTOR" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : true ,
} ,
{
helpText : "Triggers an action when a table page is changed" ,
propertyName : "onPageChange" ,
label : "onPageChange" ,
controlType : "ACTION_SELECTOR" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : true ,
} ,
{
helpText : "Triggers an action when a table page size is changed" ,
propertyName : "onPageSizeChange" ,
label : "onPageSizeChange" ,
controlType : "ACTION_SELECTOR" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : true ,
} ,
{
propertyName : "onSearchTextChanged" ,
label : "onSearchTextChanged" ,
controlType : "ACTION_SELECTOR" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : true ,
} ,
2021-08-25 13:20:06 +00:00
{
helpText : "Triggers an action when a table column is sorted" ,
propertyName : "onSort" ,
label : "onSort" ,
controlType : "ACTION_SELECTOR" ,
isJSConvertible : true ,
isBindProperty : true ,
isTriggerProperty : true ,
} ,
2021-07-01 06:53:21 +00:00
] ,
} ,
2021-05-11 07:32:58 +00:00
{
sectionName : "Header options" ,
children : [
{
helpText : "Toggle visibility of the search box" ,
propertyName : "isVisibleSearch" ,
label : "Search" ,
controlType : "SWITCH" ,
2022-01-16 07:04:24 +00:00
isJSConvertible : true ,
isBindProperty : true ,
2021-05-11 08:08:31 +00:00
isTriggerProperty : false ,
2022-01-16 07:04:24 +00:00
validation : { type : ValidationTypes . BOOLEAN } ,
2021-05-11 07:32:58 +00:00
} ,
{
helpText : "Toggle visibility of the filters" ,
propertyName : "isVisibleFilters" ,
label : "Filters" ,
controlType : "SWITCH" ,
2022-01-16 07:04:24 +00:00
isJSConvertible : true ,
isBindProperty : true ,
2021-05-11 08:08:31 +00:00
isTriggerProperty : false ,
2022-01-16 07:04:24 +00:00
validation : { type : ValidationTypes . BOOLEAN } ,
2021-05-11 07:32:58 +00:00
} ,
{
helpText : "Toggle visibility of the data download" ,
propertyName : "isVisibleDownload" ,
label : "Download" ,
controlType : "SWITCH" ,
2022-01-16 07:04:24 +00:00
isJSConvertible : true ,
isBindProperty : true ,
2021-05-11 08:08:31 +00:00
isTriggerProperty : false ,
2022-01-16 07:04:24 +00:00
validation : { type : ValidationTypes . BOOLEAN } ,
2021-05-11 07:32:58 +00:00
} ,
{
helpText : "Toggle visibility of the pagination" ,
propertyName : "isVisiblePagination" ,
label : "Pagination" ,
controlType : "SWITCH" ,
2022-01-16 07:04:24 +00:00
isJSConvertible : true ,
isBindProperty : true ,
2021-05-11 08:08:31 +00:00
isTriggerProperty : false ,
2022-01-16 07:04:24 +00:00
validation : { type : ValidationTypes . BOOLEAN } ,
2021-05-11 07:32:58 +00:00
} ,
2021-08-18 10:33:26 +00:00
{
propertyName : "delimiter" ,
label : "CSV Separator" ,
controlType : "INPUT_TEXT" ,
placeholderText : "Enter CSV separator" ,
helpText : "The character used for separating the CSV download file." ,
isBindProperty : true ,
isTriggerProperty : false ,
defaultValue : "," ,
validation : {
type : ValidationTypes . TEXT ,
} ,
hidden : ( props : TableWidgetProps ) = > ! props . isVisibleDownload ,
dependencies : [ "isVisibleDownload" ] ,
} ,
2021-02-16 10:29:08 +00:00
] ,
} ,
{
sectionName : "Styles" ,
children : [
{
propertyName : "cellBackground" ,
2022-01-11 05:38:17 +00:00
label : "Cell Background Color" ,
2021-02-16 10:29:08 +00:00
controlType : "COLOR_PICKER" ,
updateHook : updateColumnStyles ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" ] ,
2021-02-16 10:29:08 +00:00
isBindProperty : false ,
isTriggerProperty : false ,
} ,
{
propertyName : "textColor" ,
label : "Text Color" ,
controlType : "COLOR_PICKER" ,
updateHook : updateColumnStyles ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" ] ,
2021-02-16 10:29:08 +00:00
isBindProperty : false ,
isTriggerProperty : false ,
} ,
{
propertyName : "textSize" ,
label : "Text Size" ,
controlType : "DROP_DOWN" ,
updateHook : updateColumnStyles ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" ] ,
2021-02-16 10:29:08 +00:00
options : [
{
label : "Heading 1" ,
value : "HEADING1" ,
subText : "24px" ,
icon : "HEADING_ONE" ,
} ,
{
label : "Heading 2" ,
value : "HEADING2" ,
subText : "18px" ,
icon : "HEADING_TWO" ,
} ,
{
label : "Heading 3" ,
value : "HEADING3" ,
subText : "16px" ,
icon : "HEADING_THREE" ,
} ,
{
label : "Paragraph" ,
value : "PARAGRAPH" ,
subText : "14px" ,
icon : "PARAGRAPH" ,
} ,
{
label : "Paragraph 2" ,
value : "PARAGRAPH2" ,
subText : "12px" ,
icon : "PARAGRAPH_TWO" ,
} ,
] ,
isBindProperty : false ,
isTriggerProperty : false ,
} ,
{
propertyName : "fontStyle" ,
label : "Font Style" ,
controlType : "BUTTON_TABS" ,
updateHook : updateColumnStyles ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" ] ,
2021-02-16 10:29:08 +00:00
options : [
{
icon : "BOLD_FONT" ,
value : "BOLD" ,
} ,
{
icon : "ITALICS_FONT" ,
value : "ITALIC" ,
} ,
] ,
isBindProperty : false ,
isTriggerProperty : false ,
} ,
{
propertyName : "horizontalAlignment" ,
label : "Text Align" ,
controlType : "ICON_TABS" ,
updateHook : updateColumnStyles ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" ] ,
2021-02-16 10:29:08 +00:00
options : [
{
icon : "LEFT_ALIGN" ,
value : "LEFT" ,
} ,
{
icon : "CENTER_ALIGN" ,
value : "CENTER" ,
} ,
{
icon : "RIGHT_ALIGN" ,
value : "RIGHT" ,
} ,
] ,
defaultValue : "LEFT" ,
isBindProperty : false ,
isTriggerProperty : false ,
} ,
{
propertyName : "verticalAlignment" ,
label : "Vertical Alignment" ,
controlType : "ICON_TABS" ,
updateHook : updateColumnStyles ,
2021-08-02 13:06:22 +00:00
dependencies : [ "primaryColumns" , "derivedColumns" ] ,
2021-02-16 10:29:08 +00:00
options : [
{
icon : "VERTICAL_TOP" ,
value : "TOP" ,
} ,
{
icon : "VERTICAL_CENTER" ,
value : "CENTER" ,
} ,
{
icon : "VERTICAL_BOTTOM" ,
value : "BOTTOM" ,
} ,
] ,
defaultValue : "LEFT" ,
isBindProperty : false ,
isTriggerProperty : false ,
} ,
] ,
} ,
2021-09-01 09:50:23 +00:00
] as PropertyPaneConfig [ ] ;
