@fewangsit/wangsvue-fats 1.0.0-alpha.30 → 1.0.0-alpha.32

package/components/datatable/DataTable.vue.d.ts

@@ -1,34 +1,34 @@
-import { DialogConfirmProps } from '../dialogconfirm/DialogConfirm.vue.d';
-import { MenuItem } from '../menuitem';
+import { DialogConfirmProps } from '../../components/dialogconfirm/DialogConfirm.vue.d';
+import { MenuItem } from '../../components/menuitem';
 import { ClassComponent, HintedString } from '../ts-helpers.d';
 import { Component } from 'vue';
 import { DateOptions } from '../../utils/date.util';
 
 export interface DataTableLocaleConfig {
-    /**
-     * Message to display on loading ovevrlay while downloading
-     */
-    downloadingMessage: string;
-
-    /**
-     * Text when booleanValue is true
-     */
-    trueText: string;
-
-    /**
-     * Text when booleanValue is false
-     */
-    falseText: string;
+  /**
+   * Message to display on loading ovevrlay while downloading
+   */
+  downloadingMessage: string;
+
+  /**
+   * Text when booleanValue is true
+   */
+  trueText: string;
+
+  /**
+   * Text when booleanValue is false
+   */
+  falseText: string;
 }
 
 export type ChildGroup = {
-    groupHeader: string;
-    groupItems: Data[];
+  groupHeader: string;
+  groupItems: Data[];
 };
 
 export type Data = Record<string, any> & {
-    children?: ChildGroup[];
-    hasChildren?: boolean;
+  children?: ChildGroup[];
+  hasChildren?: boolean;
 };
 
 export type QueryParams = Partial<Record<string, any>>;
@@ -38,22 +38,22 @@ export type QueryParams = Partial<Record<string, any>>;
  * @see {@link BaseDataTableEmits.sort}
  */
 export interface DataTableSortEvent {
-    /**
-     * Browser event.
-     */
-    originalEvent: Event;
-    /**
-     * Number of rows to display in new page
-     */
-    rows: number;
-    /**
-     * Field to sort against
-     */
-    sortField: string | undefined;
-    /**
-     * Sort order as integer
-     */
-    sortOrder: 1 | 0 | -1 | undefined | null;
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Number of rows to display in new page
+   */
+  rows: number;
+  /**
+   * Field to sort against
+   */
+  sortField: string | undefined;
+  /**
+   * Sort order as integer
+   */
+  sortOrder: 1 | 0 | -1 | undefined | null;
 }
 
 /**
@@ -62,349 +62,349 @@ export interface DataTableSortEvent {
  * @extends DataTableSortEvent
  */
 export interface DataTablePageEvent extends DataTableSortEvent {
-    /**
-     * New page number
-     */
-    page: number;
-    /**
-     * Total page count
-     */
-    pageCount: number;
+  /**
+   * New page number
+   */
+  page: number;
+  /**
+   * Total page count
+   */
+  pageCount: number;
 }
 
 /**
  * Custom datatable operator filter metadata.
  */
 export interface DataTableOperatorFilterMetaData {
-    /**
-     * Filter operator
-     */
-    operator: string;
-    /**
-     * Array of filter meta data.
-     */
-    constraints: DataTableFilterMetaData[];
+  /**
+   * Filter operator
+   */
+  operator: string;
+  /**
+   * Array of filter meta data.
+   */
+  constraints: DataTableFilterMetaData[];
 }
 
 /**
  * Custom datatable filter metadata.
  */
 export interface DataTableFilterMetaData {
-    /**
-     * Filter value
-     */
-    value: any;
-    /**
-     * Filter match mode
-     */
-    matchMode:
-        | HintedString<
-              | 'startsWith'
-              | 'contains'
-              | 'notContains'
-              | 'endsWith'
-              | 'equals'
-              | 'notEquals'
-              | 'in'
-              | 'lt'
-              | 'lte'
-              | 'gt'
-              | 'gte'
-              | 'between'
-              | 'dateIs'
-              | 'dateIsNot'
-              | 'dateBefore'
-              | 'dateAfter'
-          >
-        | undefined;
+  /**
+   * Filter value
+   */
+  value: any;
+  /**
+   * Filter match mode
+   */
+  matchMode:
+    | HintedString<
+        | 'startsWith'
+        | 'contains'
+        | 'notContains'
+        | 'endsWith'
+        | 'equals'
+        | 'notEquals'
+        | 'in'
+        | 'lt'
+        | 'lte'
+        | 'gt'
+        | 'gte'
+        | 'between'
+        | 'dateIs'
+        | 'dateIsNot'
+        | 'dateBefore'
+        | 'dateAfter'
+      >
+    | undefined;
 }
 
 /**
  * Custom datatable filter metadata.
  */
 export interface DataTableFilterMeta {
-    /**
-     * Extra options
-     */
-    [key: string]:
-        | string
-        | DataTableFilterMetaData
-        | DataTableOperatorFilterMetaData;
+  /**
+   * Extra options
+   */
+  [key: string]:
+    | string
+    | DataTableFilterMetaData
+    | DataTableOperatorFilterMetaData;
 }
 
 export type FetchResponse<T = Data> = {
-    message: string;
-    data: {
-        data: T[];
-        totalRecords: number;
-    };
+  message: string;
+  data: {
+    data: T[];
+    totalRecords: number;
+  };
 };
 
 export type ShortFetchResponse<T = Data> = {
-    status: number;
-    message: string;
-    data: T[];
+  status: number;
+  message: string;
+  data: T[];
 };
 
 export type TableCellComponent = {
-    component: Component;
-    props?: object;
-    model?: any;
-    events?: any;
-    onChange?: (itemData: any) => void;
-    disabled?: boolean;
+  component: Component;
+  props?: object;
+  model?: any;
+  events?: any;
+  onChange?: (itemData: any) => void;
+  disabled?: boolean;
 };
 
 export type TogglePresetConfirmDialogProps = Omit<
