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]; } & {};