# vue-bulma-table

> Vue DataTable with Bulma style

Latest version **1.6.8** (published 2024-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-bulma-table
pnpm add vue-bulma-table
yarn add vue-bulma-table
bun add vue-bulma-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.6.8 |
| Published | 2024-02-21 |
| First published | 2017-11-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 1sttati |
| Maintainers | 1sttati |
| Keywords | vue, datatable, table, bulma |

## Links

- npm: https://www.npmjs.com/package/vue-bulma-table
- npm.io page: https://npm.io/package/vue-bulma-table

## Dependencies (4)

- [bulma](https://npm.io/package/bulma.md) ^0.6.0
- [jquery](https://npm.io/package/jquery.md) ^3.3.1
- [vue-awesome](https://npm.io/package/vue-awesome.md) ^2.3.3
- [vue-style-loader](https://npm.io/package/vue-style-loader.md) ^4.1.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.6.8 (latest) — 2024-02-21
- 1.6.7 — 2022-05-24
- 1.6.6 — 2022-05-23
- 1.6.5 — 2022-05-23
- 1.6.4 — 2021-12-21
- 1.6.3 — 2021-12-01
- 1.6.2 — 2021-05-21
- 1.6.1 — 2021-05-21
- 1.6.0 — 2021-05-21
- 1.5.25 — 2020-02-25
- 1.5.24 — 2020-02-25
- 1.5.23 — 2020-01-02
- 1.5.22 — 2020-01-02
- 1.5.21 — 2020-01-02
- 1.5.20 — 2019-09-11
- … 41 more at https://npm.io/package/vue-bulma-table/versions

## README

# vue-bulma-table
Vue DataTable with Bulma style

## Getting Started
### Installing
```
npm install vue-bulma-table --save
```
or
```
yarn add vue-bulma-table
```

### Setup
```js
import DataTable from 'vue-bulma-table'

Vue.component('data-table', DataTable)
```

## Example:

### html
```html
<data-table
  :data="data"                                    # required - array of data
  :fields="fields"                                # required - set columns
>

  <template slot="lastname" slot-scope="prop">    # using slot in lastname field
    <h1>{{ prop.data.lastname }}</h1>
  </template>
  
  <template slot="footer">                        # optional - using footer
    <tr></tr>
  </template>
  
</data-table>
```

### script
```js
export default {
  data () {
    return {
      fields: [
        {
          name: 'firstname',      // name of object property in array
          label: 'First name',    // optional - custom table header
        },
        {
          name: 'lastname',
          label: 'Last name'
        },
        
        {
          name: 'age',
          label: 'Age',
          callback: data => {   // optional - get data of the role and return to cell
            return data.age * 2
          }
        }
      ]
    }
  }
}
```

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