-    DialogConfirmProps,
-    'visible' | 'list' | 'onConfirm'
+  DialogConfirmProps,
+  'visible' | 'list' | 'onConfirm'
 > & {
-    /**
-     * When the dialog should be shown?
-     * Pass a boolean returning function to show dialog when it returns true.
-     *
-     * @default both - leave this as undefined to show on both states
-     */
-    showWhen?:
-        | 'active'
-        | 'inactive'
-        | ((data: any, state: boolean) => boolean)
-        | ((data: any, state: boolean) => Promise<boolean>);
+  /**
+   * When the dialog should be shown?
+   * Pass a boolean returning function to show dialog when it returns true.
+   *
+   * @default both - leave this as undefined to show on both states
+   */
+  showWhen?:
+    | 'active'
+    | 'inactive'
+    | ((data: any, state: boolean) => boolean)
+    | ((data: any, state: boolean) => Promise<boolean>);
 };
 
 interface ColumnConfirmActionPresetBase {
-    /**
-     * Use dialog confirmation
-     */
-    confirmDialogProps?:
-        | TogglePresetConfirmDialogProps
-        | ((state: boolean, data: any) => TogglePresetConfirmDialogProps);
-
-    /**
-     * Callback for confirmation
-     */
-    onConfirm?: (state: boolean, data: any, revertFunction: () => void) => void;
+  /**
+   * Use dialog confirmation
+   */
+  confirmDialogProps?:
+    | TogglePresetConfirmDialogProps
+    | ((state: boolean, data: any) => TogglePresetConfirmDialogProps);
+
+  /**
+   * Callback for confirmation
+   */
+  onConfirm?: (state: boolean, data: any, revertFunction: () => void) => void;
 }
 
 export interface ColumnTogglePreset extends ColumnConfirmActionPresetBase {
-    type: 'toggle';
-
-    /**
-     *
-     * @param state boolean - the toggle state
-     * @param revertFunction - function to revert previous state when action failed or canceled
-     * @returns
-     */
-    onToggle?: (state: boolean, data: any, revertFunction: () => void) => void;
-
-    /**
-     * Add conditional disabling for each row
-     */
-    disabled?: boolean | ((data: any) => boolean);
+  type: 'toggle';
+
+  /**
+   *
+   * @param state boolean - the toggle state
+   * @param revertFunction - function to revert previous state when action failed or canceled
+   * @returns
+   */
+  onToggle?: (state: boolean, data: any, revertFunction: () => void) => void;
+
+  /**
+   * Add conditional disabling for each row
+   */
+  disabled?: boolean | ((data: any) => boolean);
 }
 
 export interface ColumnCheckboxPreset extends ColumnConfirmActionPresetBase {
-    type: 'checkbox';
-
-    /**
-     *
-     * @param state boolean - the checkbox state
-     * @param revertFunction - function to revert previous state when action failed or canceled
-     * @returns
-     */
-    onCheck?: (state: boolean, data: any, revertFunction: () => void) => void;
-
-    /**
-     * Add conditional disabling for each row
-     */
-    disabled?: boolean | ((data: any) => boolean);
+  type: 'checkbox';
+
+  /**
+   *
+   * @param state boolean - the checkbox state
+   * @param revertFunction - function to revert previous state when action failed or canceled
+   * @returns
+   */
+  onCheck?: (state: boolean, data: any, revertFunction: () => void) => void;
+
+  /**
+   * Add conditional disabling for each row
+   */
+  disabled?: boolean | ((data: any) => boolean);
 }
 
 export interface ColumnMultiRowPreset {
-    type: 'multirow';
-    fieldAttributes?: (data: any) => MultiRowAttribute[];
+  type: 'multirow';
+  fieldAttributes?: (data: any) => MultiRowAttribute[];
 }
 
 export interface MultiRowAttribute {
-    class?: string | string[];
-    value?: string;
-    bodyComponent?: TableCellComponent;
+  class?: string | string[];
+  value?: string;
+  bodyComponent?: TableCellComponent;
 }
 
 export type ColumnPreset =
