FM BetterForms
BF Editorfmbetterforms.com
1.0 dont use
1.0 dont use
  • Introduction
  • Features Summary
  • Getting Started
    • System Overview
    • Integration
      • 1. Configure FileMaker Server
      • 2. Add your Server to BetterForms
      • 3. Introduction to Hooks
      • 4. Create your first Site
      • 5. Create your first Page
      • 6. Configure your FileMaker File(s)
      • 7. Run your first Hook
      • Next Steps
    • Common Customizations
      • Introduction to Actions
      • Introduction to Buttons
      • Page Navigation
      • Displaying Data in a Table
    • Support
      • Hacking a Webpage
      • Learning JSON
  • Reference
    • Site Settings
      • Navigation
      • Slots / Code Injection
      • App Model
      • Site-wide Named Actions
    • Page Settings
      • Data Model
      • Card / Window Modals
      • Validation
        • Custom Validators
      • Misc Page Settings
    • Page Elements
      • Common
        • Button
        • Data Table
        • HTML
      • Grouping Elements
        • Tabs
        • panel
        • accordion
        • listrows
      • Uploading Files
        • dropzone
        • dropzone to S3
        • uploadCare
      • Misc Elements
        • Plain Text / Code Editor
        • signature
        • fullCalendar
        • rangeSlider
      • Payment Gateways
        • Authorize.net
        • PayPal
        • Stripe
      • Adding Custom Page Elements
    • Actions Processor
      • Named Actions
      • Actions
        • runUtilityHook
        • path
        • debounce
        • throttle
        • showAlert
        • showModal / hideModal
        • function
        • clipboard
        • cookie
        • setFocus
        • wait
        • emit
        • validate
        • channelJoinAnon
        • channelLeaveAnon
        • messageSend
        • messageSendAnonChannel
      • Authentication Actions
    • Script Hooks
      • Globals Variables
        • $$BF_Model
        • $$BF_App
        • $$BF_State
      • Keeping Keys Private
      • Reducing Payload Size
      • API Callback Endpoint
      • Common Hooks
      • Scoped Hooks
    • Users & Authentication
      • Managing User Accounts
      • Custom Login Pages
    • Advanced Configuration
      • Custom Domains
    • BF Utility Functions
    • BF Error Codes
    • Messaging
      • Adding users to channels
      • Removing users from channels
      • Sending messages
      • Get connected users
      • Get active channels
  • Usage Tips
    • Troubleshooting
      • Debugging
      • Frozen Actions Queue
    • JavaScript Tips
      • Calling Named Actions from HTML Vue Events
      • Calculations
    • System Overview
    • Forms Processor
      • Form Types
      • HTML & VueJS
      • Styling and Design
      • JS Caclulations and Functions
    • Customizing and Styling
      • Custom Components
      • Custom CSS
      • Custom Components
      • Page Pre-loaders
      • Favicon
    • Design Patterns and Best Practices
      • Working with environments
      • Handling Data
      • Saving Data
      • Optimization
      • Business Logic
      • UI / UX
  • Security
    • Authentication
    • Security White Paper
    • Firewalls
    • Technology Stack
  • Compatibility
Powered by GitBook
On this page
  • Additional keys:
  • Slots Example
  • Slots
  • Accessing Data in slots
  • Child Rows
  • Interacting with the Table (Row Click Actions)

Was this helpful?

  1. Reference
  2. Page Elements
  3. Common

Data Table

PreviousButtonNextHTML

Last updated 1 month ago

Was this helpful?

This component is based on Refer to source code for additional documentation.

Additional keys:

Additional Keys
Type
Description

model

string

The key of an array in your data model containing the data to display in the table

options

object

Various options as defined in the source code (see link above)

actions_onRowClick

array

(optional) Array of actions to execute when row is clicked

slots

array

(optional) Array of objects, allows insertion of HTML content (see below)

Slots Example

Add the slots key to this element to define HTML regions to be displayed with the table. The slot key within each object defines the name of the slot, which can be referenced in the columns key.

If you name a slot child_row, that HTML content will be displayed when the row of the table is expanded. (see CSS trick for how to customize the look of the child row icon)

"columns": ["name", "title", "slot_name", "button_slot"],
"slots": [{
    "html": "<h1>{{model.title}}</h1>",
    "slot": "title"
}, {
    "html": "<h6>{{model.description}}</h6>",
    "slot": "slot_name"
}, {
    "html": "<button class=\"btn btn-info\" v-on:click=\"namedAction('myNamedAction'; {row: props.row})\"><i class=\"fa fa-check\"></i> OK</button>",
    "slot": "button_slot"
}, {
    "html": "{{props.row.productList}}",
    "slot": "child_row"
}]

When referencing row data within slots, use props.row instead of the usual model keyword.

Slots

Slots allow you to insert you own custom HTML in predefined positions within the component Slots with respect the BF Forms render engine and render VueJS code also:

  • beforeTable: Before the table wrapper. After the controls row

  • afterTable: Before the table wrapper.

  • beforeFilter: Before the global filter (filterByColumn: false)

  • afterFilter: After the global filter

  • beforeLimit: Before the per page control

  • afterLimit: After the per page control

  • beforeFilters: Before the filters row (filterByColumn: true)

  • afterFilters: After the filters row

  • beforeBody: Before the <tbody> tag

  • afterBody: After the <tbody> tag

  • prependBody: Prepend to the <tbody> tag

  • appendBody: Append to the <tbody> tag

If a slot has the same name as a column, it will replace the columns contents. You can class the rows object (data object for that row) via model.row.myField

Accessing Data in slots

row

Each rows data can be found in the props.row variable when using custom html slots.

eg: {{props.row.nameFirst}} would render the first name field

data model

Sometimes you may want to reference the parent data model (The model that was used for the form, or the container element). You can reference to parents data model with the variable model

eg: {{model.isLocked}} would render the isLocked field in the parent data model

Child Rows

Add the following CSS to your site to change how the icon to open or close the child row

.VueTables__child-row-toggler {

    width: 16px;

    height: 16px;

    line-height: 16px;

    display: block;

    margin: auto;

    text-align: center;

}



.VueTables__child-row-toggler--closed::before {

    content: "►";

}

.VueTables__child-row-toggler--open::before {

    content: "▼";

}

Interacting with the Table (Row Click Actions)

actions_onRowClick

The Data Table element supports actions_onRowClick actions. This allows you to programmatically control what happens when a user clicks a row.

Within each action in this actions array, a "row" key will be injected into the options.params so that you can reference the data of the row that was clicked.

  • To access the row from a function action use action.options.params.row

  • To access the row from within an options key (see example below), use this.params.row.id

The following is an example that will pass the key id from the table row into the path action

// actions_onRowClick is addedto the the root level of the element 

// Best practice:
"actions_onRowClick": [{
   "action": "namedAction",
   "name": "myRowClickHandler"
  }]  
  
 // in myRowClickHandler, you can get the row from params:
 let row = action.options.params.row
 ...
 
 
 
 // Older practice:
 actions_onRowClick": [{
   "action": "path",
   "options": {
      "path_calc": "'/invoicedetail?id=' + this.params.row.id"
    }
  ]
  
// In Filemaker in the invoicedetail onFormRequest hook script
// Get the id via $$BF_Query:
Set Variable $id = JSONGetElement ( $$BF_Query ; "id" )
  

``

Vue-Tables-2
below