WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Data Table

Widgets & Prefabs Library

  • Widgets Library
  • Widgets Composition
  • Prefabs Overview

Cards

  • Overview
  • Creating a Card
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Data Table

  • Overview
  • Creating a Data Table
  • Data Source
  • Layouts
  • Styles
  • Configuration
  • Field Configuration
  • Summary Row
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

  • Overview
  • Creating a List
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Form

  • Forms Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Field Validations
  • Events & Methods

Live Form

  • Overview
  • Creating a Live Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Actions
  • Events & Methods
  • Use Cases

Form Widgets

  • Button
  • Button Group
  • Text
  • Number
  • Textarea
  • Select
  • Chips
  • Currency
  • Radioset
  • Checkbox
  • CheckboxSet
  • Toggle
  • Switch
  • Date,  Time and  Datetime
  • Calendar
  • FileUpload
  • Color Picker
  • Slider
  • Rating Widget
  • Select Locale

Live Filter

  • Overview
  • Creating a Live Filter
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Actions
  • Events & Methods
  • Use Cases

Container

  • Grid Layout
  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

  • Label
  • Anchor
  • Icon
  • Picture
  • Tree
  • Video
  • Audio
  • HTML
  • Iframe
  • Message
  • Spinner
  • Search
  • Search - Basic Usage
  • Richtext Editor
  • Progress Bar
  • Progress Circle

Charts

  • Chart Widgets
  • Callback Event

Navigation

    Nav

    • Nav Overview
    • Creating navigation

    Nav Bar

    • Nav Bar Overview

    Breadcrumb

    • Breadcrumb Overview
    • Creating a Breadcrumb

    Dropdown Menu

    • Dropdown Menu
    • Creating a Dropdown Menu

    Popover

    • Popover Overview
    • Creating a Popover

Advanced Widgets

  • Login
  • Marquee
  • Carousel

Dialog Widgets

  • Modal Windows/ Dialogs
  • Design Dialog
  • Alert Dialog
  • Confirm Dialog
  • IFrame Dialog
  • Page Dialog
  • Login Dialog

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Youtube
  • Googlemaps
  • QRCode
  • Box Viewer Prefab
  • Entity Extraction Prefab
  • Docusign Prefab
  • OAuth

    • OAuth Prefabs
    • Box
    • Facebook
    • Google
    • Instagram
    • LinkedIn

    Develop Prefab

    • Create Prefab
    • Use Cases - Prefabs
Edit

Data Table - Layouts


Data Table can be editable or read-only with editable options being inline or dialog-based. These options are available as Layout options.

note

Editable options are available only for Database CRUD Variables; as other variables do not support CRUD operations.

Editable Data Table with Forms


Editable with Form as Dialog

A Data Table Layout for data viewing and a Dialog Form for User Data Entry

  • The Table Layout will have Edit/Delete option for each row and will have a NEW button at the bottom to add data using the Dialog Form
  • A blank Dialog Form will show up on click of NEW button to add new record and will have a Save button to save
  • When edit button is clicked in a row, the selected row values will be shown in the Dialog Form where you can make the changes and save the data.

Editable with Form given below the Table

  • This is very similar to the first template except that the Form for editing is given below the Table.
  • Select any row for editing
  • The Data Table here again provides Edit/Delete and New options

Editable Data Table


Inline Editable

  • A Table Layout with Edit/Delete/New option
  • By default when NEW is clicked to add a new row, the new row will be appended to the bottom of the table. You can change this setting from ADVANCED SETTINGS and set the Form Position property to Top.

Quick Edit

  • A Table Layout to enable quick editing of rows in a Data Table using keyboard events.
  • The following keys can be used:
    • Click on any row to make it editable
    • Use tab key to go to the next field or column
    • Tabbing out of the row will save the changes, automatically
    • Tabbing out of the last row will add a new row to the table
    • Use ESC key to cancel the changes
    • Use Delete key to delete the row currently in edit mode
  • In the Quick mode, always a new row will be shown in the data table. However, the position will depend upon the form position property.Note: Quick edit template will not have new button action.

Read-Only Data Tables


Read-Only with Details Below

  • This Data Table provides for Read Only View of the existing Data

Read-Only Simple View

  • This Data Table provides for Read Only View of the existing Data
Last updated on 11/8/2019 by Swetha Kundaram
← Data SourceStyles →
  • Editable Data Table with Forms
    • Editable with Form as Dialog
    • Editable with Form given below the Table
  • Editable Data Table
    • Inline Editable
    • Quick Edit
  • Read-Only Data Tables
    • Read-Only with Details Below
    • Read-Only Simple View
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2021 WaveMaker, Inc. All rights reserved.