Skip to main content

Table

The table widget allows you to render multiple group components into a table where the columns represent the form components of the group. Each row is a representation of each item in the group.

caution

This widget only works with the group form component!

Example​

import React from "react";
import {
  createForm,
  textField,
  StatefulFormView,
  selectWidget,
  tableWidget,
  booleanField,
  group,
} from "@fab4m/fab4m";
import "@fab4m/fab4m/css/basic/basic.css";

const form = createForm({
  visitors: group(
    {
      label: "Visitors",
      multiple: true,
      multipleWidget: tableWidget({
        addItemLabel: "Add visitor",
        removeItemLabel: "Remove",
      }),
    },
    {
      name: textField({
        label: "Name",
      }),
      gender: textField({
        label: "Gender",
        widget: selectWidget(["Female", "Male", "Other"]),
      }),
      vegetarian: booleanField({
        label: "Vegetarian",
      }),
    },
  ),
});

export default function selectExample() {
  return <StatefulFormView form={form} hideSubmit={true} />;
}

Compatible components​