Saba Framework React
  • 👋Welcome Frontend Dev
    • Introduction
  • ℹ️Fundamental
    • UI Render by JSON
    • Backend Compatibility
    • Endpoint Pattern
    • File Upload
    • State Management
    • Developer Mode
    • Peranan SSO
    • Admin SABA
  • 🚩Getting Started
    • Installation
      • Installation on IIS
      • Installation on Apache
    • Account Registration
    • Minimal Example
  • Properties & API
    • Page Properties
    • CRUD Options
      • Dynamic Columns
      • Dynamic Form
      • Dynamic Columns Filter
      • Relation Crud
  • Examples
    • Table
      • Serverside Pagination
      • Fixed Header
      • Fixed Column
      • Row Grouping
      • Expandable Row
        • Multiple Relation With Tab
      • Disable Add / Edit / Delete
      • Delete Selection / Multiple
      • Update Selection / Multiple
      • Extra Action Button
      • Export Button
      • Import xls, csv to table
      • Global Properties
      • 🎨Custom Styling
        • Action Button
    • Dynamic Columns
      • Column Type
        • Avatar Title
        • Currency
        • Progress
        • Badge
        • Icon
        • Boolean
        • Data From Api
        • Lookup Value
        • Static Value
        • Html
        • QR Code
        • Image Slider
        • Custom
      • Date / Time Format
      • Calculate Value
      • Subtotal
      • Editable
    • Dynamic Columns Filter
      • Move To Table Header
    • Dynamic Form
      • Input Type
        • Number
        • Number With Button
        • Radio
        • Check Box
        • Button Group
        • Switch Toggle
        • Text Area
        • Currency
        • Code Mask
        • Phone
        • Icon Picker
        • File
        • Progress
        • Date Picker
        • Date Time Picker
        • Year Picker
        • Date Range Picker
        • Date Time Range Picker
        • Editor HTML
        • Code Block
        • Image
        • Email
        • Password
        • Color Picker
        • Youtube Url
        • QR Code
        • Map Marker
        • Dropdown
        • Dropdown Autocomplete
        • Dropdown Createable
        • Modal Table Select
        • Modal Table Multiple Select
        • Relations CRUD
        • Dropdown Unit
        • User Data
        • Column
        • Tab
        • Separator
        • Repeater
        • Domain Claims Data
        • Window Location
        • Checkbox Multi Selection
      • Events
        • After Change Fill Other
        • After Change GET Value
        • After Change Hide Other
        • Get Params Dynamically
        • Show If Condition
        • Disable If Condition
        • Disabled On Page
      • Other Input Options
        • Description
        • Hide Label
        • Size
        • Placeholder
        • Initial Value
        • Default Value
        • Auto Focus
      • Validation & Rule
        • Calendar Rule
        • Regex Pattern
    • Dynamic Card & Widgets
      • Summary
      • Leader Board
      • Column
      • Slider Approval
      • Slider Task
      • Slider Event Invitation
      • Chart
        • Bar
        • Bar Stacked
        • Area
        • Line
        • Donut
        • Summary to Chart
    • Form Wizard
    • Grid Card
      • Card Style & Hide Label
      • Inline Label & Value
      • Image, Title & Subtitle
    • Calendar
    • Map
      • Markers
      • Polygon
    • Tree View
    • Tree Table
    • Org Chart
    • Gantt Chart
    • Time Line
    • Extra Buttons
    • Custom Html
    • Landing Page
  • Customization
    • Custom Endpoint
    • Response Key Selector
    • Serverside Key Selector
    • Move ID to Payload
    • Payload Type
    • Extra Headers
    • Remove Default Header
    • Custom ID Field
    • Multi Request Post/Delete
    • App Global Search
    • Widget On HomePage
    • Employee Integration
    • Data Year Filter
    • Data Year on Login
Powered by GitBook
On this page

Was this helpful?

  1. Examples
  2. Dynamic Columns
  3. Column Type

Icon

PreviousBadgeNextBoolean

Last updated 1 year ago

Was this helpful?

"type": "icon" akan mengubah value dari respon menjadi icon dan berpengaruh jika respon value bernilai dengan format value seperti ini:

  • material:{nama_ikon}

  • fontAwesome:{nama_ikon}

  • feather:{nama_ikon}

Ikon yang didukung:

"dynamicColumns": [
  {
    "fieldName": "name"
  },
  {
    "fieldName": "description"
  },
  {
    "fieldName": "icon_val",
    "type": "icon",
    "width": "120px",
    "center": true
  }
]

Google Icon

Font Awesome Free versi 5

dan Feather Icon

https://fonts.google.com/icons?icon.set=Material+Icons
https://fontawesome.com/v5/search?o=r&m=free
https://feathericons.com/