anq-server-data-table/dist/types/components/AnqServerDataTable.vue.d.ts

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.

import { QTableColumn, QTableSlots } from 'quasar';
import { AnqModalForm } from 'anq-modal-form';
import { AxiosInstance } from 'axios';
type Paginated<T = any> = {
    count: number;
    lastPage: number;
    next: string | null;
    previous: string | null;
    results: T[];
};
type Filter = {
    [key: string]: any;
};
type FilterModalSlots = InstanceType<typeof AnqModalForm>['$slots'];
export type AnServerDataTableSlots = Omit<QTableSlots, 'pagination'> & {
    [K in keyof FilterModalSlots as K extends "content" ? string : `filter-modal-${K}`]: FilterModalSlots[K];
} & {
    "title"?(_: {}): any;
    "search-input"?(_: {
        loading: boolean;
        value: string;
        search: (val: string) => void;
    }): any;
    "filter-btn"?(_: {
        label: string;
        color: string;
        click: () => void;
    }): any;
    "pagination"?(_: {
        value: number;
        change: (val: number) => void;
    }): any;
    "page-size"?(_: {
        value: number;
        change: (val: number) => void;
    }): any;
};
export type FilterModalData = {
    fields: {
        type: 'boolean-checkbox' | 'checkboxs' | 'radios' | 'text' | 'select' | 'select-multiple' | 'number' | 'date' | 'time' | 'date-time';
        label: string;
        urlParam: string;
        defaultValue?: any;
        choices?: {
            label: string;
            value: string | number | any;
        }[];
    }[];
    props?: InstanceType<typeof AnqModalForm>['$props'];
};
type __VLS_Slots = AnServerDataTableSlots;
declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    columns: {
        type: () => QTableColumn[];
        required: true;
    };
    link: {
        type: StringConstructor;
        required: true;
    };
    linkParams: {
        type: () => {
            [key: string]: string | number;
        };
        default: {};
    };
    title: {
        type: StringConstructor;
        default: string;
    };
    loading: {
        type: BooleanConstructor;
        default: boolean;
    };
    hidePagination: {
        type: BooleanConstructor;
        default: boolean;
    };
    flat: {
        type: BooleanConstructor;
        default: boolean;
    };
    square: {
        type: BooleanConstructor;
        default: boolean;
    };
    hasSearch: {
        type: BooleanConstructor;
        default: boolean;
    };
    hasFilter: {
        type: BooleanConstructor;
        default: boolean;
    };
    showPageSizeSelect: {
        type: BooleanConstructor;
        default: boolean;
    };
    enableRowClick: {
        type: BooleanConstructor;
        default: boolean;
    };
    filterModalData: {
        type: () => FilterModalData;
        default: FilterModalData;
    };
    axiosInterceptor: {
        type: () => AxiosInstance;
        required: false;
    };
    paginationResponseKeys: {
        type: () => { [K in keyof Paginated]: string; };
        default: { [K in keyof Paginated]: string; };
    };
    orderingKey: {
        type: StringConstructor;
        default: string;
    };
    pageSizes: {
        type: () => number[];
        default: number[];
    };
    searchUrlParam: {
        type: StringConstructor;
        default: string;
    };
}>, {
    filter: (dataFilter: Filter) => Promise<void>;
    fetchData: () => Promise<void>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
    openFilter: () => any;
    rowClick: (row: any, index: number) => any;
    getDataSuccessfuly: (data: any) => any;
    getDataError: (error: any) => any;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    columns: {
        type: () => QTableColumn[];
        required: true;
    };
    link: {
        type: StringConstructor;
        required: true;
    };
    linkParams: {
        type: () => {
            [key: string]: string | number;
        };
        default: {};
    };
    title: {
        type: StringConstructor;
        default: string;
    };
    loading: {
        type: BooleanConstructor;
        default: boolean;
    };
    hidePagination: {
        type: BooleanConstructor;
        default: boolean;
    };
    flat: {
        type: BooleanConstructor;
        default: boolean;
    };
    square: {
        type: BooleanConstructor;
        default: boolean;
    };
    hasSearch: {
        type: BooleanConstructor;
        default: boolean;
    };
    hasFilter: {
        type: BooleanConstructor;
        default: boolean;
    };
    showPageSizeSelect: {
        type: BooleanConstructor;
        default: boolean;
    };
    enableRowClick: {
        type: BooleanConstructor;
        default: boolean;
    };
    filterModalData: {
        type: () => FilterModalData;
        default: FilterModalData;
    };
    axiosInterceptor: {
        type: () => AxiosInstance;
        required: false;
    };
    paginationResponseKeys: {
        type: () => { [K in keyof Paginated]: string; };
        default: { [K in keyof Paginated]: string; };
    };
    orderingKey: {
        type: StringConstructor;
        default: string;
    };
    pageSizes: {
        type: () => number[];
        default: number[];
    };
    searchUrlParam: {
        type: StringConstructor;
        default: string;
    };
}>> & Readonly<{
    onOpenFilter?: (() => any) | undefined;
    onRowClick?: ((row: any, index: number) => any) | undefined;
    onGetDataSuccessfuly?: ((data: any) => any) | undefined;
    onGetDataError?: ((error: any) => any) | undefined;
}>, {
    title: string;
    square: boolean;
    flat: boolean;
    loading: boolean;
    linkParams: {
        [key: string]: string | number;
    };
    hidePagination: boolean;
    hasSearch: boolean;
    hasFilter: boolean;
    showPageSizeSelect: boolean;
    enableRowClick: boolean;
    filterModalData: FilterModalData;
    paginationResponseKeys: {
        count: string;
        lastPage: string;
        next: string;
        previous: string;
        results: string;
    };
    orderingKey: string;
    pageSizes: number[];
    searchUrlParam: string;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
export default _default;
type __VLS_WithSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};