# tablevu

> vue 3 data table

Latest version **0.2.22** (published 2024-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install tablevu
pnpm add tablevu
yarn add tablevu
bun add tablevu
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.22 |
| Published | 2024-01-04 |
| First published | 2021-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | endb |
| Maintainers | enbz |
| Keywords | table, datatable, vue3 table, vue3 datatable, vue 3 table, vue 3 datatable |

## Links

- npm: https://www.npmjs.com/package/tablevu
- Repository: https://github.com/endb/tablevu
- Homepage: https://github.com/endb/tablevu#readme
- Issues: https://github.com/endb/tablevu/issues
- npm.io page: https://npm.io/package/tablevu

## 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

- 0.2.22 (latest) — 2024-01-04
- 0.2.21 — 2024-01-04
- 0.2.20 — 2023-10-08
- 0.2.19 — 2023-10-08
- 0.2.18 — 2023-10-08
- 0.2.17 — 2023-10-08
- 0.2.16 — 2023-06-18
- 0.2.15 — 2023-04-17
- 0.2.14 — 2023-04-17
- 0.2.13 — 2023-04-17
- 0.2.12 — 2023-04-17
- 0.2.11 — 2022-12-25
- 0.2.10 — 2022-12-25
- 0.2.9 — 2022-12-25
- 0.2.8 — 2022-12-25
- … 12 more at https://npm.io/package/tablevu/versions

## README

# tablevu (alpha version)
Simple javasript table for vuejs 3.x (Doesn't work with vuejs 2.x)

* No Dependencies

* Working with javascript array or server side (odata or default request)

* Sorting

* Filtering

* Custom column rendering

* ...


## Install
```shell
npm install tablevu
```


## Usage
* **data**		: Array or Server side parameters

* **grouping**		: Grouping data specific column or function

* **filter**		: Reactive filter value

* **search**		: Reactive search value

* **rowid**		: Key value for row.

* **class**		: Table class name. (default "table")

* **buttonclass**	: Arrow buttons class name (default "btn")

* **onRowClick**	: Row click event

* **onRowDblClick**	: Row double click event

* **columns**
  * **name**	  	: Column name
  
  * **label**	  	: Column label
  
  * **searchable** 	: Column is searchable (default true)
  
  * **orderable**	: Column is orderable (default true)
  
  * **width**	  	: Column width
  
  * **align**	  	: Column align

  * **style**	  	: Column style

  * **type**	  	: Data type (datetime, date, time, numeric). Show local value
  
  * **render**  	: Render value


## Samples

* odata sample (Coming soon..)
* search sample (Coming soon..)


**odata sample**

```code
<template>
  <tablevu :data="grid" rowid="OrderId" />
</template>

<script>
import { tablevu, odata } from 'tablevu'

export default {
  name: 'App',
  components: {
    tablevu
  },
  setup() {
    const prm = {
      url: `https://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json`,
      header: { 'Content-Type': 'application/json;odata=verbose' },
      select: ['OrderID', 'OrderDate', 'ShipName', 'ShipAddress'],
      expand: [
      ]
    };

    const grid = {
      adapter: (grd) => {
        return odata(prm, grd);
      },
      pageSize: 10,
      columns: [
        { name: 'OrderID', label: 'id', width: '26rem' },
        { name: 'OrderDate', label: 'name', width: '26rem' },
        { name: 'ShipName', label: 'name', width: '26rem' },
        { name: 'ShipAddress', label: 'name', width: '26rem' },
      ]
    }

    return { grid }
  }
}
</script>
```

## Dev. Dependencies

- [Vuejs](https://github.com/vuejs/vue) 3.0+


## Browser Support

Modern browsers.


## Authors
endb

## License
tablevu is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).

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