Data components

Editable table & row actions

Edit cells, validate them, add / remove rows and add your own buttons to each row.

Editable cells

Give a column an editor to make its cells inputs: { type: "number" }, { type: "select", options }, { type: "checkbox" }, ... Editors take the same rules as fields (required, min, max, pattern) and are checked on Submit.

With name on the table, its rows are part of the submitted entries. addable adds a + Add row button, removable a Remove button on each row.

Your own buttons

A column with actions draws buttons in every row; each onClick names your action, called with { table, row, rowKey }. hiddenWhen / disabledWhen hide or disable a button for some rows.

toolbarActions adds buttons above the table; they get the selected rows. From code use api.addRow, api.updateRow, api.removeRow, api.getRows.

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "DataTable",
    "id": "items",
    "props": {
      "name": "items",
      "title": "Order items",
      "rowKey": "sku",
      "columns": [
        {
          "key": "sku",
          "title": "SKU",
          "width": 90
        },
        {
          "key": "product",
          "title": "Product"
        },
        {
          "key": "qty",
          "title": "Qty",
          "width": 110,
          "total": "sum",
          "editor": {
            "type": "number",
            "required": true,
            "min": 1,
            "max": 99,
            "rangeMessage": "1–99"
          }
        },
        {
          "key": "ship",
          "title": "Ship via",
          "width": 150,
          "editor": {
            "type": "select",
            "options": [
              "Ground",
              "Air",
              "Express"
            ]
          }
        },
        {
          "key": "gift",
          "title": "Gift",
          "align": "center",
          "editor": {
            "type": "checkbox"
          }
        },
        {
          "key": "status",
          "title": "Status",
          "badge": {
            "Ready": "success",
            "On hold": "secondary"
          }
        },
        {
          "key": "actions",
          "title": "",
          "actions": [
            {
              "text": "Hold",
              "variant": "outline-secondary",
              "onClick": "holdItem()",
              "hiddenWhen": {
                "field": "status",
                "equals": "On hold"
              }
            },
            {
              "text": "Release",
              "variant": "outline-success",
              "onClick": "releaseItem()",
              "hiddenWhen": {
                "field": "status",
                "equals": "Ready"
              }
            },
            {
              "text": "Duplicate",
              "onClick": "duplicateItem()"
            }
          ]
        }
      ],
      "rows": [
        {
          "sku": "A-100",
          "product": "Notebook",
          "qty": 2,
          "ship": "Ground",
          "gift": false,
          "status": "Ready"
        },
        {
          "sku": "B-200",
          "product": "Pen set",
          "qty": 5,
          "ship": "Air",
          "gift": true,
          "status": "Ready"
        },
        {
          "sku": "C-300",
          "product": "Desk lamp",
          "qty": "",
          "ship": "Express",
          "gift": false,
          "status": "On hold"
        }
      ],
      "pageSize": 0,
      "selectable": true,
      "removable": true,
      "addable": true,
      "size": "sm",
      "toolbarActions": [
        {
          "text": "Hold selected",
          "variant": "outline-secondary",
          "onClick": "holdSelected()",
          "needsSelection": true
        }
      ],
      "rowRules": [
        {
          "when": {
            "field": "status",
            "equals": "On hold"
          },
          "color": "#6c757d"
        }
      ],
      "onCellChange": "cellChanged()"
    }
  },
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "c-buttons",
        "props": {
          "className": "d-flex gap-2 justify-content-end"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "add-sample",
            "props": {
              "text": "Add a row from code",
              "variant": "outline-primary",
              "onClick": "addSample()"
            }
          },
          {
            "type": "ButtonField",
            "id": "submit",
            "props": {
              "type": "submit",
              "text": "Submit (validates Qty)",
              "onClick": "runValidation()"
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`columns[].editor`	`{ type, options, required, min, max, pattern, ...Message }` — an editable cell.
`name`	Submit the rows under this key.
`addable / removable`	+ Add row button / Remove button per row.
`columns[].actions`	Row buttons: `{ text, variant, onClick, hiddenWhen, disabledWhen }`.
`toolbarActions`	Buttons above the table: `{ text, variant, onClick, needsSelection }`.
`api.addRow / updateRow / removeRow / getRows / setRows`	Change rows from code (first argument: the table id).

Events

Event	When it runs	Your action receives
`onCellChange`	An editable cell changes.	`{ row, rowKey, column, value }`
`row action onClick`	A row button is pressed.	`(event, { table, name, row, rowKey })`
`toolbar action onClick`	A toolbar button is pressed.	`(event, { table, name, selected, rows })`
`onSubmit`	All cells are valid.	`[{ items: [ ...rows ] }]`