-    | ColumnTogglePreset
-    | ColumnMultiRowPreset
-    | ColumnCheckboxPreset;
+  | ColumnTogglePreset
+  | ColumnMultiRowPreset
+  | ColumnCheckboxPreset;
 
 export interface TableColumn {
-    header?: string;
-    field: string;
-    fieldType?: 'string' | 'number' | 'boolean' | 'array';
-    info?: string;
-    editable?: boolean;
-    /**
-     * If the column is editable, only allow number inputs.
-     */
-    numberInputOnly?: boolean;
-    sortable?: boolean;
-    /**
-     * Whether the column can be re-ordered by column visibility.
-     * If set to false, the column will not appear on column visibility.
-     */
-    reorderable?: boolean;
-    /**
-     * Make the column cannot reordered by disabled drag-ability.
-     */
-    dragable?: boolean;
-    fixed?: boolean;
-    visible?: boolean;
-    /**
-     * Use commonly used component as preset
-     */
-    preset?: ColumnPreset;
-    /**
-     * Whether the column is checked by default, only for Custom Report Table
-     * @default true
-     */
-    checkedByDefault?: boolean;
-    /**
-     * The column width in pixel.
-     */
-    width?: number | string;
-    /**
-     * Exclude column from download/export excel.
-     */
-    excluded?: boolean;
-    /**
-     * Set the field for Export Excel, when you need to export different field of column field.
-     *
-     * @default undefined - the export field using column 'field'
-     */
-    exportField?: string;
-    /**
-     * Specify the header when exported
-     */
-    exportHeader?: string;
-    /**
-     * Specify the property or field which value in the array should be used for exporting to Excel.
-     *
-     * @example 'field.name.fullName'
-     */
-    arrayValueField?: string;
-    /**
-     * Download Excel Config
-     *
-     * When needs to export only the property has Truthy value, set this to true,
-     * The Excel result will only get the property object which the value is truthy.
-     *
-     * @example
-     * Example Object:
-     * "roles": {
-     *    roleA: true,
-     *    roleB: true,
-     *    roleC: false,
-     *    roleD: null, // falsy
-     *    roleE: '', // falsy
-     *    roleF: 'role', // truthy
-     * }
-     *
-     * The result will be: "roleA, roleB, roleF" - Only the properties with truthy values will be included.
-     */
-    includeTruthyProperties?: boolean;
-    /**
-     * Convert boolean into text Yes/No
-     */
-    booleanValue?: boolean;
-    /**
-     * Specify the options for formatting date values using the formatDate utility.
-     *
-     * The date format primarily uses the general settings configurations.
-     * Within this property, you only need to set the `showTime` or `showDate` options.
-     */
-    dateFormatOptions?: DateOptions;
-    /**
-     * Set the fallback text when the cell value is empty. Used in export excel.
-     *
-     * @example 'N/A'
-     */
-    emptyText?: string;
-    bodyTemplate?: (data: any, index: number) => string | undefined;
-    bodyComponent?: (data: any, index: number) => TableCellComponent;
-    headerTemplate?: () => string;
-    headerComponent?: () => {
-        component: string | Component;
-        props?: any;
-        model?: any;
-        events?: any;
-        onChange?: (data: any) => void;
-        disabled?: boolean;
-    };
-    /**
-     * Inline style of header, body and footer cells.
-     */
-    style?: string | (() => string);
-    /**
-     * Style class of header, body and footer cells.
-     */
-    class?: string | string[] | (() => string | string[]);
-    /**
-     * Inline style of the column header.
-     */
-    headerStyle?: string | (() => string);
-    /**
-     * Style class of the column header.
-     */
-    headerClass?: string | string[] | (() => string | string[]);
-    /**
-     * Inline style of the column body.
-     */
-    bodyStyle?: string | (() => string);
-    /**
-     * Style class of the column body.
-     */
-    bodyClass?: string | string[] | ((data?: any) => string | string[]);
+  header?: string;
+  field: string;
+  fieldType?: 'string' | 'number' | 'boolean' | 'array';
+  info?: string;
+  editable?: boolean;
+  /**
+   * If the column is editable, only allow number inputs.
+   */
+  numberInputOnly?: boolean;
+  sortable?: boolean;
+  /**
+   * Whether the column can be re-ordered by column visibility.
+   * If set to false, the column will not appear on column visibility.
+   */
+  reorderable?: boolean;
+  /**
+   * Make the column cannot reordered by disabled drag-ability.
+   */
+  dragable?: boolean;
+  fixed?: boolean;
+  visible?: boolean;
+  /**
+   * Use commonly used component as preset
+   */
+  preset?: ColumnPreset;
+  /**
+   * Whether the column is checked by default, only for Custom Report Table
+   * @default true
+   */
+  checkedByDefault?: boolean;
+  /**
+   * The column width in pixel.
+   */
+  width?: number | string;
+  /**
+   * Exclude column from download/export excel.
+   */
+  excluded?: boolean;
+  /**
+   * Set the field for Export Excel, when you need to export different field of column field.
+   *
+   * @default undefined - the export field using column 'field'
+   */
+  exportField?: string;
+  /**
+   * Specify the header when exported
+   */
+  exportHeader?: string;
+  /**
+   * Specify the property or field which value in the array should be used for exporting to Excel.
+   *
+   * @example 'field.name.fullName'
+   */
+  arrayValueField?: string;
+  /**
+   * Download Excel Config
+   *
+   * When needs to export only the property has Truthy value, set this to true,
+   * The Excel result will only get the property object which the value is truthy.
+   *
+   * @example
+   * Example Object:
+   * "roles": {
+   *    roleA: true,
+   *    roleB: true,
+   *    roleC: false,
+   *    roleD: null, // falsy
+   *    roleE: '', // falsy
+   *    roleF: 'role', // truthy
+   * }
+   *
+   * The result will be: "roleA, roleB, roleF" - Only the properties with truthy values will be included.
+   */
+  includeTruthyProperties?: boolean;
+  /**
+   * Convert boolean into text Yes/No
+   */
+  booleanValue?: boolean;
+  /**
+   * Specify the options for formatting date values using the formatDate utility.
+   *
+   * The date format primarily uses the general settings configurations.
+   * Within this property, you only need to set the `showTime` or `showDate` options.
+   */
+  dateFormatOptions?: DateOptions;
+  /**
+   * Set the fallback text when the cell value is empty. Used in export excel.
+   *
+   * @example 'N/A'
+   */
+  emptyText?: string;
+  bodyTemplate?: (data: any, index: number) => string | undefined;
+  bodyComponent?: (data: any, index: number) => TableCellComponent;
+  headerTemplate?: () => string;
+  headerComponent?: () => {
+    component: string | Component;
+    props?: any;
+    model?: any;
+    events?: any;
+    onChange?: (data: any) => void;
+    disabled?: boolean;
+  };
+  /**
+   * Inline style of header, body and footer cells.
+   */
+  style?: string | (() => string);
+  /**
+   * Style class of header, body and footer cells.
+   */
+  class?: string | string[] | (() => string | string[]);
+  /**
+   * Inline style of the column header.
+   */
+  headerStyle?: string | (() => string);
+  /**
+   * Style class of the column header.
+   */
+  headerClass?: string | string[] | (() => string | string[]);
+  /**
+   * Inline style of the column body.
+   */
+  bodyStyle?: string | (() => string);
+  /**
+   * Style class of the column body.
+   */
+  bodyClass?: string | string[] | ((data?: any) => string | string[]);
 }
 
 /**
  * Extending the base table column, tree table column will only available when props.treeTable is sets to be `true`
  */
 export interface TreeTableColumns extends TableColumn {
-    /**
-     * How much the column spanning
-     */
-    colspan?: number;
-    /**
-     * The list of parents columns fields
-     * The colspan will be counted from it lengths
-     * This column will be shown when at least one of parent columns is visible
-     *
-     * @example
-     * This column spans from parent column A to C,
-     * this property value should be ['a', 'b', 'c'],
-     * which each value in array is a 'column.field' of the parent columns
-     *
-     * The counted colspan will be 3
-     */
-    parentColumnsFields?: string[];
+  /**
+   * How much the column spanning
+   */
+  colspan?: number;
+  /**
+   * The list of parents columns fields
+   * The colspan will be counted from it lengths
+   * This column will be shown when at least one of parent columns is visible
+   *
+   * @example
+   * This column spans from parent column A to C,
+   * this property value should be ['a', 'b', 'c'],
+   * which each value in array is a 'column.field' of the parent columns
+   *
+   * The counted colspan will be 3
+   */
+  parentColumnsFields?: string[];
 }
 
 /**
  * Emit payload for `cellEdited`
  */
 export interface DataTableCellEditedEvent {
-    item: Data;
-    field: string;
-    index: number;
-    value?: string;
+  item: Data;
+  field: string;
+  index: number;
+  value?: string;
 }
 
 /**
  * Emit payload for `rowReorder`
  */
 export interface DataTableRowReorderEvent {
-    item: Data;
-    fromIndex?: number;
-    toIndex?: number;
+  item: Data;
+  fromIndex?: number;
+  toIndex?: number;
 }
 
 /**
@@ -412,305 +412,305 @@ export interface DataTableRowReorderEvent {
  * @see {@link DataTableEmits['row-click']}
  */
 export interface DataTableRowClickEvent {
-    /**
-     * Browser event.
-     */
-    originalEvent: Event;
-    /**
-     * Selected row data.
-     */
-    data: any;
-    /**
-     * Row index.
-     */
-    index: number;
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Selected row data.
+   */
+  data: any;
+  /**
+   * Row index.
+   */
+  index: number;
 }
 
 export type ChildTableProps = Partial<Omit<TreeTableProps, 'fetchFunction'>> & {
-    /**
-     * Use the header of each column in child table
-     *
-     * @default false
-     */
-    useColumnsHeader?: boolean;
-    /**
-     * The function to fetch data on row expand
-     */
-    fetchFunction?: (
-        parentData: Data,
-    ) => Promise<ShortFetchResponse<ChildGroup> | undefined>;
+  /**
+   * Use the header of each column in child table
+   *
+   * @default false
+   */
+  useColumnsHeader?: boolean;
+  /**
+   * The function to fetch data on row expand
+   */
+  fetchFunction?: (
+    parentData: Data,
+  ) => Promise<ShortFetchResponse<ChildGroup> | undefined>;
 };
 
 export interface TreeTableProps
