@lowdefy/blocks-aggrid 5.6.0 → 6.0.0

package/dist/blocks/AgGridMaterial/gallery.yaml

@@ -0,0 +1,645 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Material - Basic Table
+  fullWidth: true
+  blocks:
+    - id: material_basic_table
+      type: AgGridMaterial
+      properties:
+        height: 300
+        columnDefs:
+          - field: name
+            headerName: Name
+          - field: age
+            headerName: Age
+          - field: email
+            headerName: Email
+          - field: country
+            headerName: Country
+        rowData:
+          - name: Alice Johnson
+            age: 28
+            email: alice@example.com
+            country: United States
+          - name: Bob Smith
+            age: 35
+            email: bob@example.com
+            country: United Kingdom
+          - name: Charlie Lee
+            age: 42
+            email: charlie@example.com
+            country: Japan
+          - name: Diana Patel
+            age: 31
+            email: diana@example.com
+            country: India
+          - name: Erik Johansson
+            age: 26
+            email: erik@example.com
+            country: Sweden
+          - name: Fatima Al-Rashid
+            age: 39
+            email: fatima@example.com
+            country: UAE
+
+- title: Material - Column Features
+  fullWidth: true
+  blocks:
+    - id: material_column_features
+      type: AgGridMaterial
+      properties:
+        height: 300
+        columnDefs:
+          - field: id
+            headerName: ID
+            width: 80
+            pinned: left
+            sortable: true
+          - field: product
+            headerName: Product Name
+            flex: 2
+            sortable: true
+            filter: true
+          - field: category
+            headerName: Category
+            flex: 1
+            sortable: true
+            filter: true
+          - field: price
+            headerName: Price ($)
+            width: 120
+            sortable: true
+            resizable: true
+          - field: stock
+            headerName: Stock
+            width: 100
+            sortable: true
+          - field: rating
+            headerName: Rating
+            width: 100
+            sortable: true
+        rowData:
+          - id: 1
+            product: Wireless Keyboard
+            category: Electronics
+            price: 49.99
+            stock: 230
+            rating: 4.5
+          - id: 2
+            product: Standing Desk
+            category: Furniture
+            price: 399.00
+            stock: 45
+            rating: 4.8
+          - id: 3
+            product: USB-C Hub
+            category: Electronics
+            price: 29.99
+            stock: 520
+            rating: 4.2
+          - id: 4
+            product: Ergonomic Chair
+            category: Furniture
+            price: 289.00
+            stock: 78
+            rating: 4.6
+          - id: 5
+            product: Webcam HD
+            category: Electronics
+            price: 79.99
+            stock: 310
+            rating: 4.0
+
+- title: Material - Default Column Definitions
+  fullWidth: true
+  blocks:
+    - id: material_default_col_def
+      type: AgGridMaterial
+      properties:
+        height: 300
+        defaultColDef:
+          sortable: true
+          filter: true
+          resizable: true
+          flex: 1
+        columnDefs:
+          - field: employee
+            headerName: Employee
+          - field: department
+            headerName: Department
+          - field: title
+            headerName: Job Title
+          - field: location
+            headerName: Office
+          - field: startDate
+            headerName: Start Date
+        rowData:
+          - employee: Sarah Chen
+            department: Engineering
+            title: Senior Developer
+            location: San Francisco
+            startDate: '2019-03-15'
+          - employee: James Wilson
+            department: Marketing
+            title: Campaign Manager
+            location: New York
+            startDate: '2020-07-01'
+          - employee: Maria Garcia
+            department: Engineering
+            title: Tech Lead
+            location: Austin
+            startDate: '2018-11-20'
+          - employee: David Kim
+            department: Sales
+            title: Account Executive
+            location: Chicago
+            startDate: '2021-01-10'
+          - employee: Emily Brown
+            department: Design
+            title: UX Designer
+            location: San Francisco
+            startDate: '2020-09-05'
+
+- title: Material - Row Selection
+  fullWidth: true
+  blocks:
+    - id: material_row_selection
+      type: AgGridMaterial
+      properties:
+        height: 300
+        rowSelection:
+          mode: multiRow
+          checkboxes: false
+          headerCheckbox: false
+          enableClickSelection: true
+        defaultColDef:
+          sortable: true
+          flex: 1
+        columnDefs:
+          - field: task
+            headerName: Task
+            flex: 2
+          - field: assignee
+            headerName: Assignee
+          - field: priority
+            headerName: Priority
+            width: 120
+          - field: status
+            headerName: Status
+            width: 120
+        rowData:
+          - task: Design login page
+            assignee: Alice
+            priority: High
+            status: Done
+          - task: Implement API endpoints
+            assignee: Bob
+            priority: High
+            status: In Progress
+          - task: Write unit tests
+            assignee: Charlie
+            priority: Medium
+            status: To Do
+          - task: Update documentation
+            assignee: Diana
+            priority: Low
+            status: To Do
+          - task: Code review PR #42
+            assignee: Erik
+            priority: Medium
+            status: In Progress
+
+- title: Material - Pagination
+  fullWidth: true
+  blocks:
+    - id: material_pagination
+      type: AgGridMaterial
+      properties:
+        height: 350
+        pagination: true
+        paginationPageSize: 5
+        defaultColDef:
+          sortable: true
+          filter: true
+          flex: 1
+        columnDefs:
+          - field: orderId
+            headerName: Order ID
+            width: 120
+          - field: customer
+            headerName: Customer
+          - field: product
+            headerName: Product
+          - field: quantity
+            headerName: Qty
+            width: 80
+          - field: total
+            headerName: Total ($)
+            width: 110
+          - field: status
+            headerName: Status
+            width: 120
+        rowData:
+          - orderId: ORD-401
+            customer: Acme Corp
+            product: Widget Pro
+            quantity: 50
+            total: 2499.50
+            status: Shipped
+          - orderId: ORD-402
+            customer: Globex Inc
+            product: Gadget X
+            quantity: 25
+            total: 1249.75
+            status: Processing
+          - orderId: ORD-403
+            customer: Initech
+            product: Widget Pro
+            quantity: 100
+            total: 4999.00
+            status: Delivered
+          - orderId: ORD-404
+            customer: Umbrella Ltd
+            product: Connector A
+            quantity: 200
+            total: 1998.00
+            status: Shipped
+          - orderId: ORD-405
+            customer: Stark Ind
+            product: Gadget X
+            quantity: 10
+            total: 499.90
+            status: Processing
+          - orderId: ORD-406
+            customer: Wayne Ent
+            product: Widget Pro
+            quantity: 75
+            total: 3749.25
+            status: Delivered
+          - orderId: ORD-407
+            customer: Oscorp
+            product: Connector A
+            quantity: 150
+            total: 1498.50
+            status: Shipped
+          - orderId: ORD-408
+            customer: LexCorp
+            product: Gadget X
+            quantity: 30
+            total: 1499.70
+            status: Processing
+
+- title: Material - Column Styling
+  fullWidth: true
+  blocks:
+    - id: material_styled_columns
+      type: AgGridMaterial
+      properties:
+        height: 300
+        defaultColDef:
+          sortable: true
+          flex: 1
+        columnDefs:
+          - field: metric
+            headerName: Metric
+            flex: 2
+            cellStyle:
+              fontWeight: bold
+          - field: q1
+            headerName: Q1
+            cellStyle:
+              backgroundColor: '#e6f7ff'
+              textAlign: right
+          - field: q2
+            headerName: Q2
+            cellStyle:
+              backgroundColor: '#f6ffed'
+              textAlign: right
+          - field: q3
+            headerName: Q3
+            cellStyle:
+              backgroundColor: '#fff7e6'
+              textAlign: right
+          - field: q4
+            headerName: Q4
+            cellStyle:
+              backgroundColor: '#fff1f0'
+              textAlign: right
+        rowData:
+          - metric: Revenue ($K)
+            q1: 1250
+            q2: 1380
+            q3: 1520
+            q4: 1690
+          - metric: New Customers
+            q1: 145
+            q2: 162
+            q3: 178
+            q4: 201
+          - metric: Churn Rate (%)
+            q1: 3.2
+            q2: 2.8
+            q3: 2.5
+            q4: 2.1
+          - metric: NPS Score
+            q1: 42
+            q2: 45
+            q3: 48
+            q4: 52
+
+- title: Built-in cell types
+  fullWidth: true
+  blocks:
+    - id: cell_types_demo
+      type: AgGridMaterial
+      properties:
+        height: 360
+        defaultColDef:
+          resizable: true
+          flex: 1
+        columnDefs:
+          - headerName: Status
+            field: status
+            width: 130
+            cell:
+              type: tag
+              colorMap:
+                Active: green
+                Blocked: red
+                Pending: blue
+                'On Leave': orange
+          - headerName: Assignee
+            field: name
+            minWidth: 220
+            cell:
+              type: avatar
+              nameField: name
+              srcField: picture
+              idField: id
+          - headerName: Created
+            field: created_at
+            width: 170
+            cell:
+              type: date
+          - headerName: Last seen
+            field: last_seen
+            width: 150
+            cell:
+              type: date
+              relative: true
+          - headerName: Verified
+            field: verified
+            width: 110
+            cell:
+              type: boolean
+          - headerName: Progress
+            field: completion
+            width: 130
+            cell:
+              type: progress
+        rowData:
+          - id: u1
+            name: Alice Johnson
+            picture: https://i.pravatar.cc/80?img=1
+            status: Active
+            created_at: '2025-11-14T09:30:00Z'
+            last_seen: '2026-04-17T11:45:00Z'
+            verified: true
+            completion: 92
+          - id: u2
+            name: Bob Smith
+            status: On Leave
+            created_at: '2025-09-02T14:10:00Z'
+            last_seen: '2026-04-10T08:15:00Z'
+            verified: true
+            completion: 68
+          - id: u3
+            name: Charlie Lee
+            picture: https://i.pravatar.cc/80?img=5
+            status: Blocked
+            created_at: '2026-01-20T18:00:00Z'
+            last_seen: '2026-04-17T07:22:00Z'
+            verified: false
+            completion: 22
+          - id: u4
+            name: Diana Patel
+            status: Pending
+            created_at: null
+            last_seen: null
+            verified: null
+            completion: null
+
+- title: Linked cells (onCellLink)
+  fullWidth: true
+  blocks:
+    - id: linked_cells_demo
+      type: AgGridMaterial
+      properties:
+        height: 240
+        defaultColDef:
+          resizable: true
+          flex: 1
+        columnDefs:
+          - headerName: Task ID
+            field: _id
+            width: 140
+            cell:
+              type: link
+              pageId: tasks-view
+              urlQuery:
+                _id: _id
+          - headerName: Assignee
+            field: assignee
+            cell:
+              type: avatar
+              nameField: assignee
+              idField: _id
+              link:
+                pageId: user
+                urlQuery:
+                  userId: _id
+          - headerName: Priority
+            field: priority
+            width: 120
+            cell:
+              type: tag
+              colorMap:
+                High: red
+                Medium: orange
+                Low: default
+        rowData:
+          - _id: TSK-001
+            assignee: Alice Johnson
+            priority: High
+          - _id: TSK-002
+            assignee: Bob Smith
+            priority: Medium
+          - _id: TSK-003
+            assignee: Charlie Lee
+            priority: Low
+      events:
+        onCellLink:
+          - id: navigate
+            type: Link
+            params:
+              _event: link
+
+- title: Ellipsis column helper
+  fullWidth: true
+  blocks:
+    - id: ellipsis_demo
+      type: AgGridMaterial
+      properties:
+        height: 280
+        defaultColDef:
+          resizable: true
+        columnDefs:
+          - headerName: Code
+            field: code
+            width: 100
+          - headerName: Title
+            field: title
+            minWidth: 220
+          - headerName: Description
+            field: description
+            flex: 1
+            ellipsis: 2
+        rowData:
+          - code: A-01
+            title: Main switchboard
+            description: Drafted the main switchboard layout and circuit schedule across three floors. Awaiting sign-off from the project engineer before ordering long-lead parts.
+          - code: A-02
+            title: East wing HVAC
+            description: Balancing HVAC loads across the east wing. Waiting on updated ductwork drawings from the architect and a revised thermal model from the mechanical team.
+          - code: A-03
+            title: Utility connections
+            description: Blocked on the utility connection survey — main was not where the drawings said it would be, which has cascaded to the trenching schedule.
+
+- title: Number formatting (currency, percent, compact, accounting)
+  fullWidth: true
+  blocks:
+    - id: number_demo
+      type: AgGridMaterial
+      properties:
+        height: 320
+        defaultColDef:
+          resizable: true
+        columnDefs:
+          - headerName: Account
+            field: account
+            width: 180
+          - headerName: Revenue (USD)
+            field: revenue
+            width: 150
+            cell:
+              type: number
+              format: currency
+              currency: USD
+              decimals: 0
+          - headerName: EUR
+            field: revenue_eur
+            width: 150
+            cell:
+              type: number
+              format: currency
+              currency: EUR
+              locale: de-DE
+              decimals: 2
+          - headerName: Δ vs budget
+            field: delta
+            width: 160
+            cell:
+              type: number
+              format: currency
+              currency: USD
+              decimals: 2
+              negative: parentheses
+              signColor: true
+          - headerName: Margin
+            field: margin
+            width: 110
+            cell:
+              type: number
+              format: percent
+              decimals: 1
+          - headerName: Impressions
+            field: impressions
+            width: 130
+            cell:
+              type: number
+              format: compact
+          - headerName: Ratio
+            field: ratio
+            width: 110
+            cell:
+              type: number
+              decimals: 3
+        rowData:
+          - account: Acme Corp
+            revenue: 1245000
+            revenue_eur: 1125750.5
+            delta: 12500
+            margin: 0.184
+            impressions: 12340
+            ratio: 1.234
+          - account: Globex
+            revenue: 825500
+            revenue_eur: 745600.25
+            delta: -44250.5
+            margin: 0.072
+            impressions: 1050000
+            ratio: 0.876
+          - account: Stark Ind.
+            revenue: 4820000
+            revenue_eur: 4350750
+            delta: -125000
+            margin: -0.033
+            impressions: 85400000
+            ratio: 2.12
+          - account: Wayne Ent.
+            revenue: 3150000
+            revenue_eur: 2845300
+            delta: 87500
+            margin: 0.221
+            impressions: 524000
+            ratio: 0.948
+
+- title: Loading overlay (block loading flag)
+  fullWidth: true
+  blocks:
+    - id: loading_demo_switch
+      type: Switch
+      properties:
+        title: Toggle loading overlay
+    - id: loading_demo_grid
+      type: AgGridMaterial
+      loading:
+        _state: loading_demo_switch
+      properties:
+        height: 260
+        defaultColDef:
+          flex: 1
+        columnDefs:
+          - field: name
+            headerName: Name
+          - field: role
+            headerName: Role
+        rowData:
+          - name: Alice Johnson
+            role: Developer
+          - name: Bob Smith
+            role: Designer
+          - name: Charlie Lee
+            role: Manager