# flexi-table

> A Vue.js component Table

Latest version **1.1.5** (published 2021-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install flexi-table
pnpm add flexi-table
yarn add flexi-table
bun add flexi-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2021-04-01 |
| First published | 2018-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 38.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Oliver Trajcheski @SchanpsterDog |
| Maintainers | schnapsterdog |
| Keywords | vue, javascript, date, flexbox, table, css, flexitable, component, flexi vue, design |

## Links

- npm: https://www.npmjs.com/package/flexi-table
- Repository: https://github.com/SchnapsterDog/flexi-table
- Homepage: https://github.com/SchnapsterDog/flexi-table#readme
- Issues: https://github.com/SchnapsterDog/flexi-table/issues
- npm.io page: https://npm.io/package/flexi-table

## Dependencies (1)

- [css-loader](https://npm.io/package/css-loader.md) ^1.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2021-04-01
- 1.1.4 — 2019-09-19
- 1.1.3 — 2019-09-18
- 1.1.2 — 2019-04-16
- 1.1.1 — 2019-04-16
- 1.1.0 — 2019-04-16
- 1.0.5 — 2019-04-16
- 1.0.2 — 2018-09-21
- 1.0.1 — 2018-09-21
- 1.0.0 — 2018-09-21

## 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
<flexi-table 
  :color="'green'"
  :rows="rows"
  :columns="columns"
/>
```

### Browser usage

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

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

---
_Source: https://npm.io/package/flexi-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._