# att-table

> beta

Latest version **1.0.9** (published 2022-07-08) · 0 weekly downloads

## Install

```sh
npm install att-table
pnpm add att-table
yarn add att-table
bun add att-table
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-07-08 |
| First published | 2022-05-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 81.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | welldyrosman |

## Links

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

## Recent versions

- 1.0.9 (latest) — 2022-07-08
- 1.0.8 — 2022-07-08
- 1.0.7 — 2022-07-08
- 1.0.6 — 2022-07-08
- 1.0.5 — 2022-07-08
- 1.0.4 — 2022-06-06
- 1.0.3 — 2022-05-30
- 1.0.2 — 2022-05-28
- 1.0.1 — 2022-05-27
- 1.0.0 — 2022-05-27

## README

# ATT-TABLE
## Installation
```sh
npm i att-table
```
## Usage
### template
```sh
<mydatatable :serverParams="datatableconfig" :column="column">
```
### vue/nuxt
```sh
import attTable from "att-table";
export default {
 components: { attTable },
 data() {
    return {
      datatableconfig: {
          repo:"[Your Repo]",
          title:"Card Title",
          subtitle: "Card Subtitle",
          btnFilter: true,//default false,
          columnFilters:{
              
          }
      },
      column:[
        {
            title: "Name",
            field: "name",
            sort: true,
            order: "asc"
        },
        {
          title: "Account",
          field: "is_active",
          input: {
            type: "badge",
            condition: {
              "1": {
                class: "success",
                text: "Active"
              },
              "0": {
                class: "danger",
                text: "Not Active"
              }
            }
          }
        },
        {
            title:"Action",
            input:{
                type:"button",
                clickHandler:this.clickHandler,
                text:"Submit"
            }
         },
         {
            title: "Action",
            input: {
                type: "dropdown",
                text: "Submit",
                subaction: [
                  {
                    label: "Review Form",
                    clickHandler: this.onviewlpk,
                  },
                  {
                    label: "Disabled",
                    clickHandler:this.disabledHandler,
                    vif:function(i){
                      return i.is_active==1
                    },
                  },
                  {
                    label: "Enabled",
                    clickHandler:this.enabledHandler,
                    vif:function(i){
                      return i.is_active==0
                    },
                  }
                ]
          }
        },
      ]
 }
```
### use advance filter
```sh
 <mydatatable :serverParams="datatableconfig" :column="column">
        <div class="form-group row">
          <label class="col-2 col-form-label">Name</label>
          <div class="col-10">
            <input class="form-control" placeholder="Search Name" v-model="datatableconfig.columnFilters.name" />
          </div>
        </div>
 </mydatatable>
```

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