robobyte-front-builder 1.0.26 → 1.0.27

package/training/33-dataGrid.md

@@ -0,0 +1,129 @@
+# Component: dataGrid
+
+An AG Grid-powered editable data table. Supports inline editing, row actions, column configuration, add/delete rows, row selection, and pagination. Primarily used for editable grid forms (not just read-only display).
+
+> ⚠️ Use `dataGrid` for **editable forms** with tabular data (line items, bulk editing). For read-only data display use `reportViewer`. For simple static tables use `dataTableViewer`.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Unique identifier. Grid data is accessible at `data[key]`. |
+| `dataKey` | expression | Data key pointing to the rows array, e.g. `data.invoiceLines`. |
+| `columns` | expression | Column definitions array (AG Grid colDef format), e.g. `[{ headerName: 'Name', field: 'name' }]`. |
+| `extraCols` | extra-cols-editor | Additional columns defined via the visual editor. Each entry is a full AG Grid colDef object. Useful for computed columns or action columns. |
+| `columnsConfig` | columns-config-editor | Per-field overrides applied to existing columns (matched by field name). E.g. make a field editable, add a custom valueGetter. |
+| `actionsConfig` | actions-config-editor | Row action buttons shown in a popover "Actions" cell. Each action has: `label`, `color`, `variant`, `icon`, `code`, `confirmation?`, `disabled?`. Inside action code, `data.row` is the AG Grid row node. |
+| `addLabel` | expression | Label for the "Add Row" button, e.g. `"+ Add Line"`. |
+| `addRow` | code | Code returning the template object for a new row. E.g. `return { id: uuid(), qty: 1, price: 0 }`. |
+| `readOnly` | expression | Expression that when `true` disables all editing. |
+| `showAddBtn` | boolean | Shows/hides the Add Row button. |
+| `showDeleteCol` | boolean | Shows/hides the delete (×) column on each row. |
+| `height` | expression | Grid height, e.g. `"400px"`, `"60vh"`. |
+| `rowSelection` | select | `none` · `single` · `multiple` — Enables row selection mode. |
+| `pagination` | boolean | Enables pagination controls. |
+| `pageSize` | number | Rows per page when pagination is enabled. Default: `20`. |
+
+---
+
+## Props — Style Tab
+
+No dedicated style tab. Control via parent layout-cell.
+
+---
+
+## Props — Actions Tab
+
+No dedicated action tab. Row actions are defined in `actionsConfig`.
+
+---
+
+## Use Cases
+
+**When to use:**
+- Invoice line items: editable rows with qty, price, description.
+- Bulk data entry: import-like screens with many rows to fill.
+- Editable configuration tables.
+- Any tabular form where users add/edit/delete rows.
+
+**When NOT to use:**
+- Read-only server-fetched data displays → use `reportViewer`.
+- Simple static tables without editing → use `dataTableViewer`.
+- Single record forms → use individual form fields.
+
+---
+
+## Schema Examples
+
+### Editable invoice lines
+```json
+{
+  "type": "dataGrid",
+  "props": {
+    "key": "invoiceLines",
+    "dataKey": "data.lines",
+    "columns": "[{ headerName: 'Description', field: 'description', editable: true }, { headerName: 'Qty', field: 'qty', editable: true, width: 100 }, { headerName: 'Price', field: 'price', editable: true, width: 120 }]",
+    "showAddBtn": true,
+    "showDeleteCol": true,
+    "addLabel": "+ Add Line",
+    "addRow": "return { id: Date.now(), description: '', qty: 1, price: 0 }",
+    "height": "350px"
+  }
+}
+```
+
+### Read-only grid with row actions
+```json
+{
+  "type": "dataGrid",
+  "props": {
+    "key": "employeeTable",
+    "dataKey": "data.employees",
+    "columns": "data.employeeColumns",
+    "readOnly": true,
+    "showAddBtn": false,
+    "showDeleteCol": false,
+    "rowSelection": "single",
+    "pagination": true,
+    "pageSize": 25,
+    "height": "500px",
+    "actionsConfig": [
+      {
+        "label": "Edit",
+        "color": "primary",
+        "variant": "text",
+        "icon": "EditOutlined",
+        "code": "setData({ selectedEmployee: data.row.data }); openDialog('editEmployee')"
+      },
+      {
+        "label": "Delete",
+        "color": "error",
+        "variant": "text",
+        "icon": "DeleteOutlined",
+        "confirmation": "Are you sure you want to delete this employee?",
+        "code": "deleteEmployee({ id: data.row.data.id })"
+      }
+    ]
+  }
+}
+```
+
+### Multi-select with pagination
+```json
+{
+  "type": "dataGrid",
+  "props": {
+    "key": "orderItems",
+    "dataKey": "data.orders",
+    "columns": "data.orderColumns",
+    "rowSelection": "multiple",
+    "pagination": true,
+    "pageSize": 50,
+    "height": "600px",
+    "showAddBtn": false,
+    "showDeleteCol": false
+  }
+}
+```

