CYA-Well-Table

A customizable Quasar table component for Vue 3 applications.

Features

• Built with Quasar 2.16.0
• Vue 3 compatible
• Customizable search and pagination
• Slot support for customization
• TypeScript definitions included

Installation

npm install cya-well-table
# or
yarn add cya-well-table

Usage

Global Registration (Quasar)

// quasar.conf.js
boot: [
  'cya-well-table'
]

Local Registration

<script>
import { PageContent } from 'cya-well-table';

export default {
  components: {
    PageContent
  }
}
</script>

Basic Example

<template>
  <well-table
    :rows="tableData"
    :columns="columns"
    @request="loadData"
  />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tableData = ref([]);
    const columns = ref([
      {
        name: 'name',
        label: 'Name',
        field: 'name',
        sortable: true
      },
      {
        name: 'age',
        label: 'Age',
        field: 'age',
        sortable: true
      }
    ]);

    const loadData = (props) => {
      // Handle pagination/sorting/filtering
      console.log('Table request:', props);
    };

    return {
      tableData,
      columns,
      loadData
    };
  }
};
</script>

Advanced Usage with Slots

<template>
  <well-table
    :rows="tableData"
    :columns="columns"
  >
    <template #body-cell-name="props">
      <q-td :props="props">
        <q-badge color="primary">
          {{ props.value }}
        </q-badge>
      </q-td>
    </template>
    
    <template #top>
      <div class="text-h6">Custom Header</div>
    </template>
  </well-table>
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | rows | Array | [] | Table row data | | columns | Array | [...] | Column definitions | | rowKey | String | 'id' | Unique row identifier | | showSearch | Boolean | true | Show/hide search field | | initialPagination | Object | {...} | Initial pagination settings |

Events

| Event | Parameters | Description | |-------|------------|-------------| | request | { pagination, filter } | Emitted when table needs new data |

License

MIT