# vue-awesome-grid

> Vue 2.0 datatables alternative to jQuery datatables

Latest version **1.1.8** (published 2021-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-awesome-grid
pnpm add vue-awesome-grid
yarn add vue-awesome-grid
bun add vue-awesome-grid
```

## 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.8 |
| Published | 2021-01-22 |
| First published | 2020-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 833 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yuriy Yazupol |
| Maintainers | yyazupol |
| Keywords | vue, datatables, grid |

## Links

- npm: https://www.npmjs.com/package/vue-awesome-grid
- Repository: https://github.com/meold/vue-awesome-grid
- Homepage: https://meold.github.io/vue-awesome-grid/
- Issues: https://github.com/meold/vue-awesome-grid/issues
- npm.io page: https://npm.io/package/vue-awesome-grid

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.12

## 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.1.8 (latest) — 2021-01-22
- 1.1.7 — 2020-11-23
- 1.1.6 — 2020-11-21
- 1.1.5 — 2020-11-21
- 1.1.4 — 2020-11-20
- 1.1.3 — 2020-11-17
- 1.1.2 — 2020-11-16
- 1.1.1 — 2020-11-16
- 1.1.0 — 2020-11-05
- 1.0.2 — 2020-09-25
- 1.0.1 — 2020-09-25

## README

# vue-awesome-grid

[![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)](https://forthebadge.com)
[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)


# How it works?
[demo](https://meold.github.io/vue-awesome-grid/)

# Build the component

```
$ npm install
$ npm run build
```

> **Component is build to**
> - CommonJS/UMD javascript module
> - an ES6 javascript module

# Usage

```js
import Vue from 'vue';
import { VueAwesomeGrid } from 'vue-awesome-grid';

Vue.use(VueAwesomeGrid);
```

## Tip: too many `props` to pass? [`v-bind`](https://vuejs.org/v2/api/#v-bind) can help

```html
<template>
  <div>
    <!-- Too much code: -->
    <simple-component
      :g="1"
      :r="2"
      :i="3"
      :d="4">
    </simple-component>

    <!-- Do the same thing but simplier -->
    <simple-component v-bind="$data" />
  </div>
</template>
<script>
export default {
  data: () => ({
    g: '1',
    r: '2',
    i: '3',
    d: '4'
  });
}
</script>
```


# Reference

## VueAwesomeGrid `props`

| Property | Description | Type| Default | Mandatory |
|---|---|---|---|---|
| columns | definition of columns (see below) | array | - | Yes |
| data | data of the current page | array | - | Yes |
| total | total number of the records (if set to 0, then total block is disabled) | number | 0 | Yes |
| filtered | total number of filtered records | number | - | No |
| query | query object | object | - | Yes |
| summary | summary row | HTMLTableRowElement | - | No |
| headerSettings | whether to render headerSettings | boolean | true | No |
| pagination | whether to render pagination | boolean | true | No |
| pageSizeOptions | options for page size select | array | [10, 25, 100] | No |
| noDataPlaceholder | placeholder for grid in case empty data in table | string | (No Data) | No |
| extraProps | object for extra props, which will be passed to dynamic components | object | - | No |

## `columns`

| Key | Description | Type | Default | Mandatory |
|---|---|---|---|---|
| title | displayed title of column | string | - | Yes |
| label | label in headerSettings (`title` will take its place if not set) | string | - | No |
| field | field name of the row in `data` structure | string | - | No |
| sortable | is sortable? | boolean | false | No |
| visible | is visible? | boolean | true | No |
| tdComp | dynamic component for 'td' | string/object | - | No |
| tdClass | classes for `td` | string or function(value, row) | - | No |
| tdStyle | inline styles for `td` | object | - | No |
| thClass | classes for `th` | string | - | No |
| render | formatting functions for display | function(value, row) | - | No |
| clickEvent | callback cell clicked | function(value, row) | - | No |

## `query`

| Key | Description | Type | Default |
|---|---|---|---|
| limit | count of entries to return | number | 10 |
| offset | return data since this entry number | number | 0 |
| order | direction, `asc` or `desc` | string | "" |
| sort | sort field name | string | "" |
| search | search string | string | "" |

And anything else you might need (this parameters must be implemented in backend).

## `summary`

Row that is located at the bottom of the table and shows additional resulting information about the data.
By default, the summary row is not showing.
To show it you must set it to object with similar structure, as the row in table.

## `extraProps`

Is used to pass additional properties to nested components.
For example, you can pass bus object for events.

## `ROW_UPDATED`

If the data of one row is updated and you don't need to update the whole data object, you can call `ROW_UPDATED` event to update only one row.
You must pass one parameter to event with the folowing structure: `{ id: idValue, data: newRowData}`.

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