09 v_table

Generic table component

Props

Required:

• data: [{a:1,b:2},{a:3,b:4}]

Optional:

If cols not provided , all columns.

• css - extra table class
• opts: {select:true}
• actions="[{name:'run' , title:'Run automation'},{name:'cancel',title:'Cancel automation'},{name:'schedule',title:'Schedule automation'}]"
• cols: ['a','b'] - basic example
• cols: ['test', 'test1', { name: 'timestamp', type: 'tdate' }] - advanced formatting
  • { name: 'last_write_time_utc','label':'LAST WRITE', type: 'tdate' ,style:'width:120px'}
  • { name: 'colname', type: 'tdatetime' }
  • { name: 'colname', type: 'tlink' }
  • { name: 'colname', type: 'tlinkurl' }
  • { name: 'colname', type: 'tformat_bytes' }
  • { name: 'extension', label:'type', type: 'tfiletype',style:'width:50px' }

Events

• @select (required opts: {select:true} )
• @action emits {name: action.name, row: row }

Examples

Basic

<v_table :data="[{a:1,b:2},{a:3,b:4}]"></v_table>

Advanced

<v_table
  :data="files"
  :opts="{select:true}"
  :cols="[{ name: 'extension',  label:'type', type: 'tfiletype',style:'width:50px' },'name',{name:'bytes',type:'tformat_bytes' ,style:'width:80px'},
            { name: 'last_write_time_utc','label':'LAST WRITE', type: 'tdate' ,style:'width:120px'}]"
  @select="alert($event)" />