# anygrids

> AnyGrids - Free JavaScript tool for visualizing any business data

Latest version **0.1.3** (published 2020-06-17) · MIT license · 0 weekly downloads

## Install

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

## 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.1.3 |
| Published | 2020-06-17 |
| First published | 2020-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 69 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kaberton |
| Maintainers | kaberton |
| Keywords | grid, data, tables, visualizing, charts |

## Links

- npm: https://www.npmjs.com/package/anygrids
- Repository: https://github.com/AnyGrids/AnyGrids
- Homepage: https://anygrids.com
- Issues: https://github.com/AnyGrids/AnyGrids/issues
- npm.io page: https://npm.io/package/anygrids

## 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.1.3 (latest) — 2020-06-17
- 0.1.2 — 2020-05-28
- 0.1.1 — 2020-05-28
- 0.1.0 — 2020-05-17
- 0.0.19 — 2020-05-05
- 0.0.18 — 2020-05-05
- 0.0.17 — 2020-05-04
- 0.0.16 — 2020-04-26
- 0.0.15 — 2020-04-26
- 0.0.14 — 2020-04-25
- 0.0.13 — 2020-04-25
- 0.0.12 — 2020-04-25
- 0.0.11 — 2020-04-25
- 0.0.10 — 2020-04-24
- 0.0.9 — 2020-04-20
- … 8 more at https://npm.io/package/anygrids/versions

## README

# AnyGrids
AnyGrids - Free JavaScript tool for visualizing any business data :v:

![npm](https://img.shields.io/npm/dw/anygrids) ![npm bundle size](https://img.shields.io/bundlephobia/min/anygrids)

## Resources
* [Live demo](https://anygrids.com)
* [twitter](https://twitter.com/AnyGrids)
## Installation and usage
Start by installing AnyGrids as a node module and save it as a dependency in your package.json:
```
npm install anygrids --save
```
Then, include the JS file from node_modules:
```html
<script src="node_modules/anygrids/anygrids.js"></script>
```

Or via unpkg.com:
```html
<script src="https://unpkg.com/anygrids@latest/anygrids.js"></script>
```

Now, you can create an instance of AnyGrids table:
```html
<div id="anygrids">The component will appear here</div>
<script>
    //JSON data example:
    const data = [
        {
            id: 1,
            email: "michael.lawson@mail.in",
            first_name: "Michael",
            last_name: "Lawson",
            avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg",
            linear: [0, 30, 5, 29, 34],
            bar: [0, 30, 5, 29, 34],
            pie: [0.25, 0.30, 0.45],
            orders: 5,
        },
        {
            id: 2,
            email: "lindsay.ferguson@mail.in",
            first_name: "Lindsay",
            last_name: "Ferguson",
            avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg",
            linear: [0, 30, 5, 29, 34],
            bar: [0, 30, 5, 29, 34],
            pie: [0.25, 0.30, 0.45],
            orders: 25,
        },
        {
            id: 3,
            email: "michael.lawson@mail.in",
            first_name: "Michael",
            last_name: "Lawson",
            avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg",
            linear: [0, 30, 5, 29, 34],
            bar: [0, 30, 5, 29, 34],
            pie: [0.25, 0.30, 0.45],
            orders: 5,
        },
        {
            id: 4,
            email: "lindsay.ferguson@mail.in",
            first_name: "Lindsay",
            last_name: "Ferguson",
            avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg",
            linear: [0, 30, 5, 29, 34],
            bar: [0, 30, 5, 29, 34],
            pie: [0.25, 0.30, 0.45],
            orders: 25,
        }
    ];

    document.addEventListener("DOMContentLoaded", function() {
        new AnyGrids({
            container: 'anygrids', //div id
            data, //JSON data
            pagination: {
                perPage: 2
            },
            rows: {
                child: {
                    template: '<div><img src="avatar"> <div style="display:flex;">first_name last_name</div></div>pie_render'
                }
            },
            columns: [
                {field: 'id', title: '', type: 'string', width: 30, sortable: true},
                {field: 'email', title: 'E-mail', type: 'string', width: 200},
                {field: 'first_name', title: 'First name', type: 'string', width: 200, sortable: true},
                {field: 'last_name', title: 'Last name', type: 'string', width: 100, sortable: true},
                {field: 'avatar', title: 'Avatar', type: 'image', width: 50, class: 'avatar'},
                {field: 'linear', title: 'Linear', type: 'sparklines-linear', width: 150},
                {field: 'bar', title: 'Bar', type: 'sparklines-bar', width: 150},
                {field: 'pie', title: 'Pie', type: 'sparklines-pie', width: 150},
                {field: 'orders', title: 'Orders', type: 'number', width: 150, total: {show: true, label: 'Total orders: '}},
            ]
        })
    });

</script> 
```

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