# vue-slim-tables

> ```sh yarn add vue-slim-tables // or npm install vue-slim-tables ```

Latest version **0.3.13** (published 2025-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-slim-tables
pnpm add vue-slim-tables
yarn add vue-slim-tables
bun add vue-slim-tables
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.13 |
| Published | 2025-12-21 |
| First published | 2020-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 51.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | fLa |
| Maintainers | flafla |
| Keywords | vue, table |

## Links

- npm: https://www.npmjs.com/package/vue-slim-tables
- Repository: https://github.com/flafla/vue-slim-table
- Issues: https://github.com/flafla/vue-slim-table/issues
- npm.io page: https://npm.io/package/vue-slim-tables

## 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.3.13 (latest) — 2025-12-21
- 0.3.12 — 2025-12-21
- 0.3.11 — 2025-12-20
- 0.3.10 — 2025-12-20
- 0.3.9 — 2025-12-20
- 0.3.8 — 2025-12-20
- 0.3.7 — 2025-03-26
- 0.2.0 — 2024-12-18
- 0.3.6 — 2024-07-04
- 0.3.5 — 2024-06-11
- 0.3.4 — 2023-10-03
- 0.3.2 — 2022-05-23
- 0.3.1 — 2022-04-23
- 0.3.0 — 2022-04-23
- 0.1.2 — 2022-01-08
- … 7 more at https://npm.io/package/vue-slim-tables/versions

## README

# Vue Slim Tables

### Installation & basic usage
```sh
yarn add vue-slim-tables
// or
npm install vue-slim-tables
```

```html
<template>
  <VueSlimTables :columns="columns" :source="asyncSource" />
</template>

<script setup>
const columns = [
  { key: 'id', title: 'ID' },
  { key: 'name', title: 'Name' },
  { key: 'phone', title: 'Phone' }
]

const asyncSource = (params) => {
  return fetch('...', params).then((res) => res.json())
}
</script>
```

### Props
| Prop | Type | Required | Description |
| - | - | - | - |
| columns | Array | true | Array of column objects described below |
| source | Function | true | async load |
| perPage | Number | false | Number or rows to display. By default 25 will be used |

#### Column object
| Key | Type | Required | Description |
| - | - | - | - |
| key | String | true | `Uniq` key that used for ordering and slots |
| title | String | true | Displayed in thead cell |
| orderable | Boolean | false | Ordering by column `key` |

### Slots
| Slot | Props | Description |
| - | - | - |
| #thead:before | - | Add a row before main |
| #thead | { columns, orders } | Rewrite the entire thead row |
| #thead:after | - | Add a row after main |
| #thead:${column.key} | { column } | Rewrite thead cell with custom html |
| #row | { row, index, columns } | Rewrite the entire tbody row |
| #row:empty | - | Rewrite empty table row markup |
| #row:loading | - | Rewrite loading table rows markup |
| #cell:${column.key} | { row, index, column, value } | Rewrite tbody cell with custom html |
| #pagination | { page, rows } | Rewrite pagination with your own implementation |

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