-    extends Omit<
-        BaseDataTableProps,
-        'columns' | 'treeTable' | 'childTableProps'
-    > {
-    /**
-     * Activate tree table mode
-     */
-    treeTable?: true;
-    /**
-     * V-model single selection. Works with selectionType 'single'
-     */
-    singleSelection?: Data;
-    /**
-     * An array of table columns to display.
-     */
-    columns: TreeTableColumns[];
-    /**
-     * Properties to be passed into sub table
-     */
-    childTableProps?: ChildTableProps;
+  extends Omit<
+    BaseDataTableProps,
+    'columns' | 'treeTable' | 'childTableProps'
+  > {
+  /**
+   * Activate tree table mode
+   */
+  treeTable?: true;
+  /**
+   * V-model single selection. Works with selectionType 'single'
+   */
+  singleSelection?: Data;
+  /**
+   * An array of table columns to display.
+   */
+  columns: TreeTableColumns[];
+  /**
+   * Properties to be passed into sub table
+   */
+  childTableProps?: ChildTableProps;
 }
 
 export interface BaseDataTableProps {
-    /**
-     * Disable tree table mode
-     */
-    treeTable?: false;
-    childTableProps?: undefined;
-    /**
-     * Optional property to set a unique name for the table. This name will be used as part of the unique table ID.
-     *
-     * @optional
-     */
-    tableName?: string;
-    /**
-     * Optional property to set a unique name for the table. This name will be used as table title when export table into excel.
-     *
-     * @optional
-     */
-    tableTitle?: string;
-    /**
-     * An array of table columns to display.
-     */
-    columns: TableColumn[];
-    /**
-     * Whether show single action option.
-     * @default true;
-     */
-    useOption?: boolean;
-    /**
-     * An array of objects to display in the table.
-     */
-    data?: Data[];
-    /**
-     * The key of the data object to use as a unique identifier.
-     *
-     * @default '_id'
-     */
-    dataKey?: string;
-    /**
-     * The key of the data object to determine whether the row data should be disabled.
-     */
-    disableKey?: string;
-    /**
-     * Determine whether disabled rows should be included in the check all process or not
-     */
-    includeCheckDisabledRows?: boolean;
-    /**
-     * The key of data object to determine whether the row data has context highlighted or not
-     */
-    highlightKey?: string;
-    /**
-     * Boolean to specify whether all rows should be disabled.
-     */
-    disableAllRows?: boolean;
-    /**
-     * The query search from ButtonSearch component.
-     *
-     * @deprecated - not fully supported, may not works properly
-     */
-    search?: string;
-    /**
-     * Tag query for search by scan
-     * @deprecated - not fully supported, may not works properly
-     */
-    tag?: string;
-    /**
-     * The default query params that must be included every fetch request.
-     */
-    defaultQueryParams?: Readonly<Record<string, any>>;
-    /**
-     * The function to fetch data on DataTable mounted and on queryParams dependencies updated.
-     *
-     * @param params this is required
-     */
-    fetchFunction?: (params: QueryParams) => Promise<FetchResponse | undefined>;
-    /**
-     * The number of rows to display per page.
-     * @defaultValue 5
-     */
-    rows?: number;
-    /**
-     * Whether all rows are selected or not.
-     */
-    isSelectedAll?: boolean;
-    filters?: DataTableFilterMeta;
-    /**
-     * Determine the type of DataTable.
-     *
-     * Sets to lazy if you need to dynamically shows data.
-     */
-    lazy?: boolean;
-    // Sets loading animation for DataTable that's not lazy.
-    loading?: boolean;
-    /**
-     * Whether to enable 'checkbox' | 'single' selection.
-     *
-     * @default 'checkbox'
-     */
-    selectionType?: 'single' | 'checkbox' | 'none';
-    /**
-     * Whether to enable checkbox multi-selection.
-     *
-     * @deprecated use 'selection-type="checkbox"'
-     */
-    useSelection?: boolean;
-    /**
-     * An array of selected objects from `data`.
-     */
-    selectedData?: Data[];
-    /**
-     * An array of selected objects from `data`.
-     */
-    expandedRows?: { [key: string]: boolean };
-    /**
-     * Whether display pagination under the table or not.
-     */
-    usePaginator?: boolean;
-    /**
-     * The options that will be visible for each row data.
-     *
-     * __Provide at least one option to display an Options Menu for each row.__
-     *
-     * The options menu will be displayed on the right side of the table row.
-     */
-    options?: MenuItem[];
-    /**
-     * Whether to enable single selection or not.
-     * If enabled, clicking a row will trigger the `rowSelect` event with the corresponding data object passed as a parameter.
-     *
-     * @deprecated use 'selection-type="single"'
-     * @note Do not combine `singleSelect` with `useSelection`, as it may lead to unexpected behavior.
-     */
-    singleSelect?: boolean;
-    /**
-     * Whether the column is customizable or not.
-     *
-     * @default true - the table is able to reorder and toggle visibility column;
-     */
-    customColumn?: boolean;
-    /**
-     * Props to set scroll height, this will make table content scrollable
-     * @example '50vh' or '300px'
-     */
-    scrollHeight?: string;
-    /**
-     * When the row height sets to fixed, it will have 35px height
-     *
-     * @defaultValue 'fixed'
-     */
-    rowHeight?: 'fixed' | 'auto';
-    /**
-     * To determine if row table is reorder-able
-     */
-    reorderable?: boolean;
-    /**
-     * An array of fields as string to use in global filtering.
-     *
-     * @default undefined - All fields are used
-     */
-    globalFilterFields?: string[];
-    /**
-     * Total disabled rows in table (used for synchronizing with bulk action button)
-     */
-    totalDisabledRows?: number;
-    /**
-     * Specify the error message download excel
-     *
-     * @example 'Error, failed to download {fileName}' - fileName will be replaced
-     */
-    excelToastErrorMessage?: string;
-    /**
-     * Custom message when data table is empty
-     *
-     * Will be shown bellow no-data animation
-     */
-    emptyTableMessage?: string;
+  /**
+   * Disable tree table mode
+   */
+  treeTable?: false;
+  childTableProps?: undefined;
+  /**
+   * Optional property to set a unique name for the table. This name will be used as part of the unique table ID.
+   *
+   * @optional
+   */
+  tableName?: string;
+  /**
+   * Optional property to set a unique name for the table. This name will be used as table title when export table into excel.
+   *
+   * @optional
+   */
+  tableTitle?: string;
+  /**
+   * An array of table columns to display.
+   */
+  columns: TableColumn[];
+  /**
+   * Whether show single action option.
+   * @default true;
+   */
+  useOption?: boolean;
+  /**
+   * An array of objects to display in the table.
+   */
+  data?: Data[];
+  /**
+   * The key of the data object to use as a unique identifier.
+   *
+   * @default '_id'
+   */
+  dataKey?: string;
+  /**
+   * The key of the data object to determine whether the row data should be disabled.
+   */
+  disableKey?: string;
+  /**
+   * Determine whether disabled rows should be included in the check all process or not
+   */
+  includeCheckDisabledRows?: boolean;
+  /**
+   * The key of data object to determine whether the row data has context highlighted or not
+   */
+  highlightKey?: string;
+  /**
+   * Boolean to specify whether all rows should be disabled.
+   */
+  disableAllRows?: boolean;
+  /**
+   * The query search from ButtonSearch component.
+   *
+   * @deprecated - not fully supported, may not works properly
+   */
+  search?: string;
+  /**
+   * Tag query for search by scan
+   * @deprecated - not fully supported, may not works properly
+   */
+  tag?: string;
+  /**
+   * The default query params that must be included every fetch request.
+   */
+  defaultQueryParams?: Readonly<Record<string, any>>;
+  /**
+   * The function to fetch data on DataTable mounted and on queryParams dependencies updated.
+   *
+   * @param params this is required
+   */
+  fetchFunction?: (params: QueryParams) => Promise<FetchResponse | undefined>;
+  /**
+   * The number of rows to display per page.
+   * @defaultValue 5
+   */
+  rows?: number;
+  /**
+   * Whether all rows are selected or not.
+   */
+  isSelectedAll?: boolean;
+  filters?: DataTableFilterMeta;
+  /**
+   * Determine the type of DataTable.
+   *
+   * Sets to lazy if you need to dynamically shows data.
+   */
+  lazy?: boolean;
+  // Sets loading animation for DataTable that's not lazy.
+  loading?: boolean;
+  /**
+   * Whether to enable 'checkbox' | 'single' selection.
+   *
+   * @default 'checkbox'
+   */
+  selectionType?: 'single' | 'checkbox' | 'none';
+  /**
+   * Whether to enable checkbox multi-selection.
+   *
+   * @deprecated use 'selection-type="checkbox"'
+   */
+  useSelection?: boolean;
+  /**
+   * An array of selected objects from `data`.
+   */
+  selectedData?: Data[];
+  /**
+   * An array of selected objects from `data`.
+   */
+  expandedRows?: { [key: string]: boolean };
+  /**
+   * Whether display pagination under the table or not.
+   */
+  usePaginator?: boolean;
+  /**
+   * The options that will be visible for each row data.
+   *
+   * __Provide at least one option to display an Options Menu for each row.__
+   *
+   * The options menu will be displayed on the right side of the table row.
+   */
+  options?: MenuItem[];
+  /**
+   * Whether to enable single selection or not.
+   * If enabled, clicking a row will trigger the `rowSelect` event with the corresponding data object passed as a parameter.
+   *
+   * @deprecated use 'selection-type="single"'
+   * @note Do not combine `singleSelect` with `useSelection`, as it may lead to unexpected behavior.
+   */
+  singleSelect?: boolean;
+  /**
+   * Whether the column is customizable or not.
+   *
+   * @default true - the table is able to reorder and toggle visibility column;
+   */
+  customColumn?: boolean;
+  /**
+   * Props to set scroll height, this will make table content scrollable
+   * @example '50vh' or '300px'
+   */
+  scrollHeight?: string;
+  /**
+   * When the row height sets to fixed, it will have 35px height
+   *
+   * @defaultValue 'fixed'
+   */
+  rowHeight?: 'fixed' | 'auto';
+  /**
+   * To determine if row table is reorder-able
+   */
+  reorderable?: boolean;
+  /**
+   * An array of fields as string to use in global filtering.
+   *
+   * @default undefined - All fields are used
+   */
+  globalFilterFields?: string[];
+  /**
+   * Total disabled rows in table (used for synchronizing with bulk action button)
+   */
+  totalDisabledRows?: number;
+  /**
+   * Specify the error message download excel
+   *
+   * @example 'Error, failed to download {fileName}' - fileName will be replaced
+   */
+  excelToastErrorMessage?: string;
+  /**
+   * Custom message when data table is empty
+   *
+   * Will be shown bellow no-data animation
+   */
+  emptyTableMessage?: string;
 }
 
 export type DataTableProps = BaseDataTableProps | TreeTableProps;
 
 export type BaseDataTableEmits = {
-    /**
-     * Emits when option menu button clicked.
-     */
-    'toggleOption': [data: Data];
-    /**
-     * @deprecated use 'v-model:selected-data' instead.
-     */
-    'selectData': [data: Data[]];
-    'rowSelect': [data: DataTableRowClickEvent];
-    /**
-     * Event emitted when the page changes in the data table.
-     *
-     * @event page
-     * @param {DataTablePageEvent} data - The event data containing information about the new page.
-     *
-     * @example
-     * <DataTable @page="handlePageChange" />
-     *
-     * This will call the `handlePageChange` method whenever the page changes in the data table.
-     */
-    'page': [data: DataTablePageEvent];
-
-    /**
-     * Event emitted when the sort order changes in the data table.
-     *
-     * @event sort
-     * @param {DataTableSortEvent} data - The event data containing information about the new sort order.
-     *
-     * @example
-     * <DataTable @sort="handleSortChange" />
-     *
-     * This will call the `handleSortChange` method whenever the sort order changes in the data table.
-     */
-    'sort': [data: DataTableSortEvent];
-    /**
-     * Event emitted when the `selectedData` property is updated.
-     *
-     * @event update:selectedData
-     * @param {Data[]} datas - The updated array of selected data objects.
-     *
-     * @example
-     * <DataTable v-model:selected-data="selectedData" />
-     *
-     * This will update the `selectedData` value whenever a row is selected or deselected.
-     */
-    'update:selectedData': [datas: Data[]];
+  /**
+   * Emits when option menu button clicked.
+   */
+  'toggleOption': [data: Data];
+  /**
+   * @deprecated use 'v-model:selected-data' instead.
+   */
+  'selectData': [data: Data[]];
+  'rowSelect': [data: DataTableRowClickEvent];
+  /**
+   * Event emitted when the page changes in the data table.
+   *
+   * @event page
+   * @param {DataTablePageEvent} data - The event data containing information about the new page.
+   *
+   * @example
+   * <DataTable @page="handlePageChange" />
+   *
+   * This will call the `handlePageChange` method whenever the page changes in the data table.
+   */
+  'page': [data: DataTablePageEvent];
+
+  /**
+   * Event emitted when the sort order changes in the data table.
+   *
+   * @event sort
+   * @param {DataTableSortEvent} data - The event data containing information about the new sort order.
+   *
+   * @example
+   * <DataTable @sort="handleSortChange" />
+   *
+   * This will call the `handleSortChange` method whenever the sort order changes in the data table.
+   */
+  'sort': [data: DataTableSortEvent];
+  /**
+   * Event emitted when the `selectedData` property is updated.
+   *
+   * @event update:selectedData
+   * @param {Data[]} datas - The updated array of selected data objects.
+   *
+   * @example
+   * <DataTable v-model:selected-data="selectedData" />
+   *
+   * This will update the `selectedData` value whenever a row is selected or deselected.
+   */
+  'update:selectedData': [datas: Data[]];
 };
 
 export type TreeTableEmits = BaseDataTableEmits & {
-    /**
-     * Emitted when a row is clicked/selected. Only available on `single` selectionType
-     */
-    'update:singleSelection': [data: Data];
-    /**
-     * Emitted when cell has lost focus.
-     */
-    'cellEdited': [payload: DataTableCellEditedEvent];
-    /**
-     * @deprecated - use new emits `cellEdited`
-     */
-    'input': [payload: DataTableCellEditedEvent];
-    /**
-     * Emitted on Drop Event occurred after dragging a row.
-     * Only available on
-     *
-     */
-    'rowReorder': [payload?: DataTableRowReorderEvent];
+  /**
+   * Emitted when a row is clicked/selected. Only available on `single` selectionType
+   */
+  'update:singleSelection': [data: Data];
+  /**
+   * Emitted when cell has lost focus.
+   */
+  'cellEdited': [payload: DataTableCellEditedEvent];
+  /**
+   * @deprecated - use new emits `cellEdited`
+   */
+  'input': [payload: DataTableCellEditedEvent];
+  /**
+   * Emitted on Drop Event occurred after dragging a row.
+   * Only available on
+   *
+   */
+  'rowReorder': [payload?: DataTableRowReorderEvent];
 };
 
 export type DataTableEmits = TreeTableEmits;
@@ -727,9 +727,9 @@ export type DataTableEmits = TreeTableEmits;
  * @group Component
  */
 declare class DataTable extends ClassComponent<
-    DataTableProps,
-    Record<string, unknown>,
-    DataTableEmits
+  DataTableProps,
+  Record<string, unknown>,
+  DataTableEmits
 > {}
 
 export default DataTable;