v2.0.0

New Vue Wrapper For TOAST UI Grid 4.0 🎉🎉🎉

Breaking Changes

prop name change

• rowData -> data
• columnData -> columns

TOAST UI Grid has its own reactivity system, and does not use the reactivity system of Vue. So, instead of adding props in the data, declare props in the created lifecycle method.

// v1.0.0
<template>
  <grid
    :rowData="data" 
    :columnData="columns" 
  />
</template>
<script>
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid'

export default {
  components: {
    'grid': Grid
  },
  data() {
    return {
      data: [ // for rowData prop
        {
          name: 'Beautiful Lies',
          artist: 'Birdy'
        },
        {
          name: 'X',
          artist: 'Ed Sheeran'
        }
      ],
      columns: [ // for columnData prop
        {
          header: 'Name',
          name: 'name',
        },
        {
          header: 'Artist',
          name: 'artist'
        }
        ]
      }
    }
  }
}
</script>


// v2.0.0
<template>
  <grid
    :data="gridProps.data" 
    :columns="gridProps.columns" 
  />
</template>
<script>
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid'

export default {
  components: {
    'grid': Grid
  },
  created() {
    this.gridProps = {
      data: [ // for rowData prop
        {
          name: 'Beautiful Lies',
          artist: 'Birdy'
        },
        {
          name: 'X',
          artist: 'Ed Sheeran'
        }
      ],
      columns: [ // for columnData prop
        {
          header: 'Name',
          name: 'name',
        },
        {
          header: 'Artist',
          name: 'artist'
        }
      ]
    }
  }
}
</script>

API Document

• https://nhn.github.io/tui.grid/latest