JSFiddle - React, Tailwind, and code Playground

by AdvanTiSS

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/dist/iview.min.js"></script>
<div id="app">
    <i-table border :columns="columns7" :data="originalData" @on-row-click="()=>{}"></i-table>
</div>

SCSS

@import url("//unpkg.com/[email protected]/dist/styles/iview.css");
#app{padding: 32px;}

Babel + JSX

var Main = {
        data () {
            return {
                columns7: [
                		{
                    	type:'expand',
                      width: 18,
                      align: 'right',
                      render: (h, params) => {
                       return [h('Checkbox', {
                          props: {
                            value: this.changedData[params.index].checkBoxValue
                          },
                          on: {
                            input: (checked) => {
                              this.changedData[params.index].checkBoxValue = checked
                              console.log(JSON.stringify(this.changedData))
                            }
                          }
                        })]
                      }
                    },
                    {
                      title: 'Name',
                      key: 'name',
                      align: 'center',
                      sortable: true,
                      sortType: 'asc',
                      width: 110,
                      // wordWrap: 'break-word',
                       render: (h, params) => {
                        return h('div', {
                          attrs: {
                            title: params.row.name
                          },
                          style: {
                            textAlign: 'center',
                            cursor: 'default',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis'
                          }
                        }, params.row.name)
                      }
                    },
                    {
                        title: 'Action',
                        key: 'row',
                        sortable: true,
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
            ...