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 |