# vue-ui-grid

> Simple, fast, powerful grid package for vuejs

Latest version **1.0.0-alpha.22** (published 2025-12-08) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.22 |
| Published | 2025-12-08 |
| First published | 2019-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 627.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | mihnsen |
| Maintainers | mihnsen |
| Keywords | grid, datatable, vue-grid |

## Links

- npm: https://www.npmjs.com/package/vue-ui-grid
- Repository: https://github.com/mihnsen/vue-ui-grid
- Homepage: https://github.com/mihnsen/vue-ui-grid#readme
- Issues: https://github.com/mihnsen/vue-ui-grid/issues
- npm.io page: https://npm.io/package/vue-ui-grid

## Dependencies (1)

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

## 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.0.0-alpha.22 (latest) — 2025-12-08
- 1.0.0-alpha.3 (next) — 2022-06-23
- 1.0.0-alpha.21 — 2025-12-05
- 1.0.0-alpha.20 — 2025-05-12
- 1.0.0-alpha.19 — 2025-05-05
- 1.0.0-alpha.18 — 2025-02-26
- 1.0.0-alpha.17 — 2025-02-26
- 1.0.0-alpha.16 — 2025-02-25
- 1.0.0-alpha.15 — 2025-02-25
- 1.0.0-alpha.14 — 2025-02-20
- 1.0.0-alpha.13 — 2025-02-14
- 1.0.0-alpha.12 — 2025-02-13
- 1.0.0-alpha.11 — 2025-02-13
- 1.0.0-alpha.10 — 2025-02-13
- 1.0.0-alpha.9 — 2025-02-13
- … 91 more at https://npm.io/package/vue-ui-grid/versions

## README

# vue-ui-grid
Simple, fast, powerful grid package for vuejs

## Demo
https://mihnsen.github.io/vue-ui-grid/


## Installation
```
npm install vue-ui-grid
or
yarn add vue-ui-grid
```

## Usage
```
import VGrid from 'vue-ui-grid';

// Use it
Grid.vgrid-center(
  :columns="gridColumns",
  :data="gridData",
  :per-page="2",
  :column-filter="true",
)
  template(
    slot="column-action"
    slot-scope="{ entry }"
  )
    button(
      type="button",
    ) ADD

// Or list

List(
  :columns="listColumns",
  :data="listData",
  :per-page="10",
  :column-visible="true",
  :orderable="true",
  ref="list"
)
  template(
    slot="column-action"
    slot-scope="{ entry }"
  )
    button(
      type="button",
    ) ADD
    a(
      href="gooogle.com"
    ) Edit

// CSS
@import '~vue-ui-grid/src/assets/scss/index'
```

Setup your promise function as a promise like this.
```
export default {
  data() {
    return {
      gridColumns: [
        {
          field: 'name',
          lable: 'Actor'
        },
        {
          field: 'power',
          lable: 'Power'
        }
      ],
      gridData: [
        { name: 'Chuck Norris', power: Infinity },
        { name: 'Bruce Lee', power: 9000 },
        { name: 'Jackie Chan', power: 7000 },
        { name: 'Jet Li', power: 8000 }
      ]
    }
  }
}
```

#### Column Properties
```
{
  field: 'id',
  label: 'ID',
  filter: true,
  hidden: true,
  width: 3
}
```
| Option      | Required    | Default     | Description                    |
| ----------- | ----------- | ----------- | ------------------------------ |
| field       | Yes         |             | Title                          |
| label       | No          |             | Label of column                |
| type        | No          | String      | field type (text/number/date)  |
| filter      | No          | False       | Set column filter or not       |
| order       | No          | False       | Set column order or not        |
| hidden      | No          | False       | Set hidden column, can't see   |
| width       | No          | False       | Set width column, use for list |
| format      | No          |             | Format content: '<strong>{name}</strong>' |

#### Props
| Props          | Required    | Default     | Description                    |
| -------------- | ----------- | ----------- | ------------------------------ |
| columns        | Yes         | []          | Column config                  |
| data           | Yes         | []          | Data source                    |
| per-page       | No          | 10          | Number of items per page       |
| searchable     | No          | True        | Search data in header          |
| filterable     | No          | True        | Filter data in header          |
| column-visible | No          | False       | Custom show hide, order column |
| column-filterable | No       | False       | Filter column in side grid     |
| index          | No          | 0           | Initial page                   |
| status         | No          | True        | Grid status                    |
| pagination     | No          | True        | Paginate data                  |

## Development
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Run your unit tests
```
yarn run test:unit
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

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