flexi-table

[Flexi Table]

Welcome to version 1.1.5 of Flexi Table, an easy to implement, and well maintained Vue.js component.

You can support this project by giving it a star, or following the author. .

This is README for FlexiTable component

Flexi Table vue component made by Oliver

Installation

npm install flexi-table --save-dev

How to use it?

Module usage

import FlexiTable from 'flexi-table';

export default {
  components: {
    FlexiTable
  },
  data() {
    return {
      rows: [
        'Row 1', 
        'Row 2',
        'Row 3'
      ],
      columns: [
        {columnName: "Adam", columnType: "Some Product", columnSize: "XXL"},
        {columnName: "Adam", columnType: "Some Product", columnSize: "XXL"},
        {columnName: "Adam", columnType: "Some Products",columnSize: "M"},
      ] 
    }
  }
}

<flexi-table 
  :color="'green'"
  :rows="rows"
  :columns="columns"
/>

Browser usage

Include the script file, then install the component with Vue.use(FlexiTable); e.g.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/flexi-table/dist/flexi-table.min.js"></script>
<script type="text/javascript">
  Vue.use(FlexiTable);
</script>

API

Props

Name	Type	Description
color	String	Four colors available (green, red, blue and yelow)
rows	Array	Set rows / headers of the table
columns	Array	Set columns of the table

License

MIT