Skip to main content

​
Styling column

columns.[name].width 
columns:
  name:
    width: 200px

​
Add button to column

columns.[name].buttons 컬럼에 버튼을 추가할 수 있습니다. 
columns:
  name:
    buttons:
      - label: 조회

​
Hide column

columns.[name].hidden 
columns:
  name:
    hidden: true

​
Bring a column value to under the other

columns.[name].subtitle 컬럼 아래에 다른 컬럼 값을 가져옵니다. 
columns:
  id:
    subtitle: name
  name:
    hidden: true

​
Set label to column value

columns.[name].valueAs 컬럼 값에 따라 라벨링을 다르게 할 수 있어요. 
columns:
  status:
    valueAs:
      active: 활성
      inactive: 비활성

​
Color to column value

columns.[name].color 컬럼 값에 따라 색상을 지정할 수 있어요. 
columns:
  status:
    color:
      active: green
      inactive: red
JavaScript로 데이터 값에 따라 동적으로 색상을 지정할 수도 있습니다. 
columns:
  inflow:
    colorFn: |
      return value > 5 ? 'green' : 'red'

​
Change display of column value

columns.[name].format 다양한 컬럼 표시 데이터 포맷을 지원합니다. 
columns:
  url:
    format: url
  image:
    format: image
  json:
    format: json
  json2:
    format: table
  content:
    format: viewer

​
Manipulate column value by JavaScript

columns.[name].formatFn JavaScript로 컬럼 데이터를 커스텀 조작할 수 있습니다.
  • return이 없어도 inline으로 인식합니다.
  • lodash 함수를 사용할 수 있습니다.
blocks:
  - type: http
    method: GET
    fetchFn: |
      return [
        { id: 1, type: 'HOTEL', type2: 'hotel', type3: 'HOTEL', type4: 'HOTEL' },
        { id: 2, type: 'PENSION', type2: 'pension', type3: 'PENSION', type4: 'PENSION' },
        { id: 3, type: 'RESORT', type2: 'resort', type3: 'RESORT', type4: 'RESORT' },
      ]
    columns:
      type:
        formatFn: |
          '$' + value
      type2:
        formatFn: |
          _.capitalize(value || '')
      type3:
        formatFn: |
          if (value == 'HOTEL') { return '호텔' }
          if (value == 'PENSION') { return '펜션' }
          if (value == 'RESORT') { return '리조트' }
      type4:
        formatFn: |
          return {
            HOTEL: '호텔',
            PENSION: '펜션',
            RESORT: '리조트'
          }[value] || value

​
Display column value with HTML

columns.[name].template 컬럼 데이터를 HTML로 표현할 수 있습니다. 
blocks:
  - type: http
    method: GET
    fetchFn: |
      return [
        {
          url: 'media/cc0-audio/t-rex-roar.mp3',
          video_url: 'media/cc0-videos/flower.webm',
          link: 'https://www.google.com',
          link2: 'https://www.selectfromuser.com',
        }
      ]
    columns:
      url:
        template: |
          <audio controls src="https://interactive-examples.mdn.mozilla.net/{{url}}"></audio>
      video_url:
        template: |-
          <video controls width="250">
            <source src="https://interactive-examples.mdn.mozilla.net/{{video_url}}" type="video/webm" />
          </video>
      link:
        template: |
          <a href="{{link}}" target="_blank">열기</a>
      link2:
        template: |
          <a href="{{link2}}" target="_blank" class="no-underline bg-slate-500/5 rounded-lg p-1.5 flex items-center">
            <span class="mdi mdi-share mr-1"></span>
            <span>열기</span>
          </a>