package/training/34-dataTableViewer.md

@@ -0,0 +1,115 @@
+# Component: dataTableViewer
+
+A simple read-only HTML table for displaying data arrays. Fully styleable (header, cell, row, border). No editing, no sorting, no pagination.
+
+> ⚠️ Use this for **simple display tables** where the data is already loaded in `data`. For server-fetched paginated data use `reportViewer`. For editable rows use `dataGrid`.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `dataKey` | expression | Key in page data pointing to the rows array, e.g. `"summaryRows"`. |
+| `columns` | table-columns-editor | Column definitions: `[{ label: 'Column Header', field: 'rowProperty' }]`. `label` = header text, `field` = property key on each row object. |
+| `testData` | expression | JSON array of sample rows used when `data[dataKey]` is empty (preview/edit mode), e.g. `[{ name: "Alice", amount: 100 }]`. |
+| `tableWidth` | expression | Overall table width, e.g. `"100%"` or `"800px"`. |
+| `showHeader` | boolean | Show/hide the header row. Default: `true`. |
+| `headerBgColor` | expression | Header row background color, e.g. `"#1976d2"` or `"primary.main"`. |
+| `headerTextColor` | expression | Header text color. |
+| `headerFontSize` | expression | Header font size in px, e.g. `"14"`. |
+| `headerAlign` | select | `left` · `center` · `right` — Header text alignment. |
+| `headerPaddingH` | expression | Header horizontal padding in px. |
+| `headerPaddingV` | expression | Header vertical padding in px. |
+| `fontSize` | expression | Cell font size in px. |
+| `cellTextColor` | expression | Cell text color. |
+| `cellAlign` | select | `left` · `center` · `right` — Cell text alignment. |
+| `cellPaddingH` | expression | Cell horizontal padding in px. |
+| `cellPaddingV` | expression | Cell vertical padding in px. |
+| `cellVerticalAlign` | select | `top` · `middle` · `bottom` — Vertical alignment of cell content. |
+| `striped` | boolean | Alternating row background colors. |
+| `stripedColor` | expression | Color used for alternating rows, e.g. `"#f5f5f5"`. |
+| `rowHover` | boolean | Highlights rows on mouse hover. |
+| `rowHoverColor` | expression | Hover background color. |
+| `bordered` | boolean | Adds cell borders. |
+| `borderColor` | expression | Border color, e.g. `"#e0e0e0"`. |
+| `borderWidth` | expression | Border thickness in px, e.g. `"1"`. |
+
+---
+
+## Props — Style Tab
+
+No dedicated style tab. Use parent layout-cell.
+
+---
+
+## Props — Actions Tab
+
+No actions. Table is read-only.
+
+---
+
+## Use Cases
+
+**When to use:**
+- Display a summary table from data already available in `data`.
+- Read-only reference tables (pricing tiers, feature comparison).
+- Report sections inside a dashboard.
+- Print-ready data tables.
+
+**When NOT to use:**
+- Editable rows → use `dataGrid`.
+- Server-fetched paginated data → use `reportViewer`.
+- Large datasets needing sorting/filtering → use `reportViewer`.
+
+---
+
+## Schema Examples
+
+### Basic data table
+```json
+{
+  "type": "dataTableViewer",
+  "props": {
+    "dataKey": "summaryData",
+    "columns": [
+      { "label": "Name", "field": "name" },
+      { "label": "Department", "field": "department" },
+      { "label": "Salary", "field": "salary" }
+    ],
+    "showHeader": true,
+    "tableWidth": "100%",
+    "headerBgColor": "#1976d2",
+    "headerTextColor": "#ffffff",
+    "striped": true,
+    "stripedColor": "#f5f5f5",
+    "rowHover": true
+  }
+}
+```
+
+### Styled bordered table
+```json
+{
+  "type": "dataTableViewer",
+  "props": {
+    "dataKey": "pricingTiers",
+    "columns": [
+      { "label": "Plan", "field": "plan" },
+      { "label": "Price", "field": "price" },
+      { "label": "Users", "field": "maxUsers" },
+      { "label": "Storage", "field": "storage" }
+    ],
+    "tableWidth": "100%",
+    "headerBgColor": "#263238",
+    "headerTextColor": "#ffffff",
+    "headerAlign": "center",
+    "cellAlign": "center",
+    "bordered": true,
+    "borderColor": "#cfd8dc",
+    "borderWidth": "1",
+    "cellPaddingH": "12",
+    "cellPaddingV": "10"
+  }
+}
+```