vue-quasar-table-wrapper

A lightweight Vue 3 table wrapper component built with Quasar, providing a flexible and reusable data table component for your projects.

Installation

npm install vue-quasar-table-wrapper quasar vue

Requirements

• Vue: ^3.5.25
• Quasar: ^2.18.6

Usage

Register Plugin Globally

import { createApp } from 'vue';
import Quasar from 'quasar';
import quasarIconSet from 'quasar/icon-set/material-icons';
import '@quasar/extras/material-icons/material-icons.css';
import 'quasar/dist/quasar.css';
import App from './App.vue';
import VueQuasarTableWrapper from 'vue-quasar-table-wrapper';

const app = createApp(App);

app.use(Quasar, {
  iconSet: quasarIconSet,
});
app.use(VueQuasarTableWrapper);
app.mount('#app');

Use Components in Templates

<template>
  <q-table-wrapper
    :rows="tableData"
    :columns="tableColumns"
    :pagination="paginationOptions"
    row-key="id"
  >
    <template #top>
      <div class="text-h6">My Data Table</div>
    </template>
  </q-table-wrapper>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tableData = ref([
  { id: 1, name: 'John', age: 28 },
  { id: 2, name: 'Jane', age: 32 },
]);

const tableColumns = ref([
  { name: 'id', label: 'ID', field: 'id' },
  { name: 'name', label: 'Name', field: 'name' },
  { name: 'age', label: 'Age', field: 'age' },
]);

const paginationOptions = ref({});
</script>

Components

QTableWrapper

A flexible wrapper around Quasar's q-table component with enhanced slot support.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | rows | Array | [] | Table data rows | | columns | Array | [] | Column definitions | | rowKey | String | 'id' | Unique row identifier | | pagination | Object | {} | Pagination configuration | | loading | Boolean | false | Loading state indicator |

Slots

All main Quasar q-table slots are forwarded:

• top - Top section
• top-left - Top-left corner
• top-right - Top-right corner
• header - Header cells
• body - Body rows
• body-cell - Individual body cells
• pagination - Pagination controls
• loading - Loading indicator
• no-data - Empty state (default: "No data available")

Example

<q-table-wrapper
  :rows="items"
  :columns="cols"
  row-key="id"
  :loading="isLoading"
>
  <template #top>
    <span class="text-subtitle2">Item List</span>
  </template>

  <template #body-cell="props">
    <q-td :props="props">
      {{ props.row[props.col.field] }}
    </q-td>
  </template>
</q-table-wrapper>

Project Structure

src/
├── index.ts              # Entry point and plugin definition
├── shims-vue.d.ts        # Vue SFC type declarations
└── components/
    └── QTableWrapper.vue # Table wrapper component

TypeScript Support

Full TypeScript support is included with type definitions (dist/index.d.ts). Components are fully typed for IDE autocomplete and type checking.

License

ISC

Author

twd

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.