import { HTMLAttributes, InjectionKey, Ref, ThHTMLAttributes } from 'vue';
import { MazColor, MazSize } from './types';
import { MazUiTranslationsNestedSchema } from '@maz-ui/translations';
import { DeepPartial } from '@maz-ui/utils/ts-helpers/DeepPartial';
type NonRecursiveClassValue = string | Record | (string | false | null | undefined | Record)[];
export interface MazTableHeadersEnriched {
label: string;
key?: string;
sortable?: boolean;
hidden?: boolean;
srOnly?: boolean;
width?: string;
maxWidth?: string;
classes?: NonRecursiveClassValue;
scope?: ThHTMLAttributes['scope'];
align?: ThHTMLAttributes['align'];
rowspan?: ThHTMLAttributes['rowspan'];
colspan?: ThHTMLAttributes['colspan'];
headers?: ThHTMLAttributes['headers'];
}
export type MazTableRow> = Record & {
selected?: boolean;
action?: (row: T) => unknown;
classes?: HTMLAttributes['class'];
};
export type MazTableHeader = string | MazTableHeadersEnriched;
export interface MazTableProps> {
/**
* CSS class of the table element
* @type {HTMLAttributes['class']}
*/
tableClass?: HTMLAttributes['class'];
/**
* CSS style of the table element
* @type {HTMLAttributes['style']}
*/
tableStyle?: HTMLAttributes['style'];
/**
* List of selected rows
* @type {(string | boolean | number)[]}
* @model
*/
modelValue?: (string | boolean | number)[];
/**
* Size of the table
* @type {MazSize}
* @values xl, lg, md, sm, xs, mini
* @default md
*/
size?: MazSize;
/**
* Size of the search inputs
* @type {MazSize}
* @values xl, lg, md, sm, xs, mini
*/
inputSize?: MazSize;
/**
* Title of the table
* @type {string}
*/
title?: string;
/**
* Headers of the table
* @type {MazTableHeader[]}
*/
headers?: MazTableHeader[];
/**
* Enable sort feature on all columns
* @type {boolean}
* @default false
*/
sortable?: boolean;
/**
* Align all headers
* @type {string}
* @default left
*/
headersAlign?: ThHTMLAttributes['align'];
/**
* Rows of the table
* @type {T[]}
*/
rows?: T[];
/**
* Add hover effect on rows
* @type {boolean}
* @default false
*/
hoverable?: boolean;
/**
* Enable search feature in table header
* @type {boolean}
* @default false
*/
search?: boolean;
/**
* Disable search in rows - useful to filter data yourself or make search request to server
* @type {boolean}
* @default false
*/
hideSearchInRow?: boolean;
/**
* Disable search by column (remove select input "search by")
* @type {boolean}
* @default false
*/
hideSearchBy?: boolean;
/**
* Search query in input
* @type {string}
* @model
*/
searchQuery?: string;
/**
* Add background color to odd rows
* @type {boolean}
* @default false
*/
backgroundOdd?: boolean;
/**
* Add background color to even rows
* @type {boolean}
* @default false
*/
backgroundEven?: boolean;
/**
* Add shadow to the table
* @type {boolean}
* @default false
*/
elevation?: boolean;
/**
* add divider between rows
* @type {boolean}
* @default false
*/
divider?: boolean;
/**
* Caption of the table
* @type {string}
*/
caption?: string;
/**
* Caption side
* @type {string}
* @values top, bottom
* @default bottom
*/
captionSide?: 'top' | 'bottom';
/**
* Add pagination in table footer
* @type {boolean}
* @default false
*/
pagination?: boolean;
/**
* Current page of pagination
* @type {number}
* @model
* @default 1
*/
page?: number;
/**
* Number of items per page
* @type {number}
* @model
* @default 20
*/
pageSize?: number;
/**
* Total number of pages
* @type {number}
*/
totalPages?: number;
/**
* Don't paginate rows - useful to make pagination request with your server
* @type {boolean}
* @default true
*/
paginateRows?: boolean;
/**
* Total number of items
* @type {number}
*/
totalItems?: number;
/**
* Loading state
* @type {boolean}
* @default false
*/
loading?: boolean;
/**
* Enable selection of rows
* @type {boolean}
* @default false
*/
selectable?: boolean;
/**
* Enable selection of rows - key of the selected row
* @type {string}
*/
selectedKey?: string;
/**
* Table layout
* @type {string}
* @values auto, fixed
*/
tableLayout?: 'auto' | 'fixed';
/**
* Color of the component
* @type {MazColor}
* @default primary
*/
color?: MazColor;
/**
* Translations of the table
* @type {DeepPartial}
* @default Translations from @maz-ui/translations
*/
translations?: DeepPartial;
/**
* Size radius of the component's border
* @type {string}
* @values none, sm, md, lg, xl, full, base
* @default base
*/
roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'base';
/**
* Enable scrollable on table
* @type {boolean}
* @default false
*/
scrollable?: boolean;
}
export interface MazTableProvide {
size: Ref;
hoverable: Ref;
backgroundEven: Ref;
backgroundOdd: Ref;
}
export declare const mazTableKey: InjectionKey;
declare const _default: >(__VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable>["expose"], __VLS_setup?: Promise<{
props: __VLS_PrettifyLocal & Omit<{
readonly "onUpdate:model-value"?: ((value: (string | number | boolean | MazTableRow)[] | undefined) => any) | undefined;
readonly "onUpdate:search-query"?: ((searchQuery: string | undefined) => any) | undefined;
readonly "onUpdate:page"?: ((page: number) => any) | undefined;
readonly "onUpdate:page-size"?: ((pageSize: number) => any) | undefined;
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:model-value" | "onUpdate:search-query" | "onUpdate:page" | "onUpdate:page-size"> & MazTableProps & any> & import('vue').PublicProps;
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
attrs: any;
slots: any;
emit: {
(event: "update:model-value", value: (MazTableRow | string | number | boolean)[] | undefined): void;
(event: "update:search-query", searchQuery: string | undefined): void;
(event: "update:page", page: number): void;
(event: "update:page-size", pageSize: number): void;
};
}>) => import('vue').VNode & {
__ctx?: Awaited;
};
export default _default;
type __VLS_PrettifyLocal = {
[K in keyof T]: T[K];
} & {};