https://github.com/schnapsterdog/flexi-table

Flexible Vue.js Table Component
https://github.com/schnapsterdog/flexi-table

Last synced: about 2 months ago
JSON representation

Flexible Vue.js Table Component

• Host: GitHub
• URL: https://github.com/schnapsterdog/flexi-table
• Owner: SchnapsterDog
• License: mit
• Created: 2018-09-20T22:54:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T12:31:11.000Z (about 2 years ago)
• Last Synced: 2024-04-24T22:42:44.858Z (10 months ago)
• Language: Vue
• Homepage:
• Size: 333 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[[Flexi Table]](https://akrinum.com)

[![prs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/SchnapsterDog/flexi-table/pulls)

[![npm version](https://img.shields.io/bundlephobia/min/flexi-table?style=flat-square)](https://www.npmjs.com/package/flexi-table)

[![npm](https://img.shields.io/npm/dw/flexi-table?style=flat-square)](https://www.npmjs.com/package/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. :heart:.

## :exclamation::exclamation::exclamation: This is README for FlexiTable component :exclamation::exclamation::exclamation:

Flexi Table vue component made by [Oliver](https://akrinum.com)

## ⚙ Installation

```js

npm install flexi-table --save-dev

```

## 🤔 How to use it? 

### Module usage 

```js

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"},

      ] 

    }

  }

}

```

```html

```

### Browser usage

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

```html

  Vue.use(FlexiTable);

```

## 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](http://opensource.org/licenses/MIT)