ANQ Server Data Table

A powerful server-side data table component for Vue 3 applications, built with Quasar Framework. This component provides a seamless way to handle server-side pagination, filtering, sorting, and data management in your Vue applications.

Features

Server-side pagination with customizable page sizes
Advanced server-side filtering with a modal form
Server-side sorting
Built-in search functionality
Row click events
Customizable column definitions
Responsive design
Built with Vue 3 and Quasar Framework
TypeScript support
Customizable styling with Tailwind CSS
Modal form integration
Axios for API requests

Installation

npm install anq-server-data-table

Usage

<template>
  <anq-server-data-table
    :columns="columns"
    :link="apiEndpoint"
    :link-params="additionalParams"
    :title="'My Data Table'"
    :has-search="true"
    :has-filter="true"
    :show-page-size-select="true"
    :enable-row-click="true"
    :filter-modal-data="filterConfig"
    @row-click="handleRowClick"
    @get-data-successfuly="handleDataSuccess"
    @get-data-error="handleDataError"
  />
</template>

<script setup lang="ts">
import { AnqServerDataTable } from 'anq-server-data-table'

const columns = [
  { name: 'id', label: 'ID', field: 'id', sortable: true },
  { name: 'name', label: 'Name', field: 'name', sortable: true },
  // Add more columns as needed
]

const filterConfig = {
  fields: [
    {
      type: 'text',
      label: 'Name',
      urlParam: 'name'
    },
    {
      type: 'select',
      label: 'Status',
      urlParam: 'status',
      choices: [
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' }
      ]
    },
    {
      type: 'date',
      label: 'Created Date',
      urlParam: 'created_at'
    }
  ]
}

const handleRowClick = (row, index) => {
  console.log('Row clicked:', row, index)
}

const handleDataSuccess = (data) => {
  console.log('Data loaded successfully:', data)
}

const handleDataError = (error) => {
  console.error('Error loading data:', error)
}
</script>

Props

Prop	Type	Required	Description
columns	QTableColumn[]	Yes	Array of column definitions
link	String	Yes	API endpoint URL
linkParams	Object	No	Additional URL parameters
title	String	No	Table title
loading	Boolean	No	Loading state of the table
hidePagination	Boolean	No	Hide pagination controls
flat	Boolean	No	Flat style for the table
square	Boolean	No	Square style for the table
hasSearch	Boolean	No	Enable search functionality
hasFilter	Boolean	No	Enable filter functionality
showPageSizeSelect	Boolean	No	Show page size selector
enableRowClick	Boolean	No	Enable row click events
filterModalData	FilterModalData	No	Configuration for filter modal
axiosInterceptor	AxiosInstance	No	Custom Axios instance
paginationResponseKeys	Object	No	Custom pagination response keys
orderingKey	String	No	Custom ordering parameter key
pageSizes	number[]	No	Available page sizes

The component supports various field types in the filter modal:

text: Text input
date: Date picker
time: Time picker
date-time: Date and time picker
number: Number input
boolean-checkbox: Single checkbox
checkboxs: Multiple checkboxes
radios: Radio buttons
select: Single select dropdown
select-multiple: Multiple select dropdown

Events

Event	Parameters	Description
rowClick	(row: any, index: number)	Emitted when a row is clicked
getDataSuccessfuly	(data: any)	Emitted when data is successfully loaded
getDataError	(error: any)	Emitted when data loading fails
openFilter	()	Emitted when filter modal is opened

Slots

The component provides several slots for customization:

title: Custom table title
search-input: Custom search input
filter-btn: Custom filter button
pagination: Custom pagination controls
page-size: Custom page size selector
All Quasar QTable slots
Filter modal slots (prefixed with filter-modal-)

Dependencies

Vue 3
Quasar Framework
Axios
TypeScript
Tailwind CSS
anq-modal-form

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Aymane Nahji

Repository

GitHub Repository

Package detail