JSFiddle - React, Tailwind, and code Playground

by Umesh Patil

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
    <el-table :data="tableData3" border style="width: 100%">
      
      <el-table-column prop="name" label="Name" width="120" sortable>
      </el-table-column>
      
      <!-- <el-table-column label="Properties">
        <el-table-column :prop="col.prop" :label="col.label" :width="col.width" v-for="col in columns" :key="col.prop" sortable>
        </el-table-column>
        
      </el-table-column> -->
       <el-table-column :prop="col.prop" :label="col.label" v-for="col in columns">
        <el-table-column  :prop="coldata.prop" :label="coldata.label" :key="coldata.prop" sortable v-for="coldata in col.subColumn">
      
          
        </el-table-column>
        
      </el-table-column>
    </el-table>
  </template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

Babel + JSX

var Main = {
    data() {
      return {
      	columns: [          
          {
            prop:"array.0.value",
            label: "array.0.name",
            width: "200",
            subColumn:[
            	{
              	name: 1,
                prop:"array.0.value",
                label:1
              },
              {
              	name: 2,
                prop:"array.1.value",
                label:2
                
              }
            ]
          },
          {
            prop:"array.1.value",
            label: "array.1.name",
            width: "200",
            subColumn:[
            	{
              	name: 1,
                prop:"array.0.value",
                label:1
              },
              {
              	name: 2,
                prop:"array.1.value",
                label:2
                
              }
            ]
          }
        ],
        tableData3: [{
        	id:1,
          name: 'Tom',          
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          selected:"",
          array: [
            {
              name: 'item 0',
            	value: [
              	 {
                  "first_name": "Evangeline",
                  "id": 15,
                  "surname": "Von"
                },
                {
                  "first_name": "Evangeline",
                  "id": 15,
                  "surname": "Von"
                }
              ]
            },
            {
              name: 'item 1',
            	value: [
              	 {
                  "first_name": "Evangeline",
                  "id": 15,
                  "surname": "Von"
                },
                {
                  "first_name": "Evangeline",
                  "id": 15,
                  "surname": "Von"
                }
              ]
            }
          ]
        }, {
        	id:2,
         	name: 'Jerry',          
          city: 'Los...