Table Field (Form)

The table field (type: "table") displays a table with specified columns. You can use it to enter tabular data.

• The form includes an icon for adding rows.
• Existing rows can be removed using a "delete" icon.
• The table cells can use text, number and select fields.

Table Field Properties

• type ("table") - specifies the form field type
• name (string) - the field name that will be displayed above the text box
• id (string) - the path that specifies the source/target property of the data object
• columns (array) - list of options
• disabled (boolean) - makes the dropdown list field disabled (inaccessible and read-only); optional
• max (number) - maximum number of rows; optional
• cssClass (string) - additional CSS class that will be applied to the form field; optional
• onValidate (function) - a callback function used to validate the field value; optional
• onNewRow (function) - a callback function used to generate data for a new row; optional

The columns array items specifies table fields (text, number and select types are supported). The name property will be displayed as a column header.

The optional onNewRow callback function receives an args object as an argument:

• args.result (object) - current value of the whole form (read-only)
• args.value (object) - an object with new row data

Example

import {Modal} from "@daypilot/modal";

// ...

async function modalTable() {
  const generateRow = function(args) {
    const existingData = args.result.rooms;
    const next = existingData.length + 1;
    args.value = {name: "Room " + next};
  };

  const form = [
    {
      name: "Rooms:",
      id: "rooms",
      type: "table",
      onNewRow: generateRow,
      max: 5,
      columns: [
        {name: "Room name", id: "name"},
        {name: "Type", id: "type", options: [
            {name: "Standard", id: "standard"},
            {name: "Superior", id: "superior"},
          ]},
        {name: "Capacity", id: "capacity", type: "number"}
      ]
    },
    {
      name: "Disabled:",
      id: "disabled",
      disabled: true,
      type: "table",
      columns: [
        {name: "Room name", id: "name"},
        {name: "Type", id: "type", options: [
            {name: "Standard", id: "standard"},
            {name: "Superior", id: "superior"},
          ]},
        {name: "Capacity", id: "capacity", type: "number"}
      ]
    }
  ];

  const data = {
    rooms: [
      {name: "Room 1", type: "standard", capacity: 2},
      {name: "Room 2", type: "superior", capacity: 2},
    ],
    disabled: [
      {name: "Room 1", type: "standard", capacity: 2},
      {name: "Room 2", type: "superior", capacity: 2},
    ],
  };

  const modal = await Modal.form(form, data);
  console.log(modal);
}